Transitionの意味

【AS3入門】Tweenerのtransitionプロパティで使用する名称の意味独学ActionScriptでQuadって4じゃないの?なんで2なの?って書いてあって、同じこと思ったことがあったので補足。

TweenerやTweensyのコア部分は「時間から値を求める関数」を使って、プロパティの値を変化させている。
Tweenerはcaurina.transitions.Equationsクラスに関数が書いてある。Tweensyはfl.motion.easingパッケージ内のクラス群に関数が書いてある。

関数内の計算式は基本的に同じことをやっていて、引数も同じ。引数は t:Number, b:Number, c:Number, d:Number となっていて、その内訳は

  • t:Number – アニメーションが始まってからの時間(勝手にtimeの略だと思い込む)
  • b:Number – アニメーションするプロパティの初期値(勝手にbeginの略だと思い込む)
  • c:Number – アニメーションする量(勝手にchangeの略だと思い込む)
  • d:Number – アニメーションする合計時間(勝手にdurationの略だと思い込む)
となっている。

TweenerやTweensyのtransitionプロパティの意味とその計算式
略称意味クラスeaseIn関数の計算式
Linear1次fl.motion.easing.Linearc * t / d + b
Quad2次fl.motion.easing.Quadraticc * (t /= d) * t + b
Cubic3次fl.motion.easing.Cubicc * (t /= d) * t * t + b
Quart4次fl.motion.easing.Quarticc * (t /= d) * t * t * t + b
Quint5次fl.motion.easing.Quinticc * (t /= d) * t * t * t * t + b
Expo指数fl.motion.easing.Exponentialt == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
Sine正弦fl.motion.easing.Sine-c * Math.cos(t / d * (Math.PI / 2)) + c + b
Circ円形fl.motion.easing.Circular-c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
Back逆行fl.motion.easing.Backc * (t /= d) * t * ((s + 1) * t - s) + b
(指定がなければ s = 1.70158)
Bounce跳返fl.motion.easing.Bounce分岐があるので省略
Elasticバネfl.motion.easing.Elastic分岐があるので省略
数学的な意味で順序付けしている(少なくとも1次~5次は)

てことで、QuadはQuadraticの略称で、Quadではないと。


About this entry