第5回 プログラマのための数学勉強会 LT発表資料です。 （2015年11月21日）

1. 第5回 プログラマのための数学勉強会
グラフィックエンジニア必見！
イージングの数学
岩淵 勇樹 ( @butchi_y )

2. イージングとは
― Wikipediaより

3. イージングとは
―Googleより

4. → 緩急が付いている！
イージングの例
イージングなし
イージングあり

5. JavaScript (jQuery)
animateの引数にテキストで指定する
“linear”と“swing”しかない
記述例:
$("div.ball").animate({
left: "300px";
}, 3000, "swing");

6. jQuery Easing Plugin（JavaScriptライブラリ）
animateの引数に指定できるバリエーションが30種類以上に増える
記述例:
$("div.ball").animate({
left: "300px";
}, 3000, "easeInCubic");
※
<script src=”jquery.easing.js”>
がHTMLに必要

7. 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;}
}

8. Flash
「クラシックトゥイーン」ではease-in/outの強度のみ指定可能
「（新しい）モーショントゥイーン」では
「モーションエディタ」によりかなり柔軟なイージングが可能

9. イージングの数学
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乗
正弦関数
数学だ！

10. イージングの問題点
値は基本、0で始まり1で終わる →元に戻るアニメーションを作れない
（あくまで「緩急をつける」という役割と割り切るなら順当ですが…）
数学関数作るのには知識も労力も要る →エグいんです！
微調整が難しい

11. ライブラリ作ってみた
その名もbease
https://github.com/butchi/bease

12. オリジナルライブラリbeaseの特徴
イージング関数の元は数値の配列（棒グラフ的）
さまざまな補間形式に対応（←）
線形補間の場合、計算が高速（未検証）
原理的にはどんなイージング関数でも作れる

13. 作ってみて
線形補間（一次式）するだけで意外となんとかなる
他の補間は使いものにならない（要改良）
jQueryとの連携が思ったよりすんなりいった
波形エディタの実装が難儀だった（でもRaphaelはすごい）

15. cubic-bezier
CSS3の標準的なイージング関数
3次のベジェ曲線
jQuery Easing Pluginのイージング関数を
ほとんど再現できるが、どうしても無理なものもある
記述例: cubic-bezier(.17,.67,.83,.67)

16. Next Thing...
＿人人人人人人人＿
＞ ベジェ曲線 ＜
￣Y^Y^Y^Y^Y^Y￣
の話も乞うご期待！！