在 svg.js 中获取动画步骤

Question

svg.js library 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()

If you want to perform your own actions during the animations you can use the during() method:
var position
    , from = 100
    , to   = 300

rect.animate(3000).move(100, 100).during(function(pos) {
  position = from + (to - from) * pos 
})
Note that pos is 0 in the beginning of the animation and 1 at the end of the animation.

To make things easier a morphing function is passed as the second argument. This function accepts a from and to value as the first and second argument and they can be a number, unit or hex color:
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'))
})
returns: SVG.FX

JSFiddle

在 svg.js 中获取动画步骤

Get animation steps in svg.js

javascript

jquery

svg

svg.js

during()