Javascript 可滚动/可擦洗动画 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/

将鼠标悬停在粉色 Canvas 上即可查看结果。