老师可以详细解释下吗

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
<!--此处填写代码--> 
</head>
<body>
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="40" y="60" x="100">慕
        <animateTransform attributeName='transform' type='rotate' from='0 100 60' to='360 100 60' begin='0s' dur='10s' repeatCount="indefinite" accumulate='sum'/>
        <animate attributeName='font-size' from='40' to='80' begin='2s' dur='5s' repeatCount="indefinite" accumulate='sum'/>
    </text>
</svg>
<script>
   //此处填写代码
</script>
</body>
</html>

请问老师添加了accumulate='sum'之后为什么文字乱飞，我知道accumulate='sum'的意思是‘动画结束时候的位置作为下一个动画开始时候的位置’ 这个应该配合怎么理解？为什么会出现这种状况？可以配合解释一下吗

hy_wang 2018-07-27

源自：SVG滤镜及动画效果 3-7 编程练习

收起

3回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-07-30 17:09:27

additive = "replace | sum" 控制的动画是否可以追加到前面的动画上。促成多个动画的联合运行。

sum:指明了动画将追加到属性的根本值和前面的低权限动画上。

replace:指明了动画将覆盖属性的根本值和前面的低权限动画。

accumulate = "none | sum" 控制了动画结果是否可以累计

sum:指明了在第一次迭代后每一次迭代都是建立在前一次迭代的结果值纸上。

none:指明了重复迭代是不累计的，它是默认值。这个属性会在目标属性值不支持或者动画元素不重复的情况下被忽略。

累积的动画不是为"to animation"设置的。当动画设置带有‘to’的时候，本属性将会被忽略。

收起回答

Miss路 2018-07-29 15:43:28

这个编程题的效果是一边转一遍放大的，你这个不是同时的，思路是有问题的，用两个animateTransform就可以实现，参考下面的代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        svg{
            cursor:pointer;
        }
    </style>
</head>
<body>
</svg> 
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="40" y="60" x="100">慕
        <animateTransform 
        attributeName="transform" type="scale" from="1" to="2" dur="10s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="rotate" from="0 100 60" to="360 100 60" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>
    </text>
</svg>
<script>
    // svg指当前svg DOM元素
    var svg = document.getElementsByTagName("svg")[0];
    var time = true;
    // 暂停
    svg.onclick = function(){
        if(time){
            this.pauseAnimations();
            time = false;
        }else{
          // 重启动
            svg.unpauseAnimations();
            time = true;  
        }
        
    }
</script>
</body>
</html>

如果帮助到了你，欢迎采纳！

收起回答