tween（トゥイーン）とは、between（ビトゥイーン：２つのものの間に）から由来する言葉で、２つのイラストが変化しながら繋がるアニメーションのことをいうそうです。
今日はこのトゥイーン特有のプロパティのデフォルト値を変更する方法について説明していきます。
gsap.defaults()
トゥイーン特有のプロパティのデフォルト値を変更するためには、「gsap.defaults()」メソッドを使います。
例えば、私が以前作成したこちらのアニメーション。
See the Pen ssmple_fromTo-2 by Michi (@Michi_) on CodePen.
java scriptを見ていだだくとわかると思うのですが、動きをゆっくりにするため、それぞれの対象に「duration: 3,」を記述しています。
これは、durationのデフォルト値が「0.5」で、そのままではあっという間にアニメーションが終了してしまってわかりにくいため、もっとゆっくりとした動きにしたかったからです。
ただ、当然のことながら「duration: 3,」を設定しなければ、デフォルト値のままになってしまうので、それぞれのオブジェクトにもれなく記述しなければいけませんでした。
正直、面倒くさかったです。
このように、アニメーション全体のデフォルトを変えたい、という場合に「gsap.defaults()」を使用するととても便利です。
例えば、先ほどのjsでは、このように記述することができます。
gsap.defaults({duration: 3});
gsap.fromTo(".sample01", {x: 100, y: -100},{x: -100, y: 0});
gsap.fromTo(".sample02", {x: -150, y: -150},{x: 150, y: 150});
gsap.fromTo(".sample03", {x: -100, y: 100},{x: 100, y: -150});なんて便利！
アニメーションの対象が増えれば増えるほど真価を発揮しますね！
もちろん、デフォルト値を変更しただけなので、
gsap.fromTo(".sample01", {x: 100, y: -100},{x: -100, y: 0, duration: 1});などと、上書きすることも可能です。
gsap.config()との違い
さて、先日数値の単位のデフォルト値を変更するときには、gsap.config()を使用すると説明したことがありました。
gsap.config()もデフォルトを変更することができるメソッドですが、両者にははっきりとした違いがあります。
gsap.defaultsは冒頭でもお伝えした通り、トゥイーン特有のプロパティのデフォルトを変更する場合に使いますが、gsap.config()は、それ以外の一般的な構成要素（例えば数値の単位など）のデフォルトを変更するときに使います。
まとめ
今日はトゥイーン特有のデフォルト値を変更する方法について説明しました。
いくつもいくつも同じ記述をしなくてすむのは、本当に嬉しいです。
ある程度動きが揃っている時などに使えそうです。ありがたい！
コメント