Question

为使问题更简单，请说我有一个按钮列表：

<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

单击一个按钮时，它将对变换进行动画处理并无限循环播放动画，直到单击另一个按钮为止，然后它将重置并为另一个平移动画。因此，如果用户单击了按钮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处理动画播放状态，但是我仍然坚持如何基于单击和重置来使动画与众不同。

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";
             }

有什么建议吗？帮助将不胜感激！

用于以不同方式（转换）对SVG进行动画处理（转换）的按钮列表

0 个答案: