How to-animate-svg's-with snap.svg-js-library
-
Upload
horiguchi-seito -
Category
Technology
-
view
298 -
download
1
Transcript of How to-animate-svg's-with snap.svg-js-library
![Page 1: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/1.jpg)
How to Animate SVG's with Snap.svg JS Library
![Page 2: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/2.jpg)
Profile
![Page 3: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/3.jpg)
Profile
Name : Seito
facebook: https://www.facebook.com/horiguchi.seito
Job : Front-End-Engineer / Manager
Company: LIGinc.
Live in : Cebu city & Tokyo
![Page 4: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/4.jpg)
LIGinc. is …
![Page 6: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/6.jpg)
https://www.facebook.com/iioffice.cebu/
Tokyo, Nagano,
& Cebu in June!
Co-working Space
![Page 8: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/8.jpg)
Snap.svg.js
![Page 10: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/10.jpg)
SVG animation library
What?
Other libraries are… Raphael
SVG.js TweenMax
![Page 11: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/11.jpg)
- Simple
- Similar animate method in jQuery
- Supported by IE9
- Produced by Adobe
Feature
![Page 12: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/12.jpg)
By the way … You should use Javascript like Snap.svg.js than CSS3 for all browsers.
![Page 13: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/13.jpg)
Try tutorial - Create SVG
![Page 14: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/14.jpg)
1. Open ai file on illustrator
![Page 15: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/15.jpg)
2. File > Save a Copy…
![Page 16: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/16.jpg)
3. Format > SVG
![Page 17: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/17.jpg)
good
bad
path, rect, polygon
You can use except <image>
Create SVG
![Page 18: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/18.jpg)
Try tutorial - Use Snap.svg.js
![Page 19: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/19.jpg)
How to
You need only 3 steps
![Page 20: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/20.jpg)
How to
![Page 21: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/21.jpg)
How to
![Page 22: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/22.jpg)
How to
(You can skip this step)
![Page 23: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/23.jpg)
How to
![Page 24: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/24.jpg)
Easing
![Page 25: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/25.jpg)
SVG attribute & property
![Page 26: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/26.jpg)
5 sample demo
![Page 29: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/29.jpg)
Hint Locations & Amount of anchor points must be same.
![Page 31: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/31.jpg)
Hint 1. You can animate <g>
2. {"transform" : "r-15 t300 30 s1”} means …
Quoted: https://davidwalsh.name/svg-animations-snap
![Page 33: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/33.jpg)
Hint
・getTotalLength()
・stroke-dasharray
・stroke-dashoffset
It's a long story, so please listen me later
![Page 34: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/34.jpg)
http://codepen.io/seito2014/pen/WwqrmM?editors=1010
5. Call back
![Page 35: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/35.jpg)
My work
![Page 37: How to-animate-svg's-with snap.svg-js-library](https://reader031.fdocuments.us/reader031/viewer/2022021921/58edf05c1a28ab49698b4577/html5/thumbnails/37.jpg)
Thank you so much!