Анимация фигуры в HTML,CSS,JavaScript

@Айбатрос · Регистрация: 12.12.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте. Очень срочно нужна ваша помощь. Сам я новичок, т.к. карантин, не особо понятен материал, да и недавно только дали это задание, на днях уже сдавать надо, можно на любом языке делать:
1.а) задать перемещение объекта из центра экрана в каждый из углов, оставляя “хвост” из нескольких изображений. Острый угол объекта должен каждый раз указывать на угол экрана;
б) создать эффект удаляющегося элемента.
Может делал кто из вас, может есть код? Буду признателен

Добавлено через 1 минуту
Нужно ромб анимировать, пункт а) самый важный

@8Observer8 · 15.05.2020, 14:16

Можно полностью закрасить ромбы, если заменить эти строки:

Javascript

1
2
3

ctx.strokeStyle = color;
...
ctx.stroke();

На эти:

Javascript

1
2
3

ctx.fillStyle = color;
...
ctx.fill();

@Айбатрос · 15.05.2020, 18:35 **[ТС]**

По просторам интернета вообще не нашел как рисуется 3D ромб, зато кубов куча. Жесть. Я скидывал картинку до этого, и вот что получилось у меня:

8Observer8, что скажете, можно ли соединить два ромба, чтоб получилось как на картинке. В это случае нужно границы ромбов другим цветом обозначить, чтоб не сливались они при закраске одним цветом

@Айбатрос · 15.05.2020, 18:35 **[ТС]**

Вот код:

HTML5

<!doctype html>
 
 
 
    <body>
            
        <canvas id="myCanvas" width="1343" height="603" style="border: 1px solid blue"></canvas>
 
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
 
            function Rhombuse(x, y, size, angle, angleSpeed, color) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.angle = angle;
                this.angleSpeed = angleSpeed;
 
                this.draw = function() {
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle * Math.PI / 45);
                    ctx.scale(this.size, this.size);
 
                    ctx.beginPath();
                    ctx.lineWidth = "2";
                    ctx.fillStyle = color;
                    ctx.moveTo(-10, 0);
                    ctx.lineTo(0, -20);
                    ctx.lineTo(10, 0);
                    ctx.lineTo(0, 20);
                    ctx.lineTo(-10, 0);
                    ctx.lineTo(-20, 0);
                    // Hide a gap
                    ctx.moveTo(0, 20);
                    ctx.lineTo(-10, 0);
                    ctx.lineTo(0, -20);
 
                    ctx.fill();
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                }
            }
 
            var xCenter = canvas.width / 2;
            var yCenter = canvas.height / 2;
            var size = 7;
            var angle = 45;
 
            var rhombuses = [];
            rhombuses.push(new Rhombuse(xCenter, yCenter, size, angle, 1, "red"));
           
            rhombuses.push(new Rhombuse(730, 300, 7, angle, 3, "blue"));
 
          
            {
 
                for (var i = 0; i < rhombuses.length; ++i) {       
                    rhombuses[i].draw();
                }
 
                
            }
        
        </script>
    </body>
</html>

@zayats80888 · 15.05.2020, 19:10

Айбатрос, примерно так, рисуешь только один ромб

PHP

                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(50, 150, 250)';
                    ctx.moveTo(-8, 1);
                    ctx.lineTo(0, -20);
                    ctx.lineTo(8, -1);
                    ctx.lineTo(0, 20);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(0, 80, 150)';
                    ctx.moveTo(0, 20);
                    ctx.lineTo(8, 20);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -1);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(100, 200, 250)';
                    ctx.moveTo(8, -1);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -20);
                    ctx.lineTo(0, -20);
                    ctx.fill();

@Айбатрос · 15.05.2020, 19:57 **[ТС]**

zayats80888, спасибо большое, хорошо ориентируешься, наверное ты другой язык программирования хорошо знаешь? Выручишь с анимацией?)

@zayats80888 · 15.05.2020, 20:12

Сообщение от Айбатрос

Выручишь с анимацией?

PHP

            var rhomb = new Rhombuse(xCenter, yCenter, size, angle);
            
            animate();  
            function animate()
            {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                rhomb.size *= 0.99;      
                rhomb.draw();
                requestAnimationFrame(animate);
            }

Добавлено через 38 секунд

Сообщение от Айбатрос

angleSpeed, color

убери за не надобностью

@Айбатрос · 15.05.2020, 20:22 **[ТС]**

Блин, вставляю не работает, куда именно ее вставлять?

@zayats80888 · 15.05.2020, 20:42

Сообщение от Айбатрос

куда именно ее вставлять?

Не по теме:

сказал бы я куда ... :)

Кликните здесь для просмотра всего текста

PHP

<!doctype html>
     <body>
            
        <canvas id="myCanvas" width="500" height="500" style="border: 1px solid blue"></canvas>
 
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
 
            function Rhombuse(x, y, size, angle, angleSpeed, color) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.angle = angle;
 
                this.draw = function() {
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle * Math.PI / 45);
                    ctx.scale(this.size, this.size);
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(50, 150, 250)';
                    ctx.moveTo(-8, 1);
                    ctx.lineTo(0, -20);
                    ctx.lineTo(8, -1);
                    ctx.lineTo(0, 20);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(0, 80, 150)';
                    ctx.moveTo(0, 20);
                    ctx.lineTo(8, 20);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -1);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(100, 200, 250)';
                    ctx.moveTo(8, -1);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -20);
                    ctx.lineTo(0, -20);
                    ctx.fill();
         
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                }
            }
 
            var xCenter = canvas.width / 2;
            var yCenter = canvas.height / 2;
            var size = 7;
            var angle = 45;
 
            var rhomb = new Rhombuse(xCenter, yCenter, size, angle);
            
            animate();  
            function animate()
            {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                rhomb.size *= 0.99;
                rhomb.draw();
                requestAnimationFrame(animate);
            }
        
        </script>
    </body>
</html>

@Айбатрос · 15.05.2020, 21:22 **[ТС]**

Спасибо тебе zayats80888, и тебе 8Observer, очень выручили, спасибо! Всем спасибо! Все вернется вам бумерангом, знайте. Всего наилучшего и успехов!! Я этого не забуду! Наконец-то

@Айбатрос · 25.05.2020, 11:15 **[ТС]**

Zayats80888, а как задать движение этого ромба по косинусоиде?? Помоги плиз, очень прошу

Добавлено через 3 минуты
8Observer8

@Айбатрос · 25.05.2020, 12:14 **[ТС]**

Вот код, как сделать так чтобы он двигался вниз, потом вверх, вниз и вверх через экран? (Волнообразно)

PHP/HTML

<!doctype html>
     <body>
            
        <canvas id="myCanvas" width="1349" height="603" style="border: 1px solid blue"></canvas> <!--//в тег canvas задаем высоту и ширину экрана, задаем размер и цвет рамки -->
 
        <script>
            var canvas = document.getElementById("myCanvas");//заносим в переменную наш объект canvas
            var ctx = canvas.getContext("2d");//инициализируем canvas в переменной
 
             var imageUrl= "Сolor";
        var BackgroundColor="Black"; // задаем цвет фона
        
        document.body.style.backgroundImage=imageUrl  //изменяем фон
        document.body.style.backgroundColor=BackgroundColor //изменяем цвет
 
            function Rhombuse(x, y, size, angle, angleSpeed, color) { //координаты,размер,угол,цвет
                this.x = x; //координата x
                this.y = y; //координата y
                this.size = size; //размер
                this.angle = angle; //угол
 
                this.draw = function() { //объявленяем функцию draw, использующую три ниже описанные функции
                    ctx.translate(this.x, this.y); //функция перемещения
                    ctx.rotate(this.angle * Math.PI / 45); //функция вращения
                    ctx.scale(this.size, this.size); //функция масштабирования
 
                    ctx.beginPath(); //начинаем серию действий отрисовки фигуры 
                    ctx.fillStyle = 'rgb(240, 239, 146)'; //заливаем сторону ромба указанным цветом
                    ctx.moveTo(-8, 1); //ведём линию из текущей позиции в указанную, и делаем в последствии указанную текущей
                    ctx.lineTo(0, -20); //перемещаем курсор в позицию x,y, и делаем её текущей
                    ctx.lineTo(8, -1);
                    ctx.lineTo(0, 20);
                    ctx.fill(); //функция заливки
 
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(240, 239, 146)';
                    ctx.moveTo(0, 20);
                    ctx.lineTo(8, 20);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -1);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.fillStyle = 'rgb(240, 239, 146)';
                    ctx.moveTo(8, -1);
                    ctx.lineTo(16, -1);
                    ctx.lineTo(8, -20);
                    ctx.lineTo(0, -20);
                    ctx.fill(); 
                    ctx.setTransform(1, 0, 0, 1, 0, 0); //метод позволяющий масштабировать, поворачивать, передвигать и скручивать мою фигуру
                }
            }
 
            var xCenter = canvas.width / 16; //устанавливаем фигуру по оси x 
            var yCenter = canvas.height / 3; //устанавилваем фигуру по оси y
            var size = 5; //задаем размер нашей фигуры
            var angle = 45; //угол поворота 
            
            //заносим сюда наши 4 действия, которые были сделаны выше
            var rhomb = new Rhombuse(xCenter, yCenter, size, angle); //
            
            animate();  
            function animate()
            {
                ctx.clearRect(0, 0, canvas.width, canvas.height); //очищаем холст для перерисовки
                
                rhomb.draw(); 
                requestAnimationFrame(animate); //указывает браузеру на то, что я хочу произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации
            }
        
        </script>
    </body>
</html>

Вот начальное положение ромба:

@8Observer8 · 25.05.2020, 13:51

Для Canvas API есть специальный раздел: https://www.cyberforum.ru/javascript-canvas/ Попросите кого-нибудь из модераторов перенести тему, тогда больше народу смогут вам помочь из тех кто специализируется на Canvas API. Либо перепишите свой код на WebGL, тогда можно будет получить помощь по шейдерному OpenGL ES. В следующей теме вы найдёте примеры на WebGL: Небольшие примеры на WebGL Для линейной алгебры в примерах используется библиотека glMatrix (это аналог библиотеки GLM из C++)

@Айбатрос · 25.05.2020, 14:31 **[ТС]**

Вот что получилось пока:

Добавил эти строки:

HTML5

1 2	rhomb.x += 0.9; rhomb.y += 0.9;

Ромб вылетает с экрана, как сделать так чтобы он не вылетал, шел вверх не вылетая с экрана, обратно вниз и т.д? Просто нужно продолжение кода, самому изучать и делать тяжело пока дается

@Айбатрос · 25.05.2020, 14:47 **[ТС]**

То что на гифке сверху это не то, ромб просто идет вниз до конца, гифка не правильно записалась

@Айбатрос · 25.05.2020, 19:05 **[ТС]**

Есть вот такой код:

HTML5

<!doctype html>
     <body>
 
<script>
var canvas,ctx , ctxW = 1349,ctxH = 603;
 
var lines =  new Array,pressed = false;
var ball = {x:-100,y:0,radius:20,speed:3,color:"#F00",
    moveTo: 0,//Индекс точек массива к которому двигаться
draw:function(){
    if(pressed)
    return;
    ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
},
handler: function(){
if(lines.length < 2  || pressed)
    return;
  if(this.moveTo >= lines.length)
    this.moveTo = 0;
 if(this.moveTo == 0){
    this.x = lines[0].x;
  this.y = lines[0].y;
  this.moveTo++;
  }
  else{
    var angle = Math.atan2(lines[this.moveTo].x - this.x,lines[this.moveTo].y - this.y);//Вернет угол в радианах между координатами центра круга и следующей точкой на линии
    if(Math.abs(this.x - lines[this.moveTo].x) < this.speed && Math.abs(this.y - lines[this.moveTo].y) < this.speed){
        this.x = lines[this.moveTo].x;
      this.y = lines[this.moveTo].y;
      this.moveTo++;
    }
    else{
      this.x += Math.sin(angle) * this.speed;
      this.y += Math.cos(angle) * this.speed;
    }    
  }
}
};
window.addEventListener("load",function(){
 
    canvas = document.createElement("canvas");
  ctxW = 1349;  
  ctxH = 603;
  canvas.width = ctxW;
  canvas.height = ctxH;
  document.body.appendChild(canvas);
  ctx = canvas.getContext("2d");
    canvas.addEventListener("mousedown", EVM_down);
  canvas.addEventListener("mouseup", EVM_up);
  canvas.addEventListener("mousemove", EVM_move);
  handler();
},false);
 
 function EVM_down(e){
    lines = new Array;
  ball.moveTo = 0;
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;
  lines.push({x:x,y:y});
  pressed = true;
 }
  function EVM_move(e){
   if(!pressed)
    return;
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;
  lines.push({x:x,y:y});
 }
 
 function EVM_up(e){
   if(!pressed)
    return;
    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;
    lines.push({x:x,y:y});
    pressed = false;
 }
 
 function handler(){
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,ctxW,ctxH);
  if(lines.length > 1){
    ctx.strokeStyle = "#FFF";
    ctx.beginPath();
    ctx.moveTo(lines[0].x,lines[0].y);
    for(var i = 1; i < lines.length; i++)   
        ctx.lineTo(lines[i].x,lines[i].y);
     ctx.stroke();
     ctx.closePath();
  }
  ball.draw();
  ball.handler();
    setTimeout(handler,1000/60);
 }
 </script>
    </body>
</html>

Результат:
Как сделать чтоб вместо этого шарика был ромб? Пробую по линиям нарисовать как до этого скидывали, не работает

@Айбатрос · 25.05.2020, 19:08 **[ТС]**

Опять гифка не так записалась, на самом деле все норм работает, просто ромб нужен

Добавлено через 1 минуту
Я так понял если по линиям рисовать ромб, то не будет работать. Есть другие способы отрисовки?

@8Observer8 5158 / 2770 / 465 Регистрация: 05.10.2013 Сообщений: 7,321 Записей в блоге: 147
	25.05.2020, 13:51	52
	Для Canvas API есть специальный раздел: https://www.cyberforum.ru/javascript-canvas/ Попросите кого-нибудь из модераторов перенести тему, тогда больше народу смогут вам помочь из тех кто специализируется на Canvas API. Либо перепишите свой код на WebGL, тогда можно будет получить помощь по шейдерному OpenGL ES. В следующей теме вы найдёте примеры на WebGL: Небольшие примеры на WebGL Для линейной алгебры в примерах используется библиотека glMatrix (это аналог библиотеки GLM из C++) 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	25.05.2020, 14:47 [ТС]	54
	То что на гифке сверху это не то, ромб просто идет вниз до конца, гифка не правильно записалась 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	25.05.2020, 19:08 [ТС]	56
	Опять гифка не так записалась, на самом деле все норм работает, просто ромб нужен Добавлено через 1 минуту Я так понял если по линиям рисовать ромб, то не будет работать. Есть другие способы отрисовки? 0

Анимация фигуры в HTML,CSS,JavaScript

Решение

Решение

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
		1
	Анимация фигуры в HTML,CSS,JavaScript 10.05.2020, 21:26. Показов 7111. Ответов 55 Метки c#, c++, css, html, opengl, javascript (Все метки) Здравствуйте. Очень срочно нужна ваша помощь. Сам я новичок, т.к. карантин, не особо понятен материал, да и недавно только дали это задание, на днях уже сдавать надо, можно на любом языке делать: 1.а) задать перемещение объекта из центра экрана в каждый из углов, оставляя “хвост” из нескольких изображений. Острый угол объекта должен каждый раз указывать на угол экрана; б) создать эффект удаляющегося элемента. Может делал кто из вас, может есть код? Буду признателен Добавлено через 1 минуту Нужно ромб анимировать, пункт а) самый важный 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	15.05.2020, 18:35 [ТС]	42
	По просторам интернета вообще не нашел как рисуется 3D ромб, зато кубов куча. Жесть. Я скидывал картинку до этого, и вот что получилось у меня: 8Observer8, что скажете, можно ли соединить два ромба, чтоб получилось как на картинке. В это случае нужно границы ромбов другим цветом обозначить, чтоб не сливались они при закраске одним цветом Миниатюры Изображения 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	15.05.2020, 19:57 [ТС]	45
	zayats80888, спасибо большое, хорошо ориентируешься, наверное ты другой язык программирования хорошо знаешь? Выручишь с анимацией?) 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	15.05.2020, 20:22 [ТС]	47
	Блин, вставляю не работает, куда именно ее вставлять? 0

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	15.05.2020, 21:22 [ТС]	49
	Спасибо тебе zayats80888, и тебе 8Observer, очень выручили, спасибо! Всем спасибо! Все вернется вам бумерангом, знайте. Всего наилучшего и успехов!! Я этого не забуду! Наконец-то 1

@Айбатрос 3 / 3 / 0 Регистрация: 12.12.2018 Сообщений: 69
	25.05.2020, 11:15 [ТС]	50
	Zayats80888, а как задать движение этого ромба по косинусоиде?? Помоги плиз, очень прошу Добавлено через 3 минуты 8Observer8 0