在Vue中使用GSAP完成动画(二)动画初始设置

html-css019

在Vue中使用GSAP完成动画(二)动画初始设置,第1张

设置动画延迟时间

过渡效果的速度曲线,概念有点类似于 animation-timing-function

Tips: TweenLite中包含了基本缓动:Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong,他们每个都含有.easeIn、.easeOut、.easeInOut参数(对于线性动画,请使用Power0.easeNone)。

而TweenMax在此基础上还另外增加了特殊缓动:Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。

如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js

如果设置为true,动画将在创建时立即暂停。默认false

是否立即渲染,默认为false

一般来说,TweenMax的运动对象会在下一个渲染周期前(也就是下一帧)被渲染到场景中,除非你设置了delay。如果想强制立即渲染,可以把这个参数设为true。

另外from()方法的运动对象是立即渲染的(默认true),如果你不想该运动对象被渲染,可以把这个参数设为false。

可以看到同样是3秒后从右边500px回到初始状态,绿色方块早已经在动画的 from 位置做好了等待,而橙色方块因为设置了不立即渲染,选择延迟结束以后就位!

用来控制同一个对象上有多个动画时的覆盖之类的情况

可以看到,一开始先执行 x:200 , y:300 不被覆盖,3秒以后, overwrite 效果结束,覆盖失效,最后完成第一个动画剩下的3秒

最后两个属性这边先不做分析

当设置为true时,对这个TweenMax对象的时间计算方式基于帧而不是秒,一般帧速约为16.66ms(60帧/秒)

此处省略

动画在第一次完成后应重复的次数。例如,如果repeat为1,则动画将总共播放两次(初始播放加1次重复)。要无限期重复,请使用-1。repeat应该始终是一个整数。

每次重复之间的秒数(或帧)。例如,如果repeat是2并且repeatDelay是1,则动画将首先播放,然后在重复之前等待1秒,然后再次播放,然后再等待1秒再进行最后的重复

首次立即执行,第二次重复的动画,按照 repeatDelay 设定的值等待1秒以后,再次执行

如果设置yoyo为true,那么重复的动画将往返进行。默认为false

例如当你设置了repeat:2,如果没设置yoyo,那么动画是这样的123-123-123

如果设置了yoyo,动画则是123-321-123

控制动画返回的速度曲线,如果设置为 true ,回转速度曲线与 ease 的参数相同

设置动画属性开始时的值

设置动画从 x:200 开始,再到后面的 x:500

在stagger(错开)动画中设定属性组

虽然stagger限定了动画目标使用相同的属性(如 x:100, rotation:90 ),但你可以使用 cycle 来设定一个属性组(如 cycle:{x:[100,-100], rotation:[30,60,90]} ),还可使用function关键词(如 {x:function() { return Math.random() * 200}} )

GSAP(GreenSock Animation Platform)是一个专业的动画库,可以用它完成你想要的各种效果

**从当前状态过渡到指定状态 vars **

从指定状态 vars 过渡到初始状态

**从指定状态 vars1 过渡到结束以后的状态 vars2 **

从当前状态过渡到指定状态 vars ,与 to() 不同的是它可以完成多个目标对象的过渡,并且多了四个全新的参数

同时还有两个类似的方法为 staggerFrom() , staggerFromTo() 同理,后面不再赘述

tips:HTML中写了多个 <div class="box" ref="box"></div>

设置 delay 秒以后触发一个回调函数,有点setTimeout的感觉

立即设置目标的属性值而不产生过渡动画,相当于0的动画时间

本文大致罗列了在 vue 中如何使用 GSAP ,以及它的动画结构,个人理解就是用的最多的基础调用方式,接下来作者还将继续学习后面的内容

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

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

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

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

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

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

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

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

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

下面两种方式等同

每个动画实例的每个回调类型只能有一个(一个onComplete, 一个onUpdate, 一个onStart, 等等),新建则会覆盖掉之前的。

可以通过设置null来删除掉回调函数

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