【CSS】SVG（十四）——动画（5）这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战 SVG

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

SVG（十四）——动画（5）

接上文

（10）动画

（d）`repeatDur`和`dur`

repeatDur：
- 描述：
  - dur表示的一次动画执行需要的时间
  - 而repeatDur这个属性用于设置动画执行的总时长
  - 在repeatDur设置的这段时间内，动画会一直重复执行，直到时间结束
  - 而如果repeatDur小于了dur，那么repeatDur的作用就和end一样了
  - 即，在repeatDur设置的时间结束执行动画
- 属性值：
  - 同dur属性的属性值，为时间值
  - 常见的时间值单位有：h、min、s、ms
- 代码示例：
```
<svg>
    <circle cx="0" cy="0" r="25">
        <animateMotion id="bezier1" dur="3s" begin="0" repeatDur="6s">
            <mpath xlink:href="#path1"></mpath>
        </animateMotion>
    </circle>
    <path id="path1" d="M 100 100, Q 150 0 200 100, T 300 100" stroke="red" stroke="red" fill="none" />
</svg>
```
  说明：
  - SVG图形运动路径会在6s内执行动画
  - 而每次执行的持续时间是dur="3s"
  - 所以该动画会重复执行两次
  其它：
  - 如果repeatDur非dur的整数倍，则动画会在执行半途中就结束
repeatCount和repeatDur
- repeatCount这个属性在前面已经介绍过，用来控制动画的执行次数
  - 可以设置为indefinite表示重复无限次
- repeatDur也可以设置为indefinite，用以表示无限循环动画
dur
- 这个属性也可以设置为indefinite
- 但与repeatDur不同的是，如果dur = "indefinite"
- 那么动画永远不会执行，而SVG形状会始终停留在路径起点

（e）`min`和`max`

min和max
- 描述：
  - 使用min来指定当前SVG图形执行动画的最短时间
  - 使用max来指定当前SVG图形执行动画的最长时间
- 属性值：
  - 属性值为时间值
- 代码示例：
```
<svg>
    <circle class="path" cx="0" cy="0" r="25">
        <animateMotion id="bezier1" dur="2s" begin="0" max="3s" repeatCount="indefinite">
            <mpath xlink:href="#path1"></mpath>
        </animateMotion>
    </circle>
    <path id="path1" d="M 100 100, Q 150 0 200 100, T 300 100" stroke="red" stroke="red" fill="none" />
</svg>
```
  说明：
  - 默认情况下，设置了repeatCount = 'indefinite'的动画是会无限循环的
  - 但是，如果设置了max，那么动画的执行时间就会有一个上限时间
  - 到达这个时间后，动画就会停止执行
  - 这里设置的是max = "3s"，则在3s时，动画会结束
  min暂时未找到使用场景

【CSS】SVG（十四）——动画（5）

SVG（十四）——动画（5）

（10）动画

（d）repeatDur和dur

（e）min和max

（d）`repeatDur`和`dur`

（e）`min`和`max`