在Vue中使用GSAP完成动画（四）播放组件

Posted 2023-03-21

参考技术A

控制动画往正方向播放，可设定开始的时间点。

如果 suppressEvents 保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

暂停动画，可选择跳转到特定时间。

如果 suppressEvents 保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

获取或设置动画的暂停状态，该状态指示动画当前是否已暂停。

重新开始动画/重头开始。

恢复播放而不改变方向（前进或后退），可选择首先跳到特定时间

与 play() 的区别就是它可以后退

控制动画反向播放。动画的各种表现都会反转，例如ease

获取或设置动画的反转状态，指示是否应该反向播放动画

不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点

获取/设定动画速度，默认为1。

例如0.5为慢速，2为快速。

如果设置则返回此动画实例便于链式调用。如不设置则返回时间调节比例。

在Vue中使用GSAP完成动画（三）动画事件

参考技术A

动画时间都有回调函数，回调函数参数，作用域三种，本文着重讲第一种，后面的不再赘述

在动画结束时触发此回调函数

传递给 onComplete 回调函数的参数数组

如果想传递动画对象本身，可以使用 self

定义 onComplete 函数的作用域，即函数内this的指向

当动画开始渲染时执行此事件函数， 有可能会被执行多次 ，因为动画是可以 重复开始 的

当动画发生改变时(动画进行中的每一帧) 不停 的触发此事件

当一个补间动画被另外一个补间动画覆盖时发生的事件

获取或者设置事件，例如"onComplete", "onUpdate", "onStart", "onReverseComplete" , "onRepeat" (onRepeat 只应用在 TweenMax 或者 TimelineMax 实例)，以及应传递给该回调的任何参数

下面两种方式等同

每个动画实例的每个回调类型只能有一个(一个onComplete, 一个onUpdate, 一个onStart, 等等)，新建则会覆盖掉之前的。
可以通过设置null来删除掉回调函数

可用于链式操作同时绑定多种事件