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
350
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
580
淺談使用 Appium 進行 React Native 雙平台(iOS & Android)App 的 E2E 自動化測試
patw0929
0
370
使用 Jest 進行 Front-End Unit Test
patw0929
9
2.4k
使用 Sketch 改善程式與設計的合作及標註方式
patw0929
6
1.9k
webpack 簡介
patw0929
2
470
Implement Social Login with Flask & authomatic
patw0929
1
170
淺談 RWD 與實做(用 Susy 1.0.9)
patw0929
2
570
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
680
Serena MCPのすすめ
wadakatu
4
910
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
160
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
XP, Testing and ninja testing ZOZ5
m_seki
3
360
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.1k
クラシルを支える技術と組織
rakutek
0
190
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
110
チームの境界をブチ抜いていけ
tokai235
0
100
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
430
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Building Applications with DynamoDB
mza
96
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why Our Code Smells
bkeepers
PRO
339
57k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Automating Front-end Workflow
addyosmani
1371
200k
Embracing the Ebb and Flow
colly
88
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
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/