Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG 動畫二三事

SVG 動畫二三事

Patrick Wang

January 09, 2015
Tweet

More Decks by Patrick Wang

Other Decks in Programming

Transcript

  1. SVG 動畫⼆二三事
    patw / Front-End Engineer
    Gogolook Developers meet up

    View Slide

  2. SVG
    • Scalable Vector Graphics
    • Proposed by W3C in 1999. In 2001 the SVG
    gained its first official release.
    • XML
    • Vector vs Bitmap

    View Slide

  3. SVG
    • Scalable
    • Smaller sizes (can be gzipped)
    • Interactive & Styleable (CSS & JavaScript)

    View Slide

  4. View Slide

  5. View Slide

  6. TOOLS
    • Inkscape (http://inkscape.org/)
    • SVG-edit (http://svg-edit.googlecode.com/svn/
    branches/stable/editor/svg-editor.html)
    • Adobe Illustrator
    • Sketch

    View Slide

  7. SVG ANIMATIONS

    View Slide

  8. 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/

    View Slide

  9. SVG ANIMATIONS
    • 更多變化:⽐比起 CSS 3 transition,除了位移、
    顏⾊色變化之外,還⽀支援路徑描繪、導引線、形
    狀漸變等動畫...
    • 互動效果:點擊後播放、等待 A 結束若干秒後
    播放,或是針對單⼀一元件互動...

    View Slide

  10. SVG ANIMATIONS
    • 三種實現⽅方法
    • CSS
    • SMIL(Synchronized Multimedia Integration
    Language)
    • JavaScript
    http://css-tricks.com/video-screencasts/135-three-ways-animate-svg/

    View Slide

  11. SVG ANIMATIONS
    • CSS 使⽤用時機
    • 只要實現簡單的動畫效果
    • 只需 CSS 動畫可⽀支援的屬性就可完成的情況
    • 了解 CSS 動畫怎麼做

    View Slide

  12. SVG ANIMATIONS
    • SMIL 使⽤用時機
    • 那些 CSS 辦不到的動畫屬性(例如形變)
    • 要⽤用上 SMIL 的特殊效果,例如在 A 動畫結束
    後播放(不需像 CSS 動畫要⾃自⾏行調整延遲時
    間),或是點擊後播放之類的

    View Slide

  13. SMIL ANIMATIONS
    • 不⽤用 CSS、JavaScript 就可實現動畫效果!
    • 瀏覽器⽀支援度 (http://caniuse.com/#feat=svg-
    smil)

    View Slide

  14. SMIL ANIMATIONS





    http://tutorials.jenkov.com/svg/svg-animation.html

    View Slide

  15. SVG ANIMATIONS
    • JavaScript 使⽤用時機
    • 就是要⽤用 JavaScript 的情況,像是動畫可能是
    依據接收到的 JSON 來動作的
    • 或是需要⼀一些數學邏輯時
    • 解決跨瀏覽器的問題
    • 需要實現龐⼤大且複雜的動畫
    • 太複雜也許就⽤用 Canvas 了

    View Slide

  16. 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/)

    View Slide

  17. DEMO

    View Slide

  18. 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/

    View Slide