vue如何使用原生js写动画效果_vue简单动画-animejs在vue中的使用

1 .animatejs所使用的动画都是在点击触发，不做过渡。

2 .svg的数据变化，vue可以操作么？可以的，所以在控制svg图形变化的时候，也是可以通过简单的变化数据，剩余的渲染交给Vue

points="64 69.17870507418452 8.574 99.96369911899026 62.94802451430841 67.35619614139314 64 3.9636991189902617 65.05197548569159 67.35619614139314 119.426 99.96369911899026 "

fill="currentColor"

>

1.就是给point动态绑定数据，但是这样实现起来是使用animejs实现起来简单

this.a1=anime({

targets:this.obj,

points:'64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',

easing:'easeInOutExpo'

})

1 .确实可以这么写，但是这个points的数据还是必须装在一个对象里面，符合之前的语法

动画的控制方法

1 .用事件来操作这个动画的时候，init的时候必须有这俩配置参数

loop:true,

autoplay:false,

2 .play

3 .pause

4 .restare

5 .reverse

6 .seek(n)：传入一个数，动画直接跳入这一帧

动画执行的回调函数

1 .begin:动画开始触发的函数，向外面更新一些动画的状态

2 .update:动画每一帧更新触发的函数：动画还有多久开始，当前动画时间，当前动画的进度

3 .complete:动画完毕触发的函数

4 .run:也是动画运行时触发的函数

实现的效果

1 .targets可以传入nodeList，一次给多个dom添加动画

2 .数值类实现渐变的效果都可以传入一个object来实现(颜色，svg变化，数字过渡，以及其他状态类的变化)

3 .可以操作的属性：css的所有属性，transform之类的属性。

4 .一组多个元素的变化，主要变化在于delay由参数变为函数，这样可以返回多个元素个字的delay

5 .elasticity:动画的回弹效果，也是可以返回函数

6 .变化的值有几种输入方式：

目标选择

loop搭配

1 .单独loop:true。动画从头开始开始播放

2 .loop:true,direction:'reverse' :直接从反向开始播放动画，倒着放动画。

3 .loop:true,direction:'alternate':正向播动画，反向播动画，然后继续正向。。想要的效果。

使用timeline代替value的帧动画实现

1 .就是不知道每次都选取的时候会不会有性能问题

2 .value里面加的话是主要靠delay。

3 .

anime事件,触发函数

1 .this.anime.play()

2 .this.anime.pause()

3 .this.anime.restart()反向播放动画

4 .this.anime.seek()传入一个帧数据，跳到某一帧。

5 .update事件里面获取全部的数据即可