Список кнопок для анимации (преобразования) SVG различными способами (переводы) - PullRequest
Новая
       67

Список кнопок для анимации (преобразования) SVG различными способами (переводы)

0 голосов
/ 15 апреля 2020

Для простоты вопроса, скажем, у меня есть список кнопок: 

<g id="Buttons">
    <div class="btn1">Button 1</div>
    <div class="btn2">Button 2</div>
    <div class="btn3">Button 3</div>
</g>

и многоугольник SVG: 

<polygon id="Poly" class="stP" points="some group of points">

Я изо всех сил пытался найти лучший метод чтобы кнопка была нажата, чтобы анимировать преобразование SVG различными способами. Например, каждая кнопка должна преобразовывать SVG по-разному. Скажем так: 

btn1.onclick will translateX
btn2.onclick will translateY
btn3.onclick will translateZ

Когда нажата кнопка, она анимирует преобразование и l oop анимацию до тех пор, пока не будет нажата другая кнопка, затем она будет сброшена и анимирована в другом переводе. Таким образом, если пользователь нажимает кнопку 1, SVG будет анимировать движение в направлении X, и если пользователь продолжит нажимать кнопку 2, SVG будет сбрасываться и начинать анимацию в направлении Y, пока не будет нажата другая кнопка, и так далее, и так далее.

Я пробовал SMIL, кодируя разные анимации в самом SVG, чтобы «начинать» с разных кликов: 

<polygon id="Poly" class="stP" points="some group of points">
    <animateTransform
        attributeName="transform" attributeType"XML"
        begin="btn1.click" type="translate" from="0,0" to="20,0"
        dur="1s" dir="alternate" repeatCount="indefinite" additive="sum" fill="freeze" />
</polygon>

Я пытался javascript и CSS для обработки анимации -play-state, однако я застрял в том, как сделать анимацию отличной в зависимости от щелчка и сброса. 

var parent = document.querySelector("#Buttons");
parent.addEventListener("click", moveEle, false);



function moveEle(e) {
     if (e.target !== e.currentTarget) {
     var selItemId = e.target.id;
         if (selItemId == "btn1") {
             if (document.getElementById("Poly").style.animationPlayState == "running") {
                document.getElementById("Poly").style.animationPlayState = "paused";
                document.getElementById("Poly").classList.remove("oClass");
             }
             else {
                document.getElementById("Poly").classList.add("oClass");
                document.getElementById("Poly").style.animationPlayState = "running";
             }

Есть предложения? Помощь будет оценена!

...