Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptでKeyframeAnimationを作ってみた
Search
cancer
April 19, 2014
Technology
1
77
JavaScriptでKeyframeAnimationを作ってみた
帰ってきたYokohama.js(#yjs20140419)でLTしたスライドです
cancer
April 19, 2014
Tweet
Share
More Decks by cancer
See All by cancer
JSXをモダンな感じで開発してみた
cancer
0
470
AngularJSで作ったアプリをReactで置き換えてみた
cancer
0
230
CSSスプライトを動的生成して快適ソシャゲ開発
cancer
1
260
第2回 Sass勉強会 in 社内
cancer
1
70
Other Decks in Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
930
MobileActOsaka_250704.pdf
akaitadaaki
0
120
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
OPENLOGI Company Profile for engineer
hr01
1
34k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Language of Interfaces
destraynor
158
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Producing Creativity
orderedlist
PRO
346
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
帰ってきたYokohama.js (#yjs20140419) JavaScript で KeyframeAnimation を 作ってみた
自己紹介 宇野 陽太( ) @cancer6 株式会社モバイルファクトリー というところで フロントエンドエンジニアやってます 最近はBackbone /
Marionette / AngularJS あたりを触ったり CSS 書いたりなど
CSS Animation
CSS Animation CSS にkeyframe 書いて... アニメー ション用のclass を作ってプロパティ書いて... JS からclass
の操作して... ...
めんどくさい
どうせJS 使うなら全部JS で やってしまおう
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" }
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"
まだめんどくさい
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",
keyframe-animations.js カッコカリ アニメー ションの実行/ 停止もかんたん animationEnd で何かしたいとかもできます // アニメーション実行 animation.animate($("#animation"));
// アニメーション停止 animation.freeze(); // animationEndで何か実行したい animation.animate($("#animation"), function($element){ // アニメーションが終わったら要素を非表示にする $element.hide() });
keyframe-animations.js カッコカリ アニメー ションのライブラリを作ったりすると捗るはず var animationLibrary = new AnimationLibrary(); animationLibrary.setupModalAnimation();
こんな感じで
ご清聴ありがとうございました