2017-10-21 21 views
0

Mon intention était de déplacer l'objet à un point de consigne (300), de m'arrêter là pendant un moment, puis de le déplacer à nouveau. Je l'ai essayé de faire avec animateTransform comme ceci:AnimateTransform ne fonctionnait pas comme prévu

<animateTransform attributeName="transform" additive="sum" type="translate" dur="12s" start="1s" fill="freeze" 
from="650px" to="300px" repeatCount="1" /> 

<animateTransform attributeName="transform" type="translate" dur="2s" additive="sum" start="20s" fill="freeze" 
from="300px" to="200px" repeatCount="1" /> 

mais maintenant l'objet se déplace seulement 100px après 20 ans (la première transformation est ignorée?). J'ai fatigué en utilisant animer à la place, mais cela n'a pas fonctionné comme prévu non plus. Un conseil sur où je me suis trompé et que dois-je faire pour obtenir l'effet d'animation voulu?

Répondre

1
  1. L'attribut de synchronisation est begin, pas start.

  2. Ne conservez pas les unités px. Bien qu'ils soient légaux selon SVG 2, ils n'étaient pas en SVG 1.1, et peuvent ne pas encore être implémentés dans certains navigateurs.

  3. additive="sum" signifie que la transformation est ajoutée en haut de la valeur de transformation résultant des animations précédentes. Au début de l'animation, l'objet sautera du montant de la valeur from et se déplacera à partir de là. Ce n'est probablement pas ce que vous vouliez accomplir. Utilisez additive="replace" ou démarrez toutes les animations avec from="0" et définissez to sur une valeur relative.

+0

merci! Je me sens un peu gêné par le "début" - jésus comment ai-je manqué ça? – murksiuke