---
title: JavaScriptで“動く”Tween Animation -入門-
tags: 
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJ55Y4RXJ4.jpg?width=480
description: 2014/12/15の勉強会にて発表された資料です。  SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/
published: December 18, 14
canonical: https://convert.docswell.com/s/ydnjp/547YL5-2014-12-18-155950
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJ55Y4RXJ4.jpg)

JavaScript で“動く”
Tween Animation
-入門マーケティングソリューションカンパニー 開発本部
エクスペリエンスデザイン部 テクノロジーデザイン
上村 裕樹


# Page. 2

![Page Image](https://bcdn.docswell.com/page/9E2NGVDQ7R.jpg)

上村 裕樹
Hiroki Uemura
Web Designer / Frontend Engineer
at Yahoo! Japan since 2011 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 3

![Page Image](https://bcdn.docswell.com/page/D7YPV32Y7M.jpg)

今日のお題目
JavaScript で“動く”
Tween Animation
-入門Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VEN5MV8RJ8.jpg)

今日のお題目
基本編
•
•
トゥイーンアニメーションってなに？
イージングって何？
実践編
•
•
Webでの実践
• CSS Transition / Css Animationで実践してみる
• jQueryで実践してみる
• jQuery以外のライブラリを試してみる
Web Animations APIを試してみる
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y79YN6KZE3.jpg)

UI Animation
主にDOMアニメーションについて
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G786KZ2YJD.jpg)

動きのデザインの
重要性が増している
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L7L9ZD29ER.jpg)

動きのデザイン
Material Design
Polymer
https://www.polymer-project.org/platform/webanimations.html
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
http://www.google.com/design/spec/
animation/meaningful-transitions.html


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EMZVP8V7W.jpg)

動きのデザイン
例:
Hamburger Menu Animation
https://dribbble.com/shots/1696129-Menu-Transition?list=searches&amp;offset=29
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PER6215WJ9.jpg)

Tween Animation
トゥイーン・アニメーション
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 10

![Page Image](https://bcdn.docswell.com/page/P7XMDYKVJX.jpg)

Tween Animation
トゥイーン・アニメーション
A
移動
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
B


# Page. 11

![Page Image](https://bcdn.docswell.com/page/37KGX355ED.jpg)

Tween Animation
トゥイーン・アニメーション
とは
A
B
間の動きを補間する技術
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LJ3N5GK1J5.jpg)

Tween Animation
トゥイーン・アニメーション
とは
移動 / 拡大 / 変形 / 色
間の動きを補間する技術
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 13

![Page Image](https://bcdn.docswell.com/page/8JDWD13KEG.jpg)

トゥイーン・アニメーション
によって実現したい世界
わかりやすい
気持ちいい
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VEP9XQ4378.jpg)

EASING
イージング
気持ちいいアニメーションのための
重要キーワード
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 15

![Page Image](https://bcdn.docswell.com/page/27VML5XN7Q.jpg)

EASING
イージング
フレーム間の変化の加速／減速
アニメーションのリズムが調整できる
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 16

![Page Image](https://bcdn.docswell.com/page/5JGGX6V5JL.jpg)

イージング関数の代表例
linear
加速減速なし
ease-out
徐々に減速
ease-in
徐々に加速
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47QX846LJP.jpg)

イージング関数の代表例
http://www.robertpenner.com/easing/
http://easings.net/ja
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 18

![Page Image](https://bcdn.docswell.com/page/KE462Q45J1.jpg)

Web開発で
Tween Animation
実践してみる
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L71VMP42JG.jpg)

CSS Animation/Transition
+
JavaScript
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 20

![Page Image](https://bcdn.docswell.com/page/G7WL32X2J2.jpg)

CSS Transition
left:0;
left:500px;
CSS
div {
left : 0;
transition: .3s left ease-out;
}
!
div:hover {
left : 500px;
}
!
!
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JZMVD6473.jpg)

CSS Animation
left:0;
CSS
left:500px;
JavaScript ( jQuery )
div {
left : 0;
}
!
div.start {
animation: tween .3s ease-out;
}
!
@keyframes tween {
from {left : 0;} to {left: 500px;}
}
!
!
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
$(&quot;div&quot;).on(&quot;click&quot;, function(){
$(this).addClass(&quot;start&quot;);
});


# Page. 22

![Page Image](https://bcdn.docswell.com/page/YE6N512GEV.jpg)

CSS Transition
CSS Animation
transition-property
transition-duration
transition-timing-function
transition-delay
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
ある状態からある状態への変化
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
キーフレームを指定してタイムラインを
書くように細かなアニメーション制御が可能


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GE55Y42XE4.jpg)

CSS Transition / Animation 課題
IE9 以下が対応していない
IE8、IE9はブラウザシェアがかなり高い
複雑なアニメーションに弱い
・チェインの概念がない
・同期処理、制御がずれる
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 24

![Page Image](https://bcdn.docswell.com/page/972NGV4QJR.jpg)

jQuery.animate()
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 25

![Page Image](https://bcdn.docswell.com/page/DJYPV3MYJM.jpg)

jQuery.animate()
left:0;
left:500px;
jQuery
$(&quot;div&quot;).on(&quot;click&quot;, function(){
$(&quot;div&quot;).animate( {
left : 500
}, 300, &quot;ease-out&quot;);
});
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 26

![Page Image](https://bcdn.docswell.com/page/V7N5MVWRE8.jpg)

jQuery.animate() 課題
パフォーマンスに難あり
・レイアウトスラッシングを引き起こす
・リクエストアニメーションフレームを
使用していない ※
※ http://wilsonpage.co.uk/preventing-layout-thrashing/
※ http://0-9.sakura.ne.jp/pub/lt/modest/start.html
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 27

![Page Image](https://bcdn.docswell.com/page/YJ9YN6XZ73.jpg)

見えてきた課題
クロスブラウザ
複雑なアニメーション
パフォーマンス
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GJ86KZ9YED.jpg)

Tween Animation おすすめJSライブラリ
クロスブラウザ
複雑なアニメーション
パフォーマンス
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LJL9ZDW97R.jpg)

Tween Animation おすすめJSライブラリ
velocity.js
多機能
MIT
多機能・変形有り
一部有償
シンプル
MIT
http://julian.com/research/velocity/
TweenMax (GSAP)
http://greensock.com/tweenmax
tween.js
https://github.com/sole/tween.js/
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 30

![Page Image](https://bcdn.docswell.com/page/47MZVP9VJW.jpg)

Velocity.js
http://julian.com/research/velocity/
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 31

![Page Image](https://bcdn.docswell.com/page/P7R621GWE9.jpg)

Velocity.js
•
•
•
•
•
http://julian.com/research/velocity/
jQuery.animate()と互換性がある
単独でも使える
jQueryのパフォーマンスの難題点が
クリアされている
簡単に実装できる上、機能も豊富
おすすめ
$elem.velocity({
left: 500
}, {
duration: 300,
easing: &quot;ease-out&quot;
});
JavaScript
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 32

![Page Image](https://bcdn.docswell.com/page/PJXMDYXVEX.jpg)

TweenMax
http://greensock.com/gsap
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 33

![Page Image](https://bcdn.docswell.com/page/3JKGX3W57D.jpg)

TweenMax
•
•
•
•
http://greensock.com/gsap
ActionScriptで有名だった
トゥイーンライブラリが
JavaScriptに対応したもの
一部有償
CSS transformの値を、個別に設定す
る事が可能で、(例えばscaleと
rotate)アニメーションが組み合わせ
て表示される
demo
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
TweenMax.to(elem, 0.3, {
left:500,
ease:&quot;easeOut&quot;});
JavaScript


# Page. 34

![Page Image](https://bcdn.docswell.com/page/LE3N5G11E5.jpg)

tween.js
https://github.com/sole/tween.js
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 35

![Page Image](https://bcdn.docswell.com/page/8EDWD1XK7G.jpg)

tween.js
•
•
•
•
https://github.com/sole/tween.js
CreateJSのTweenJSではない
チェイン機能やイージング関数などの
基本的な内容は揃っている
実際のスタイル描画のところは、
自身で更新処理を記載する
条件分岐や組み合わせなどがしやすい
var tween = new TWEEN.Tween( { left: 0 } )
.to( { left: 500 }, 300 )
.easing( TWEEN.Easing.Elastic.InOut )
.onUpdate( function () {
elem.style.left = left + &quot;px&quot;;
} )
.start();
JavaScript
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 36

![Page Image](https://bcdn.docswell.com/page/V7P9XQP3J8.jpg)

スタイルのアップデートのパフォーマンス
スタイル設定時の描画コストについて、複数スタイ
ルの設定時、必ずしもcssTextがパフォーマンスが
優れているわけではない
for (var i=0; i&lt;100; i++) {
el = elems[i][0];
el.style.width = (i%10)+&quot;px&quot;;
el.style.height = (i%10)+&quot;px&quot;;
}
styleでひとつずつ設定する場合
for (var i=0; i&lt;100; i++) {
el = elems[i][0];
text = ‘width:’ +(i%10)+&#039;px;&#039;;
+ ‘height:&#039; +(i%10)+&#039;px;&#039;;
el.style.cssText = text;
}
cssTextで一括設定する場合
http://jsperf.com/style-vs-csstext-vs-setattribute/11
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2JVML52NJQ.jpg)

スタイルのアップデートのパフォーマンス
おすすめの書き方、styleでまとめて設定する
for (var i=0; i&lt;100; i++) {
el = elems[i][0];
text = &#039;width:&#039;
+(i%10)+&#039;px;&#039;;
+ &#039;height:&#039;
+(i%10)+&#039;px;&#039;;
el.style = text;
}
http://jsperf.com/style-vs-csstext-vs-setattribute/11
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 38

![Page Image](https://bcdn.docswell.com/page/5EGGX6R5EL.jpg)

Web Animations API
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 39

![Page Image](https://bcdn.docswell.com/page/4JQX84VLEP.jpg)

Web Animations API
•
•
•
•
•
•
•
•
元々Polymer用に作られていた
W3C Editors Draft
最新のChrome/Operaなどで使用可能
（polyfill用にweb-animations-jsを使用す
ればモダンなFirefoxなどでも使用可能）
https://github.com/web-animations/
web-animations-js
書き方はCSS Animationに似ている
SVGアニメーションも可能
その他機能豊富
PolyfillのサポートはIE10以上
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止
http://w3c.github.io/web-animations/
elem.animate([
{left: 0},
{left: 500}
], {
fill: &#039;forwards&#039;,
duration: 300,
easing : &quot;ease-out&quot;
});
JavaScript


# Page. 40

![Page Image](https://bcdn.docswell.com/page/K7462QM5E1.jpg)

トゥイーン・アニメーション極意
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 41

![Page Image](https://bcdn.docswell.com/page/LJ1VMP82EG.jpg)

トゥイーン・アニメーション極意
1. 要件に合わせてライブラリ/手法を選ぶ
2. 程よく、入れ込み過ぎ無い
3. リズムや流れ、タイミングを意識する
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GJWL32Z2E2.jpg)

ご清聴ありがとう
ございました


