javascript - Raphael position element right and scale it there -
i have problem , couldn't find solution this.
var sunsmallset = raf.paper.set(); var sunset = raf.paper.set(); raf.paper.importsvg(rafsvg.sunsmall(), sunsmallset); raf.paper.importsvg(rafsvg.sunfull(), sunset); sunsmallset.transform("t62, 62"); sunset.transform("t62, 62"); var anim = raphael.animation({transform: "s0.8 0.8"}, "2000", function(){ sunset.animate(animback); }); var animback = raphael.animation({transform: "s1 1"}, "2000", function(){ sunset.animate(anim); }); sunset.animate(anim);
- the upper transform used translate both suns position.
- with transform in animation try scale sun on current position.
what happens sun moving 0, 0 position.
here simplified example: jsfiddle.net/vx4c9
when have raphael element.transform documentation, you'll learn transformations using animations sets of cumulative operations performed on target, reset each time transform again. means once apply 1 transformation (i.e. t62 62
), overwrite next 1 (s.8 .8
).
when not want move circle original position, need prepend translations performed. can done prepending t62 62
animations so:
var anim = raphael.animation({transform: "t62 62 s.8 .8"}, "2000", function(){ circle.animate(animback); });
this fiddle fixes example in appropriate way , scales circle on position placed on after first translation. have taken liberty emphasize scale operation changing s.8 .8
- s1 1
s1 1
- s2 2
.
Comments
Post a Comment