捕捉SVG路径动画

Question

I'm getting to grips with Snap SVG and have a path animation almost how I want it with the help of tutorials. How do I:

a.) Incorporate scale into the animation? add something like s0.7 to the transform:

 planeGroup.transform( 't' + parseInt(movePoint.x - 40) + ',' + parseInt( movePoint.y - 200) + 'r' + (movePoint.alpha - 180) + s0.7);

...it breaks it. I want the plane to start at original scale and then get smaller over the duration of the animation.

b.) Get the plane positioned so it matches its trail(path) ie the trail appears to come from the plane?

https://jsfiddle.net/d0L8fbux/2/

Thanks in advance.

Answer 1

Its just a case of fiddling about to figure out where the rotation point of the image needs to be. So does it need to rotate on its centre, tail or front, and the x and y offets depending on the image visual centre to line up at the end of the path. It can be a bit fiddly to line up though.

So I have added a centre of rotation on the plane

'r' + (movePoint.alpha - 180) + ',80,80'

Thats just a bit of guesswork without really knowing the image.

Scale can just have 's0.7' added to the end. So transform would look like this...

planeGroup.transform( 't' + parseInt(movePoint.x-80) + ',' + parseInt( movePoint.y-80) + 'r' + (movePoint.alpha - 180) + ',80,80s0.5');

jsfiddle