animejs走马灯_animejs 动画库

Document

.target {

width: 20px;

height: 20px;

background-color: red;

}

new Vue({

el: '#app',

data() {

return {};

},

mounted() {

// 为每种属性提供特定的动画参数 https://animejs.com/documentation/#specificPropParameters

// 为动画的每个目标和属性获取不同的值 https://animejs.com/documentation/#functionBasedParameters

// 添加，减去或乘以原始值。 https://animejs.com/documentation/#relativeValues

// 帧动画 https://animejs.com/documentation/#animationKeyframes

// 播放/暂停 https://animejs.com/documentation/#playPause

// 回调函数,监听动画周期 https://animejs.com/documentation/#update

var playPauseAnim = anime({

targets: '.target',

autoplay: true, // 定义动画是否应自动启动。

// translateX: 250,

// translateX: [-20, 20], // 强制动画以指定值开始。 [from, to]

translateX: [

{ value: -20, duration: 0 },

{ value: 0, duration: 1000 },

{ value: 20, duration: 1000, delay: 2000 },

],

opacity: [

{ value: 0, duration: 0 },

{ value: 1, duration: 1000 },

{ value: 0, duration: 1000, delay: 2000 },

],

duration: 3000, // 动画的持续时间(以毫秒为单位)

delay: 1000, // 动画的延迟(以毫秒为单位)

// endDelay: 1000, // 动画结束时以毫秒为单位添加一些额外时间

easing: 'linear', // 和css一样的动画曲线 https://animejs.com/documentation/#linearEasing

// direction: 'alternate', // 定义动画的方向。 https://animejs.com/documentation/#direction

loop: true, // 定义动画的迭代次数。

// innerHTML: [0, 10000],

// round: 10, // 将值向上舍入为x小数。

//每帧都会触发回调，包括延迟时

update: function() {

// console.log('update');

},

begin: function(anim) {

console.log('begin');

},

// 每次循环开始时都会触发一次loopBegin

loopBegin() {

console.log('loopBegin');

},

// 每次动画开始更改时都会触发changeBegin

changeBegin: function(anim) {

console.log('changeBegin');

},

//每次循环完成时都会触发一次loopComplete

loopComplete: function(anim) {

console.log('loopComplete');

},

// 每次动画停止更改时都会触发changeComplete

changeComplete: function(anim) {

console.log('changeComplete');

},

// 在延迟之后触发

change: function() {

console.log('change');

},

complete: function(anim) {

console.log('结束');

},

});

},

methods: {},

});