Question

svg.js库allows us to animate the elements：

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

是否可以使用step选项调整函数（步骤），如we do in jQuery？

Answer 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

在svg.js中获取动画步骤

1 个答案:

期间（）