Javascript Scrollable/Scrubbable动画w/svg.js

Question

我想创建一个界面，我可以通过使用svg.js（http://www.svgjs.com/）创建的动画帧滚动或擦洗。有什么办法可以创建这个，也许使用像Angular JS这样的Web应用程序框架？

例如，有一个带动画的div和一个时间轴，我可以在该动画中滚动和移动。

Answer 1

您可以动画擦洗通过与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/

将鼠标移到粉红色的画布上查看结果。