CODEWITHSUNDEEP
javascriptanimationraphael
Arno
Arno

Reputation: 514

Raphael position element right and scale it there

I have a problem and I couldn't find any solution for 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);
  1. The upper transform is used to translate both the suns to their position.
  2. With the transform in the animation I try to scale the sun on its current position.

What happens is that the sun is moving back to the 0, 0 position.

Here is a simplified example: jsfiddle.net/vX4C9

Upvotes: 1

Views: 555

Answers (1)

Martin
Martin

Reputation: 637

When you have a look into the Raphael Element.transform documentation, you'll learn that the transformations you are using for animations are sets of cumulative operations performed on your target, which you reset each time you transform again. This means that once you apply one transformation (i.e. the t62 62), you will overwrite it with the next one (s.8 .8).

When you do not want to move the circle back to its original position, you need to prepend the translations you already performed. This can be done by prepending t62 62 to your animations like so:

var anim = Raphael.animation({transform: "t62 62 s.8 .8"}, "2000", function(){
  circle.animate(animBack);
});

This fiddle fixes your example in the appropriate way and scales the circle on the position it was placed on after the first translation. I have taken the liberty to emphasize the scale operation by changing it from s.8 .8 - s1 1 to s1 1 - s2 2.

Upvotes: 1

Related Questions