在Vue中使用GSAP完成动画(三)动画事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue中使用GSAP完成动画(三)动画事件相关的知识,希望对你有一定的参考价值。

参考技术A

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

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

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

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

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

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

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

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

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

下面两种方式等同

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

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

以上是关于在Vue中使用GSAP完成动画(三)动画事件的主要内容,如果未能解决你的问题,请参考以下文章

在Vue中使用GSAP完成动画(四)播放组件

GSAP 动画正在打破页面底部

GSAP库解决复杂动画

使用 GSAP 在滚动上为 SVG 设置动画

Vue(Nuxt)中的音频加载事件

如何在 Vue 笑话测试中等待引导模式动画完成