时间戳

首页 > 解决方案 > Anime.js 围绕具有不同起点的同一路径为多个对象设置动画

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

问题描述

Animate.js 运动路径

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

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
});

标签： javascriptanime.js

解决方案

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

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

方法二：结合setTimeout和opacity给出一个漂亮的视觉效果

两种方法都在我的代码笔中

推荐阅读