Question

因此，我正在为SVG按钮设置动画，并且希望通过Java动画对转换属性以及具有不透明度属性的淡入淡出进行动画处理。

代码看起来像这样：（考虑到它的不透明度为0，标度为0）

（我知道我的操作方式不正确，因为它会覆盖到最后一个set属性）

    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上添加带有动画的类。

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

请参阅示例：

 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

Answer 2

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

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

...，依此类推，然后将CSS中的动画添加到类中或使用js将其添加到元素中：

.element{
  animation: hia 3s;
}

Answer 3

我迅速在SVG上为您测试了示例代码。可以。

但是我更喜欢在CSS中定义动画，而只是向SVG或其子元素添加CSS类或从中删除CSS类。我认为这是一种更清晰的关注点分离。而且，您可以通过浏览器启用可能的性能加速，因为它可以预先了解动画，并且理论上可以在GPU上完成。

通过JavaScript制作动画缩放比例

3 个答案: