TweenJS for Everything
Upcoming SlideShare
Loading in...5
×
 

TweenJS for Everything

on

  • 962 views

 

Statistics

Views

Total Views
962
Slideshare-icon Views on SlideShare
903
Embed Views
59

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 59

http://createjs.jp 45
https://twitter.com 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    TweenJS for Everything TweenJS for Everything Presentation Transcript

    • TweenJS for Everything 2013/03/15 yomotsu@PixelGrid, Inc.Friday, March 15, 13
    • Who? 小山田 晃浩 FrontEnd Engineer at PixelGrid Twitter@yomotsuFriday, March 15, 13
    • TweenJS?Friday, March 15, 13
    • Friday, March 15, 13
    • Friday, March 15, 13
    • • アニメーション animation • トゥイーン tween • イージング easingFriday, March 15, 13
    • TweenJS with EaselJS demoFriday, March 15, 13
    • Usage 1. Tween インスタンスを取得 get a Tween instance 2. トゥイーン、ディレイ、コールバックを追加 then, add tween, delay or callback as neededFriday, March 15, 13
    • 1. get a Tween instance createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( behaves as "new createjs.Tween()" this 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 1. get a Tween instance createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) EaselJS DisplayObject .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: tweeny: 300 }, 1000, createjs.Ease.quadOut ) adding 100, .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: target y: 300 }, 1000, createjs.Ease.quadOut ) 100, value for this tween .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) duration .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) easing .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 delay 2000ms ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) multiple values .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) callback .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • conclusion createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • conclusion createjs.Tween.get( nyan, { loop : true } ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( done! ); } );Friday, March 15, 13
    • How dose it work?Friday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • How dose it work? 1. Tween のインスタンスを作ると... When you created an instance of Tween... 2. TweenJS が登録されたオブジェクトの値を変更 TweenJS will change value of applied object 3. EaselJS がオブジェクトを表示 then, EaselJS will render the object using changed valueFriday, March 15, 13
    • TweenJS は オブジェクトの値を変更しているだけ TweenJS is just changing value of the objectFriday, March 15, 13
    • TweenJS can be used with other libsFriday, March 15, 13
    • TweenJS with Paper.js demoFriday, March 15, 13
    • TweenJS with three.js demoFriday, March 15, 13
    • TweenJS with SVG DOM demoFriday, March 15, 13
    • TweenJS can get along with others!Friday, March 15, 13
    • learn APIs http://www.createjs.com/Docs/ TweenJS/modules/TweenJS.htmlFriday, March 15, 13
    • conclusionFriday, March 15, 13
    • conclusion • TweenJS はオブジェクトの値を変えているだけ TweenJS is just changing value of an object • いろいろな表示系ライブラリーと組み合わせ可能 TweenJS can be used in combination with several libs • ただし、TweenJS は EaselJS に依存している TweenJS is dependent on EaselJS TweenJSの機能だけを利用したくても EaselJS を読みこまなくてはいけないFriday, March 15, 13
    • in addition...Friday, March 15, 13
    • tween.js https://github.com/sole/tween.js/Friday, March 15, 13
    • tween.js var obj = { x : 100, y : 100 } var t1 = new TWEEN.Tween( obj ) .to( { x: 300 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ); var t2 = new TWEEN.Tween( obj ) .to( { x: 100, y : 300 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 ); var t3 = new TWEEN.Tween( obj ) .to( { x: 100, y : 100 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 ) .onComplete( function () { console.log( done! );} ); t1.chain( t2 ); t2.chain( t3 ); t1.start();Friday, March 15, 13
    • tween.js demoFriday, March 15, 13
    • jQuery can also do that similar var obj = { x : 100, y : 100 }; $.when( $( obj ).animate( { x : 300 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( $( obj ).animate( { x : 100, y : 300 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( $( obj ).animate( { x : 100, y : 100 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( function () { console.log( done ); } );Friday, March 15, 13
    • jQuery can also do that similar demoFriday, March 15, 13
    • conclusionFriday, March 15, 13
    • 難度 機能 依存 easily features depending on TweenJS 簡単! 充実! EaselJSに依存 充実! tween.js すこし複雑 なし! (特にevent) 必要に応じて jQuery jQuery 簡単! それなり Easing PluginFriday, March 15, 13
    • Friday, March 15, 13
    • 購読開始から30日間無料 (月額840円)Friday, March 15, 13
    • CodeGrid www.codegrid.netFriday, March 15, 13
    • Question? @yomotsuFriday, March 15, 13