文章目錄

• 【1】 tween
• • 【1.1】vars速查表
  • 【1.2】基于函數的動態動畫
  • 【1.3】stagger
  • 【1.4】Sequencing 序列化
  • 【1.5】keyframes 關鍵幀
• 【3】 timeline
• 【ease速查表】

【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日的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。