0
我想創建一個界面,我可以通過使用svg.js(http://www.svgjs.com/)創建的動畫幀滾動或擦洗。有什麼辦法可以創建這個,也許使用像Angular JS這樣的Web應用程序框架?Javascript Scrollable/Scrubbable動畫w/svg.js
例如,有一個帶動畫的div和一個時間軸,我可以在該動畫中滾動和移動。
我想創建一個界面,我可以通過使用svg.js(http://www.svgjs.com/)創建的動畫幀滾動或擦洗。有什麼辦法可以創建這個,也許使用像Angular JS這樣的Web應用程序框架?Javascript Scrollable/Scrubbable動畫w/svg.js
例如,有一個帶動畫的div和一個時間軸,我可以在該動畫中滾動和移動。
您可以動畫擦洗通過與svg.js:
http://documentup.com/wout/svg.js#animating-elements/controlling-animations-externally
下面是一個簡單的例子:
// Create svg.js canvas
var draw = SVG('canvas')
// Create circle
var circle = draw.circle(100).move(100, 10).fill('#fff').animate('=', SVG.easing.backOut).move(200,200)
// Create image
var image = draw.image('http://distilleryimage11.s3.amazonaws.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg', 100, 100).move(10, 100).animate('=', SVG.easing.elastic).y(300)
// Use mouse movement to animate elements
document.onmousemove = function(event) {
circle.to(event.clientX/1000)
image.to(event.clientY/1000)
}
(加載兩個svg.js和svg.easing.js插件,使其工作)
你可以在這裏看到它的動作:
http://jsfiddle.net/wout/BqqNs/
將鼠標移到粉紅色的畫布上查看結果。