JavaScriptでKeyframeAnimationを作ってみた

帰ってきたYokohama.js(#yjs20140419)でLTしたスライドです

Transcript

1. 帰ってきたYokohama.js (#yjs20140419) JavaScript で KeyframeAnimation を 作ってみた
2. 自己紹介 宇野 陽太( ) @cancer6 株式会社モバイルファクトリー というところで フロントエンドエンジニアやってます 最近はBackbone / Marionette / AngularJS あたりを触ったり CSS 書いたりなど
3. CSS Animation
4. CSS Animation CSS にkeyframe 書いて... アニメー ション用のclass を作ってプロパティ書いて... JS からclass の操作して... ...
5. めんどくさい
6. どうせJS 使うなら全部JS で やってしまおう
7. css-animations.js https://github.com/jlongster/css-animations.js DOM からCSS にアクセスして色々 やってくれる CSS ファイルで定義したkeyframe を取ってきたり JavaScript から動的にkeyframe を生成したり オブジェクトでkeyframe のプロパティを渡してあげる var anim1 = CSSAnimations.get("anim1"); var anim2 = CSSAnimations.create("anim2", { "0%": { "background-color": "red" }, "100%": { "background-color": "blue" }
8. css-animations.js ベンダー プレフィックスが必要なプロパティの記述が冗長 transform 系のプロパティも冗長になりがち アニメー ションのプロパティ(animation-name/animation- duration など) は別途DOM の操作が必要 var anim = CSSAnimations.create("anim", { "0%": { opacity: "0.5", border-radius: "0" "-webkit-border-radius": "0" transform: "translate(0, 0) rotate(90deg) scale(1)" "-webkit-transform": "translate(0, 0) rotate(90deg) scale(1)" }, "100%": { opacity: "1", border-radius: "5px" "-webkit-border-radius": "5px" transform: "translate(100px, 50px) rotate(180deg) scale(2)" "-webkit-transform": "translate(100px, 50px) rotate(180deg) scale(2)" } $("#animation").css({ "animation-name": "anim", "animation-duration": "5s" "animation-timing-function": "linear" "animation-delay": "1s" "animation-fill-mode": "both"
9. まだめんどくさい
10. keyframe-animations.js ｶｯｺｶﾘ https://github.com/cancer/keyframe-animations.js ( さっき) つくりました No more ベンダー プレフィックス transform 系も見やすく アニメー ションのプロパティも一緒に設定できます var animation = keyframeAnimation.setup({ name: "anim", keyframe: { "0%": { opacity: "0.5", borderRadius: "0", translate: "0 0", rotate: "90deg", scale: "1" }, "100%": { opacity: "1", borderRadius: "5px", translate: "100px 50px", rotate: "180deg", scale: "2" } }, animation: { duration: "5s",
11. keyframe-animations.js ｶｯｺｶﾘ アニメー ションの実行/ 停止もかんたん animationEnd で何かしたいとかもできます // アニメーション実行 animation.animate($("#animation")); // アニメーション停止 animation.freeze(); // animationEndで何か実行したい animation.animate($("#animation"), function($element){ // アニメーションが終わったら要素を非表示にする $element.hide() });
12. keyframe-animations.js ｶｯｺｶﾘ アニメー ションのライブラリを作ったりすると捗るはず var animationLibrary = new AnimationLibrary(); animationLibrary.setupModalAnimation(); こんな感じで
13. ご清聴ありがとうございました