【1】 tween

gsap有三个常用的方法来创建一个Tweens对象，Tweens之间是并发的，如无特殊约束则同时触发：

gsap.to(targets, vars={})，to表示从一个HTML元素应有的的默认状态到目标状态。
gsap.from(targets, vars={})，from表示从目标状态到一个HTML元素应有的的默认状态。
gsap.fromTo(targets, vars={})，我也没用过。

第一个参数是一个选择器，等价于querySelector(targets)，这意味着你选择的可能是一个HTML元素，也有可能是一组。

【1.1】vars速查表

属性	描述
callbackScope	The scope to be used for all of the callbacks (onStart, onUpdate, onComplete, etc.).
data	Assign arbitrary data to this property (a string, a reference to an object, whatever) and it gets attached to the tween instance itself so that you can reference it later like yourTween.data.
delay	Amount of delay before the animation should begin (in seconds).
duration	The duration of the animation (in seconds). Default: 0.5.
ease	Controls the rate of change during the animation, giving it a specific feel. For example, “elastic” or “strong.inOut”. See the Ease Visualizer for a list of all of the options. ease can be a String (most common) or a function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value. Default: “power1.out”.
id	Allows you to (optionally) assign a unique identifier to your tween instance so that you can find it later with gsap.getById() and it will show up in GSDevTools with that id.
immediateRender	Normally a tween waits to render for the first time until the very next tick (update cycle) unless you specify a delay. Set immediateRender: true to force it to render immediately upon instantiation. Default: false for to() tweens, true for from() and fromTo() tweens.
inherit	Normally tweens inherit from their parent timeline’s defaults object (if one is defined), but you can disable this on a per-tween basis by setting inherit: false.
lazy	When a tween renders for the very first time and reads its starting values, GSAP will try to delay writing of values until the very end of the current “tick” which can improve performance because it avoids the read/write/read/write layout thrashing that browsers dislike. To disable lazy rendering for a particular tween, set lazy: false. In most cases, there’s no need to set lazy. To learn more, watch this video. Default: true (except for zero-duration tweens).
onComplete	A function to call when the animation has completed.
onCompleteParams	An Array of parameters to pass the onComplete function. For example, gsap.to(".class", {x:100, onComplete:myFunction, onCompleteParams:[“param1”, “param2”]});.
onInterrupt	A function to call when the animation is interrupted, meaning if/when the tween is killed before it completes. This could happen because its kill() method is called or due to overwriting.
onInterruptParams	An Array of parameters to pass the onInterrupt function. For example, gsap.to(".class", {x:100, onInterrupt:myFunction, onInterruptParams:[“param1”, “param2”]});.
onRepeat	A function to call each time the animation enters a new iteration cycle (repeats). Obviously this only occurs if you set a non-zero repeat.
onRepeatParams	An Array of parameters to pass the onRepeat function.
onReverseComplete	A function to call when the animation has reached its beginning again from the reverse direction (excluding repeats).
onReverseCompleteParams	An Array of parameters to pass the onReverseComplete function.
onStart	A function to call when the animation begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).
onStartParams	An Array of parameters to pass the onStart function.
onUpdate	A function to call every time the animation updates (on each “tick” that moves its playhead).
onUpdateParams	An Array of parameters to pass the onUpdate function.
overwrite	If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If “auto”, when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.
paused	If true, the animation will pause itself immediately upon creation. Default: false.
repeat	How many times the animation should repeat. So repeat: 1 would play a total of two iterations. Default: 0.
repeatDelay	Amount of time to wait between repeats (in seconds). Default: 0.
repeatRefresh	Setting repeatRefresh: true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each full iteration (not including yoyo’s). This is useful when you use dynamic values (relative, random, or function-based). For example, x: “random(-100, 100)” would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.
reversed	If true, the animation will start out with its playhead reversed, meaning it will be oriented to move toward its start. Since the playhead begins at a time of 0 anyway, a reversed tween will appear paused initially because its playhead cannot move backward past the start.
runBackwards	If true, the animation will invert its starting and ending values (this is what a from() tween does internally), though the ease doesn’t get flipped. In other words, you can make a to() tween into a from() by setting runBackwards: true.
stagger	If multiple targets are defined, you can easily stagger the start times for each by setting a value like stagger: 0.1 (for 0.1 seconds between each start time). Or you can get much more advanced staggers by using a stagger object. For more information, see the stagger documentation.
startAt	Defines starting values for any properties (even if they’re not animating). For example, startAt: {x: -100, opacity: 0}
yoyo	If true, every other repeat iteration will run in the opposite direction so that the tween appears to go back and forth. This has no affect on the reversed property though. So if repeat is 2 and yoyo is false, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end. Default: false.
yoyoEase	Allows you to alter the ease in the tween’s yoyo phase. Set it to a specific ease like “power2.in” or set it to true to simply invert the tween’s normal ease. Note: GSAP is smart enough to automatically set yoyo: true if you define any yoyoEase, so there’s less code for you to write. Default: false.
keyframes	To animate the targets to various states, use keyframes - an array of vars objects that serve as to() tweens. For example, keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]. All keyframes will be perfectly sequenced back-to-back, but you can define a delay value to add spacing between each step (or a negative delay would create an overlap).

【1.2】基于函数的动态动画

通过对任意的属性使用函数来获得不可思议的动态动画，我们之前提到，创建tween时使用的css选择器有可能选择多个HTML元素，因此，如果我们想为每一个HTML元素应用不同的、有规律变化的动画就可以使用基于函数的动态动画。

gsap.to(".class", {x: 100, // 静态值y: function(index, target, targets) { //function-based valueindex从0到targets.length - 1每一个target都是当前处理的HTML元素return index * 50; },duration: 1
});

【1.3】stagger

这也是一个很常用的属性，如果你给一组HTML元素应用动画时，希望他们之间有一个延迟，可以用stagger属性。

【1.4】Sequencing 序列化

序列化是指，让某些动画按顺序依次执行，除了使用delay以外，我们十分推荐你使用后面会讲到的timeline。

【1.5】keyframes 关键帧

如果你打算让同一个HTML对象依次执行多个动画的话，使用关键帧是一个不错的选择。

gsap.to(".class", {keyframes: [{x: 100, duration: 1},{y: 200, duration: 1, delay: 0.5}, //create a 0.5 second gap{rotation: 360, duration: 2} //overlap by 0.25 seconds
], ease: "none"});

上面的代码会让.class先执行右平移，延迟0.5s后执行下平移，最后执行旋转360度，注意，当上一个动作执行完后才会执行下一个，当然你也可以用timeline实现。

【3】 timeline

timeline是tweens的容器，它可以按照添加顺序依次执行每一个tweens，这样我们就可以不用考虑执行顺序，交给timeline来处理。

let tl = gsap.timeline(); //create the timeline
tl.to(".class1", {x: 100}) //start sequencing.to(".class2", {y: 100, ease: "elastic"}).to(".class3", {rotation: 180});

【ease速查表】

对于下表的所有动画函数的名称name都有扩展的，name.in，和name.inout。

名称	描述
none	线性
power1	形如log函数
power2	形如更凸的log函数
power3	形如更更凸的log函数
power4	形如更更更凸的log函数
back	有一个超出目标位置再回来的动作
elastic	在目标位置左右摇摆后停下
bounce	弹跳
rough	乱摇
slow	形如中心对称的sigmoid函数
steps	阶梯式
circ	形如第二象限的圆弧
expo	夸张版的circ
sine	收敛版的power1
Custom	自定义

GreenSock GSAP 3.0 最新版所有内容创建于2020年4月4日相关推荐

微信视频号(短内容)上线内测2020年1月21日晚上线开放入口在哪里？
微信视频号(短内容)上线内测2020年1月21日晚上线开放入口在哪里? 微信视频号(短内容)是什么? 微信视频号是一个人人可以创作和记录短内容的平台,视频号也是一个了解他人,了解世界的窗口. 微信视频 ...
王者荣耀服务器维护2020421,王者荣耀4月21日更新内容王者荣耀2020年4月21日不停机更新公告...
王者荣耀4月21日更新了什么?王者荣耀在2020年4月21日对全服进行不停机更新,本次更新后会为玩家们带来五五开黑节抢先福利和王昭君-偶像歌手星元上新,想知道具体更新内容的玩家,下面小编为大家带来了王 ...
2020年阴阳师服务器维护,2020阴阳师2月19日更新官方公告及内容汇总
小编今天给各位玩家朋友们带来的是2020阴阳师2月19日更新官方公告及内容汇总,阴阳师今天进行了版本更新,大家期待已久的超鬼王活动也是正式上线了,那么还有哪些精彩的活动?哪些新的内容呢?相信不少的玩家 ...
关于2020年8月7日—8月29日实习学习到的内容
关于2020年8月7日-8月29日实习学习到的内容我是一名大三(准大四)的学生,本专业学习通信工程,从三月份自学前端至今,七月份找到了一份实习,感觉在实习中学习到的内容会比较深入一点叭.关于这篇文章 ...
王者服务器维修2019年四月份,王者荣耀4月25日更新内容王者荣耀2019年4月25日全服不停机更新公告...
王者荣耀在2019年4月25日早上8点半对全服进行不停机更新,本次更新后会上线王者快跑活动玩法,还有2019年的55开黑节的第一波活动,下面小编为大家带来了王者荣耀2019年4月25日全服不停机更新公 ...
神武服务器维护时间表,《神武4》2020年2月14日维护更新内容一览
亲爱的玩家: 感谢您对<神武4>的支持与热爱,我们于2月14日对游戏内容进行了更新维护. 本周重点更新内容: 1.新增的鸿雁传书活动: 2.生存大挑战规则调整: 3.提高了双技能护符的概率 ...
手游神武2最新服务器,《神武4》手游2020年2月7日更新内容一览
亲爱的玩家: 为了提供更优质的游戏体验,<神武4>手游所有服务器将于2020年2月7日上午8点至10点进行停机维护.如果在预定时间内无法完成维护内容,开机时间也将顺延.请各位玩家相互转告. ...
王者荣耀5月一日服务器维护,王者荣耀5月25日更新内容王者荣耀2021年5月25日全服不停机更新公告...
王者荣耀5月25日更新了什么?王者荣耀在2021年5月25日进行全服不停机更新,本次更新上线浪漫初夏第三期活动,还有[专属梦境]英雄修炼限时开启,以及礼包上架.商城更新.英雄调整等众多内容.以下是小编 ...
绝地求生服务器维护5.27,绝地求生1月27日更新内容绝地求生2021年1月27日正式服维护公告...
绝地求生1月27日更新了什么?绝地求生在2021年1月27日对正式服进行维护,本次维护会优化服务器以及修复BUG,想知道修复了哪些bug的玩家,下面小编带来了绝地求生2021年1月27日正式服维护公告 ...
cli3解决 ie11语法错误 vue_【VUE3.0】它来了，2020年09月18日，Vue.js 3.0 正式发布，但是........
您曾见过凌晨的苹果发布会,那前端界的发布会你见过吗? 在Vue3正式发布前,Vue的作者尤雨溪发表主题演讲. 注意! 注意! 注意! 发布会中表示不建议大家立刻升级到Vue3.0版本,之前项目中某些依 ...

GreenSock GSAP 3.0 最新版所有内容创建于2020年4月4日

文章目录

【1】 tween

【1.1】vars速查表

【1.2】基于函数的动态动画

【1.3】stagger

【1.4】Sequencing 序列化

【1.5】keyframes 关键帧

【3】 timeline

【ease速查表】

GreenSock GSAP 3.0 最新版所有内容创建于2020年4月4日相关推荐

最新文章

热门文章

GreenSock GSAP 3.0 最新版 所有内容创建于2020年4月4日

文章目录

【1】 tween

【1.1】vars速查表

【1.2】基于函数的动态动画

【1.3】stagger

【1.4】Sequencing 序列化

【1.5】keyframes 关键帧

【3】 timeline

【ease速查表】

GreenSock GSAP 3.0 最新版 所有内容创建于2020年4月4日相关推荐

最新文章

热门文章

GreenSock GSAP 3.0 最新版所有内容创建于2020年4月4日

GreenSock GSAP 3.0 最新版所有内容创建于2020年4月4日相关推荐