通过Javascript实现变换比例的动画效果

Question

所以，我正在用SVG按钮制作动画，我想通过JavaScript将变换属性与opacity属性淡出组合起来进行动画。

代码应该像这样：（考虑它带着opacity 0和scale 0）

（我知道我这样做是不正确的，因为它会覆盖掉最后设置的属性）

    function hiA(){
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("opacity", "1");
    }

同样的事情，但是反过来：（考虑到它是以不透明度1和比例1的形式出现的）

    function byeA(){
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(0)");
        pathA.setAttribute("opacity", "0");
    }

我不确定是否可行，或者更好的方法是在CSS中添加一个带动画效果的类。

- Adrian

---

使用 style. 而不是 setAttribute: https://www.w3schools.com/jsref/prop_html_style.asp - לבני מלכה

是的，可以在CSS中设置类并为该类设置样式和动画。 - לבני מלכה

请展示你的HTML - לבני מלכה

请分享您的HTML代码。 - Code_Ninja

Answer 1

你可以在CSS中设置类和样式: https://www.w3schools.com/css/css3_animations.asp JS:

 pathA.className+="hiA"

CSS（层叠样式表）：

@keyframes example {
    0%   {transform:scale(1);}
    50%  {transform:scale(.5)}
    100% {transform:scale(1);opacity:1;}
}


.hiA{
    animation: example 1s;
}

See example:

 function hiA(){
 var pathA=document.getElementById("pathA");
  pathA.className="hiA";
  setTimeout(function(){ pathA.className=""; }, 3000);
 }

@keyframes example {
   0%   {transform:scale(.5);}
   50%  {transform:scale(1);}
   100% {transform:scale(0);}
}
    
    
.hiA{
    animation: example 3s;
}

<button onclick="hiA()" id="pathA">animation me</button>

ED

- לבני מלכה

---

这只是在第一次运行动画时有效，并且必须在打开和关闭时运行两个不同的动画。此外，我正在尝试使用JavaScript，因为其他动画是使用segment.min.js制作的。 - Adrian

我更新了答案修复以使得它能够在每次点击时都起作用，而不仅仅是第一次。 - לבני מלכה

Answer 2

你可以在CSS中定义关键帧：

@keyframes hia{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.5);
  }
}

...等等，然后在CSS中将动画添加到类中或者使用JS将其添加到元素中：

.element{
  animation: hia 3s;
}

- D. Dan

Answer 3

我快速测试了你的SVG示例代码，它可以正常工作。

但是我更喜欢在CSS中定义动画，然后将CSS类简单地添加到/从SVG或其子元素中。在我看来，这是更清晰的责任分离。并且，通过浏览器提前知道动画，您可以启用可能的性能加速，理论上可以在GPU上完成。

- Trve

---

它可以工作，但会覆盖之前的所有变换，只应用最后一个变换。例如，在以下代码中： pathA.setAttribute("transform", "scale(1)"); pathA.setAttribute("transform", "scale(.5)"); pathA.setAttribute("transform", "scale(1)"); 它只会应用最后一个变换。 - Adrian