在 svg.js 中获取动画步骤答案

【问题标题】：Get animation steps in svg.js在 svg.js 中获取动画步骤
【发布时间】：2015-09-01 12:04:52
【问题描述】：

svg.js 库allows us to animate the elements：

rect.animate().move(150, 150)

是否可以在非常变化（步骤）时调用函数，例如使用step 选项的we do in jQuery？

【问题讨论】：

标签： javascript jquery svg svg.js

【解决方案1】：

使用during 函数就是答案：

var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
rect.animate().move(200, 0).during(function(pos) {
    console.log(pos); // a value between 0 and 1
});

在（）期间

如果您想在动画期间执行自己的操作，可以使用during() 方法：
var position
    , from = 100
    , to   = 300

rect.animate(3000).move(100, 100).during(function(pos) {
  position = from + (to - from) * pos 
})
请注意，pos 在动画开头是 0，在动画结尾是 1。

为了使事情更容易，一个变形函数作为第二个参数传递。此函数接受 from 和 to 值作为第一个和第二个参数，它们可以是数字、单位或十六进制颜色：
var ellipse = draw.ellipse(100, 100).attr('cx', '20%').fill('#333')

rect.animate(3000).move(100, 100).during(function(pos, morph) {

// numeric values
  ellipse.size(morph(100, 200), morph(100, 50))

 // unit strings
  ellipse.attr('cx', morph('20%', '80%'))

 // hex color strings
  ellipse.fill(morph('#333', '#ff0066'))
})
返回：SVG.FX

JSFiddle

【讨论】：