TweenJSをあつかうにあたって、tweenのことが良くわかってなかったので調べた。
イージングでquadとか、cubicとか出てくるけどどういう事を示しているのか知らなかった。
イージングでquadとか、cubicとか出てくるけどどういう事を示しているのか知らなかった。
tweenとは、アニメーションの際に始まりと終わりを指定するとその間をうまいこと補間してくれる機能。
イージングで、どのように補間するか定める。イージングで、in, out の指定があるが、それは、始点でどのように動くか、終点でどのように動くか指定するもの。
Robert Pennerさんによるイージングが広く用いられている。
こちらに、Robert Pennerさんのイージングに関係する情報がいろいろとのっている。(図や、スライド、文章・・・）
Robert Penner’s Easing Functions
このなかに書籍”Robert Penner’s Programming MacroMedia Flash MX”の中のtweenに関する章がpdfで掲載されている。
http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
順を追って、丁寧に平易にPenner’s Easingがどのように作り出されていったか述べてある。
t : time （現在時刻）
d : duration （始まりから終わりまでにかかる時間）
b : begin （始まりの量）
c : change （変化量）
イージングで、どのように補間するか定める。イージングで、in, out の指定があるが、それは、始点でどのように動くか、終点でどのように動くか指定するもの。
Robert Pennerさんによるイージングが広く用いられている。
こちらに、Robert Pennerさんのイージングに関係する情報がいろいろとのっている。(図や、スライド、文章・・・）
Robert Penner’s Easing Functions
このなかに書籍”Robert Penner’s Programming MacroMedia Flash MX”の中のtweenに関する章がpdfで掲載されている。
http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
順を追って、丁寧に平易にPenner’s Easingがどのように作り出されていったか述べてある。
t : time （現在時刻）
d : duration （始まりから終わりまでにかかる時間）
b : begin （始まりの量）
c : change （変化量）
イージングで用いられている用語とその変化の度合い
（t は、始点時0、終点時1となるように調整。(t = t / duration) ）
quad : quadratic（二次） f(t) = t * t
cubic : cubic （三次） f(t) = t * t * t
quart : quartic （四次） f(t) = t * t * t * t
quad といえば、4を意味するのでは？と思った。この章で、作者も触れている。
quadraticは、正方形の、2次の、という意味。ラテン語の正方形 quadratum から来ている。quadratumが「４辺」という意味合いの言葉だった。
イージング Linear, quadratic In , cubic In , quartic In が どのようになるのか描いてみた。