TweenJS for Everything

Transcript

None

w Ξχϝʔγϣϯ BOJNBUJPO w τΡΠʔϯ UXFFO w Πʔδϯά FBTJOH

5XFFO+4XJUI&BTFM+4 EFNP

6TBHF 5XFFOΠϯελϯεΛऔಘ HFUB5XFFOJOTUBODF τΡΠʔϯɺσΟϨΠɺίʔϧόοΫΛ௥Ճ UIFO BEEUXFFO EFMBZPSDBMMCBDLBTOFFEFE

HFUB5XFFOJOTUBODF 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!' ); } ); this behaves as "new createjs.Tween()"

HFUB5XFFOJOTUBODF 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!' ); } ); EaselJS DisplayObject

DIBJO DIBJO BOEDIBJO 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!' ); } ); adding tween

DIBJO DIBJO BOEDIBJO 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!' ); } ); target value for this tween

DIBJO DIBJO BOEDIBJO 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!' ); } ); duration

DIBJO DIBJO BOEDIBJO 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!' ); } ); easing

DIBJO DIBJO BOEDIBJO 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!' ); } ); 2000ms delay

DIBJO DIBJO BOEDIBJO 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!' ); } ); multiple values

DIBJO DIBJO BOEDIBJO 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!' ); } ); callback

DPODMVTJPO 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!' ); } );

DPODMVTJPO 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!' ); } );

)PXEPTFJUXPSL

)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

5XFFO+4͸ ΦϒδΣΫτͷ஋Λมߋ͍ͯ͠Δ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGUIFPCKFDU

5XFFO+4DBOCFVTFE XJUIPUIFSMJCT

5XFFO+4XJUI1BQFSKT EFNP

5XFFO+4XJUIUISFFKT EFNP

5XFFO+4XJUI47(%0. EFNP

5XFFO+4DBOHFUBMPOH XJUIPUIFST

MFBSO"1*T IUUQXXXDSFBUFKTDPN%PDT 5XFFO+4NPEVMFT5XFFO+4IUNM

DPODMVTJPO

DPODMVTJPO w 5XFFO+4͸ΦϒδΣΫτͷ஋Λม͍͑ͯΔ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGBOPCKFDU w ͍Ζ͍ΖͳදࣔܥϥΠϒϥϦʔͱ૊Έ߹ΘͤՄೳ 5XFFO+4DBOCFVTFEJODPNCJOBUJPOXJUITFWFSBMMJCT w ͨͩ͠ɺ5XFFO+4͸&BTFM+4ʹґଘ͍ͯ͠Δ 5XFFO+4JTEFQFOEFOUPO&BTFM+4

5XFFO+4ͷػೳ͚ͩΛར༻ͨͯ͘͠΋&BTFM+4ΛಡΈ͜·ͳͯ͘͸͍͚ͳ͍

JOBEEJUJPO

UXFFOKT IUUQTHJUIVCDPNTPMFUXFFOKT

UXFFOKT 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();

UXFFOKT EFNP

K2VFSZDBOBMTPEPUIBUTJNJMBS 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' ); } );

TweenJS for Everything

TweenJS for Everything

More Decks by yomotsu

Other Decks in Programming

Featured

Transcript