Как организовать движение картинок по path друг за другом, как угодно, только не друг на друге (задать координаты в цикле не получилось, где-то ошибаюсь..). Фрагмент кода:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var W = window.innerWidth,
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var angle = 0;
var currentAngle = 0;
var TO_RADIANS = Math.PI / 180;
var particles = [];
var counter = 0;
var svg = document.getElementById("k9");//path из svg
var straightLength = svg.getTotalLength();
function Particle() {
this.radius = 20;
this.x = svg.getPointAtLength(straightLength).x;
this.y = svg.getPointAtLength(straightLength).y;
this.move = function() {
for ( var g = 0; g < particles.length; g++){
this.x = svg.getPointAtLength(counter*straightLength).x;
this.y = svg.getPointAtLength(counter*straightLength).y;
}
counter+=0.0003;//так картинки передвигаются по path друг на друге, как организовать нечто вроде "паровозика"? Перебрал много вариантов в цикле, но ничего не вышло..
context.beginPath();
context.globalCompositeOperation = "source-over";
context.save();
context.translate(this.x, this.y);
context.rotate(Gangle * TO_RADIANS);
var image = new Image();
image.src = 'img/bag.png';
context.drawImage(image,20, -20, 40, 40);
context.restore();
angle+=0.1;
}
};
for (var i = 0; i < 10; i++) {
var particle = new Particle();
particles.push(particle);
}
function animate() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].move();
}
requestAnimFrame(animate);
}
animate();
Ответ
Как организовать движение картинок по path друг за другом
Для решения этой задачи необходимо нарисовать path в векторном редакторе или вручную.
Движение вдоль этого пути реализуется командой
С привязкой объектов движения к пути посредством ID этого пути с помощью команды
`
Начало движения при наведении на кнопку "Start" begin="startButton.mouseover"
Окончание анимации при наведении на кнопку "Stop" end="stopGreen.mouseover"
Далее добавляются еще два подобных блока кода для двух других объектов движения.
Для реализации движения друг за другом нескольких объектов, задается пауза до начала анимации для второго и третьего шарика. begin="startButton.mouseover+0.25s"
Необязательные украшательства:
Добавлены маркеры для указания направления движения, паттерн фона и блок радиокнопок остановки объектов движения.
Ниже пример кода:
Анимация адаптивна, пробуйте изменять размер окна браузера.
Вариант #2
Объекты движения заменены на более сложные (ведьмы на метлах)
Изменена траектория движения (заменяем патч
Начало анимации при наведении на кнопку "Start"
Приостановка объектов анимации при наведении на соответствующую радиокнопку.
Комментариев нет:
Отправить комментарий