Anime.js 围绕具有不同起点的相同路径设置多个对象的动画

Question

Animate.js motion path

我可以将多个对象设置为同一路径的动画，但每个对象都有不同的起点吗？我有这些属性：

var path = anime.path('.path-slider__path__second');
var easings = ['linear'];

var motionPath = anime({
    targets: '.path-slider__circle__bullet, .path-slider__circle__bullet__second',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: function (el, i) {
        return easings[i];
    },
    duration: 60000,
    loop: true
});

Answer 1

我知道有两种方法可以帮助您存档

第一种方法：创建多个SVG路径并手动旋转它们，尤其是圆形路径非常容易制作

方法二：结合setTimeout和opacity视觉效果好

两种方法都在我的codepen

Anime.js 围绕具有不同起点的相同路径设置多个对象的动画

Anime.js animate multiple objects around same path with different starting points

javascript

anime.js