GSAPでタイムラインアニメーションの途中で関数を実行したい場合。
どんぴしゃなメソッドが.call()です。引数を渡したり実行するタイミングを.from()や.to()とかと同じように指定出来ます。
もくじ
Timeline.call()
Timeline.call()
.call( callback: Function, params: Array, position: * ) : self
https://greensock.com/docs/v3/GSAP/Timeline/call()
パラメータ
- callback: Function
-
実行したい関数
- params: Array
-
規定値: null
引数
- position: *
-
規定値: “+=0”
実行するタイミングを指定。
“<+=1″や”myLabel+=30%”など、GSAPのポジションパラメータ
.call()の記述例
.targetAを45度回転、.targetBをフェードイン、.targetBがフェードイン開始して0.5秒後に関数を実行
const tl = gsap.timeline();
tl
.from(
'.targetA',
{
rotation: -45
}
)
.from(
'.targetB',
{
autoAlpha: 0
}
)
.call(funcName, ['hoge', true], '<+=.5');
空のトゥイーンを使う方法
空のトゥイーンのonCompleteに指定する方法もあります。(空のオブジェクト{}を指定するのがミソ)
call知るまでこの方法でやっていました。
ただ、call()の方が引数も指定出来るので特別な理由が無い限りはcall()で良さそうです。
tl.to({}, {
duration: 2,
onComplete: funcName
}, '<');