SVG синхронизация двух анимаций с масштабированием и переводом одновременно - PullRequest
Новая
       41

SVG синхронизация двух анимаций с масштабированием и переводом одновременно

0 голосов
/ 13 мая 2018

Я не могу синхронизировать SVG-преобразование, которое включает в себя как масштабирование, так и перевод.Вершина треугольника переводится из точки (967, 491) в (900, 100), одновременно изображение png должно также переводиться вместе с вершиной, но также должно уменьшаться или увеличиваться при перемещении.

Вполучить исходную позицию изображения png, я правильно использовал формулу -centerX * (масштабный коэффициент - 1), -centerY * (scaleFactor - 1).Это исходная позиция перед анимацией.Но когда начинается движение, я не могу рассчитать его окончательную позицию.

Может ли кто-нибудь помочь мне с этой проблемой. 

<svg viewBox="0 0 1200 800">
	<defs>
		<g id="triangle">
			<desc>Triangle</desc>
			<polygon id="triangle_" points="967,491 738,449 724,603">
				<animate attributeName="points" attributeType="XML"
				begin="0s" dur="5s" from="967,491 738,449 724,603" to="900,100 738,449 724,603" fill="freeze" />
			</polygon>
			<g transform="translate(483,245)">
				<image xlink:href="http://www.alegralabs.com/human.png" x="940" y="442" width="53" height="98" transform="scale(0.5)" style="fill:#FFF">
					<animateTransform attributeName="transform" type="scale" attributeType="XML"
					begin="0s" dur="5s" from="0.5" to="0.2" fill="freeze" />
				</image>
				<animateTransform attributeName="transform" type="translate" attributeType="XML"
					begin="0s" dur="5s" to="773,80" fill="freeze" />
					<!--<animateMotion from="0,0" to="241,122" dur="5s" fill="freeze" /> -->
			</g>
			<g>
				<text x="940" y="442">1234</text>
				<animateMotion from="0,0" to="-67,-391" dur="5s" fill="freeze" />
			<g>
		</g>
		
	</defs>
	<use xlink:href="#triangle" />
</svg>

1 Ответ

0 голосов
/ 13 мая 2018

Во-первых, упростите себе жизнь и присвойте изображению положение x / y так, чтобы его центр находился в 0, т.е. е. x="-26.5" y="-48". Тогда scale не приведет к изменению положения изображения. Переместите <text> внутри элемента <g>, чтобы относительное положение изображения и текста оставалось постоянным.

Думайте о начале координат этой группы как о единой точке, которая перемещается, и она может совпадать с движущейся вершиной треугольника: transform="translate(967,491)".

После этого одна анимация может масштабировать изображение, а другая перемещает элемент <g> в его анимированную позицию. Вы можете использовать те же координаты, что и для движущейся вершины. 

<svg viewBox="0 0 1200 800">
	<defs>
		<g id="triangle">
			<desc>Triangle</desc>
			<polygon id="triangle_" points="967,491 738,449 724,603">
				<animate attributeName="points" attributeType="XML"
				begin="0s" dur="5s" from="967,491 738,449 724,603" to="900,100 738,449 724,603" fill="freeze" />
			</polygon>
			<g transform="translate(967,491)">
				<animateTransform attributeName="transform" type="translate" attributeType="XML"
					begin="0s" dur="5s" from="967,491" to="900,100" fill="freeze" />
				<image xlink:href="http://www.alegralabs.com/human.png" x="-26.5" y="-48" width="53" height="98" transform="scale(0.5)" style="fill:#FFF">
					<animateTransform attributeName="transform" type="scale" attributeType="XML"
					begin="0s" dur="5s" from="0.5" to="0.2" fill="freeze" />
				</image>
				<text x="-27" y="-49">1234</text>
			<g>
		</g>
		
	</defs>
	<use xlink:href="#triangle" />
</svg>
...