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
Frame Animation in the Browser
Search
mattfordham
August 15, 2012
Programming
2
180
Frame Animation in the Browser
Presented at Seattle ID
mattfordham
August 15, 2012
Tweet
Share
More Decks by mattfordham
See All by mattfordham
Styleguide Driven Development
mattfordham
13
2.9k
Confessions of an Apprehensive Technical Director
mattfordham
11
290
Automating EE Bootstrapping and Deployment
mattfordham
3
160
Automating EE Bootstrapping and Deployment
mattfordham
2
220
Other Decks in Programming
See All in Programming
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Designing for tomorrow's programming workflows
honnibal
PRO
2
130
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
800
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
Git Rebase
bkuhlmann
11
1.6k
エンターテイメント業界で利用されるAWS
demuyan
0
210
Git Lint
bkuhlmann
4
750
VS Code をプロダクトにどう取り込むか
onomax
1
360
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
Java 22 Overview
kishida
1
180
Featured
See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
Web development in the modern age
philhawksworth
202
10k
GraphQLとの向き合い方2022年版
quramy
32
12k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Pragmatic Product Professional
lauravandoore
25
5.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
4 Signs Your Business is Dying
shpigford
175
21k
Transcript
Frame Animation in the Browser Seattle Interactive Developers / August
15, 2012
Matt Fordham Technical Director / WINTR www.wintr.com
None
Animated GIFs Multi-image Sequences Sprite Sequences
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Consider for... Looping animations Small details Low-tech contexts
(HTML emails) Make ‘em with... Photoshop
Multi-image Sequences Cons Lots of image requests Lots of DOM
elements Pros Any image type Good for larger images
Multi-image Sequences Consider for... Larger/longer animations Multi-stage animations Make ‘em
with... After Effects / 3D / Photoshop Javascript
Sprite Sequences Cons Not great for large images Pros Only
one image request Only one DOM element
Sprite Sequences Consider for... Smaller/shorter animations Button rollovers Make ‘em
with... After Effects / 3D / Photoshop Javascript
jquery.frameSequencer.js https://github.com/mattfordham/Frame-Sequencer
Other Useful Tools https://github.com/jakesgordon/sprite-factory http://imageoptim.com http://www.codingmammoth.com/quickscale.php http://manytricks.com/namemangler
Thanks :) @mattfordham www.wintr.com www.matthewfordham.com/blog