第 5 回プログラマのための数学勉強会

グラフィックエンジニア必見！

イージングの数学 岩淵勇樹 ( @butchi_y )

イージングとは

― Wikipediaより

もとい！

イージングとは

― Googleより

→ 緩急が付いている！

イージングの例

イージングなし

イージングあり

JavaScript (jQuery)

animateの引数にテキストで指定する“linear” “と swing”しかない

記述例 :$("div.ball").animate({ left: "300px";}, 3000, "swing");

jQuery Easing Plugin （ JavaScriptライブラリ）

animateの引数に指定できるバリエーションが 30種類以上に増える

記述例 :$("div.ball").animate({ left: "300px";}, 3000, "easeInCubic");

※<script src=”jquery.easing.js”>

が HTMLに必要

CSSアニメーション

animationと transition（ IE10〜）に指定可能（ CSS3）

適宜@keyframesプロパティと組み合わせて使う

記述例 :

div.sample { animation: anime1 5s ease -2s infinite alternate;}

@keyframes anime1 { 0% {width: 50px; height: 50px; background-color: aqua;} 100% {width: 200px; height: 50px; background-color: blue;}}

Flash

「クラシックトゥイーン」では ease-in/outの強度のみ指定可能

「（新しい）モーショントゥイーン」では「モーションエディタ」によりかなり柔軟なイージングが可能

イージングの数学

jQuery Easing Pluginの中身

easeInCubic: function (x, t, b, c, d) { return c*(t/=d)*t*t + b;},

easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b;},

3乗

正弦関数数学だ！

イージングの問題点

値は基本、 0で始まり 1 →で終わる 元に戻るアニメーションを作れない…（あくまで「緩急をつける」という役割と割り切るなら順当ですが ）

→数学関数作るのには知識も労力も要る エグいんです！

微調整が難しい

ライブラリ作ってみた

その名もbeasehttps://github.com/butchi/bease

オリジナルライブラリ beaseの特徴

イージング関数の元は数値の配列（棒グラフ的）

←さまざまな補間形式に対応（ ）

線形補間の場合、計算が高速（未検証）

原理的にはどんなイージング関数でも作れる

作ってみて

線形補間（一次式）するだけで意外となんとかなる

他の補間は使いものにならない（要改良）

jQueryとの連携が思ったよりすんなりいった

波形エディタの実装が難儀だった（でも Raphaelはすごい）

cubic-bezier

CSS3の標準的なイージング関数

3次のベジェ曲線

jQuery Easing Pluginのイージング関数をほとんど再現できるが、どうしても無理なものもある

記述例 : cubic-bezier(.17,.67,.83,.67)

Next Thing...

＿人人人人人人人＿ ＞ ベジェ曲線 ＜￣ Y^Y^Y^Y^Y^Y￣

の話も乞うご期待！！