Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アニメーションの実装つらい話

705 views

Published on

第2回 #megroes で飛び入り LT した時のスライドです。

Published in: Software
  • Be the first to comment

  • Be the first to like this

アニメーションの実装つらい話

  1. 1. アニメーションの実装 つらい話
  2. 2. @ktsn
  3. 3. Velocity.js $el.velocity({ width: 100, height: 200 }, { duration: 500, easing: easeOutQuad , complete: _ => { console.log( finished ); } });
  4. 4. ふるまいと順序を分離 const zoom = { p: { width: 100, height: 200 } o: { duration: 500, easing: easeOutQuad } }; $el.velocity(zoom).velocity(otherAnimation);
  5. 5. RunSequence 使う $.Velocity.RunSequence([ { e: elA, p: zoomIn.p, o: zoomIn.o }, { e: elB, p: zoomIn.p, o: zoomIn.o }, { e: elA, p: zoomOut.p, o: zoomOut.o } ]);
  6. 6. アニメーション以外の処理 いれたい…… $.Velocity.RunSequence([ { e: elA, p: zoomIn.p, o: zoomIn.o }, { e: elB, p: zoomIn.p, o: zoomIn.o }, { e: elA, p: zoomOut.p, o: $.extend({ complete: () => { console.log( hoge ); } }, zoomOut.o)} ]);
  7. 7. 場合によって微妙に 値変えたい…… const fadeIn = { p: { opacity: [1, 0] }, o: { delay: 300, duration: 500 } }
  8. 8. こうやりたい! $.Velocity.RunSequence([ { e: elA, opts: zoomIn }.delay(1000), { e: elB, opts: zoomIn }, _ => console.log( hoge ) ]);
  9. 9. つくった https://github.com/ktsn/vq
  10. 10. こんな感じで書ける vq.sequence([ vq(elA, zoomIn).delay(1000), vq(elB, zoomIn), _ => console.log( hoge ) ]);

×