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
SVG 動畫二三事
Search
Patrick Wang
January 09, 2015
Programming
0
320
SVG 動畫二三事
Patrick Wang
January 09, 2015
Tweet
Share
More Decks by Patrick Wang
See All by Patrick Wang
使用 Jest 進行 Front-End Unit Test(線上 React 讀書會版)
patw0929
2
490
淺談使用 Appium 進行 React Native 雙平台(iOS & Android)App 的 E2E 自動化測試
patw0929
0
330
使用 Jest 進行 Front-End Unit Test
patw0929
9
2.1k
使用 Sketch 改善程式與設計的合作及標註方式
patw0929
6
1.7k
webpack 簡介
patw0929
2
450
Implement Social Login with Flask & authomatic
patw0929
1
160
淺談 RWD 與實做(用 Susy 1.0.9)
patw0929
2
540
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
ONE WEDGE_company_guide
1wedge_one
0
470
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
130
Ruby GitHub Packages
bkuhlmann
0
630
雑に思考を整理する技術と効能
konifar
58
29k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
690
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Statistics for Hackers
jakevdp
789
220k
Testing 201, or: Great Expectations
jmmastey
28
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
What the flash - Photography Introduction
edds
64
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Transcript
SVG 動畫⼆二三事 patw / Front-End Engineer Gogolook Developers meet up
╳
SVG • Scalable Vector Graphics • Proposed by W3C in
1999. In 2001 the SVG gained its first official release. • XML • Vector vs Bitmap
SVG • Scalable • Smaller sizes (can be gzipped) •
Interactive & Styleable (CSS & JavaScript)
None
None
TOOLS • Inkscape (http://inkscape.org/) • SVG-edit (http://svg-edit.googlecode.com/svn/ branches/stable/editor/svg-editor.html) • Adobe
Illustrator • Sketch
SVG ANIMATIONS
ANIMATED SVG VS. GIFS “By using animated SVGs instead of
GIFs we were able to reduce our page size from 1.6 mb to 389 kb, and reduce our page load time from 8.75 s to 412 ms. That’s a huge difference.” http://oak.is/thinking/animated-svgs/
SVG ANIMATIONS • 更多變化:⽐比起 CSS 3 transition,除了位移、 顏⾊色變化之外,還⽀支援路徑描繪、導引線、形 狀漸變等動畫... •
互動效果:點擊後播放、等待 A 結束若干秒後 播放,或是針對單⼀一元件互動...
SVG ANIMATIONS • 三種實現⽅方法 • CSS • SMIL(Synchronized Multimedia Integration
Language) • JavaScript http://css-tricks.com/video-screencasts/135-three-ways-animate-svg/
SVG ANIMATIONS • CSS 使⽤用時機 • 只要實現簡單的動畫效果 • 只需 CSS
動畫可⽀支援的屬性就可完成的情況 • 了解 CSS 動畫怎麼做
SVG ANIMATIONS • SMIL 使⽤用時機 • 那些 CSS 辦不到的動畫屬性(例如形變) •
要⽤用上 SMIL 的特殊效果,例如在 A 動畫結束 後播放(不需像 CSS 動畫要⾃自⾏行調整延遲時 間),或是點擊後播放之類的
SMIL ANIMATIONS • 不⽤用 CSS、JavaScript 就可實現動畫效果! • 瀏覽器⽀支援度 (http://caniuse.com/#feat=svg- smil)
SMIL ANIMATIONS • <set> • <animate> • <animateColor> • <animateTransform>
• <animateMotion> http://tutorials.jenkov.com/svg/svg-animation.html
SVG ANIMATIONS • JavaScript 使⽤用時機 • 就是要⽤用 JavaScript 的情況,像是動畫可能是 依據接收到的
JSON 來動作的 • 或是需要⼀一些數學邏輯時 • 解決跨瀏覽器的問題 • 需要實現龐⼤大且複雜的動畫 • 太複雜也許就⽤用 Canvas 了
SVG ANIMATIONS • JavaScript Solutions • Snap.svg (http://snapsvg.io/) • GreenSock
(http://codepen.io/GreenSock/pen/ gpDrC) • Velocity.js (http://julian.com/research/velocity/) • SVG Morpheus (http://alexk111.github.io/ SVG-Morpheus/)
DEMO
REFERENCES • http://slides.com/sarasoueidan/animating-svg-with-css- and-smil-full-version • http://css-tricks.com/video-screencasts/135-three- ways-animate-svg/ • http://www.oxxostudio.tw/articles/201409/svg-21-smil- animation.html
• http://tech.mozilla.com.tw/posts/5660/ • http://www.zhangxinxu.com/wordpress/2014/08/so- powerful-svg-smil-animation/