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

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

SVG（十二）——动画（3）

接上文

（10）动画

现在我们可以让SVG图形沿着路径运动起来了，不过我们希望有更多的属性来控制这个运动过程
- 所以，接下来我们来看看一些属性的扩展

（a）`begin`、`end`

这两个属性用于控制动画开始的时间和动画结束时间
- 而begin通常用作延时动画的属性
- 实际上这两个属性的功能远不止此
begin：其属性值是一个用分号；分隔的数列值，这些值可以是：
- <offset-value>
  - 表示【偏移】值，这个偏移值可以是正负值
  - 该偏移值是相对于SVG文档创建的时间
- <syncbase-value>
- 表示【同步】值，其作用是将SVG动画的开始时间定义为相对于另一个SVG动画的开始或者结束时触发
- 语法：id.begin、id.end，后面还可以再加减时间值，id表示另一个动画的id
- <event-value>
- 表示【事件】值，其作用是在触发了某个事件后再执行当前SVG动画
- 语法：id.event，后面也可以再加减时间值，id表示另一个动画的id
  - 这个事件必须是元素支持的合法的事件名
- <rpeat-value>
- 表示【重复】值，其作用是在另一个动画重复了多少次之后才执行当前SVG图形的动画
- 语法：id.repeat(x)，id表示另一个动画的id
  
  当然，这个属性必须搭配repeatCount才行，因为要重复
- <accessKey-value>
- 表示【键】值，其作用是在触发了某个按键后才开始执行当前SVG图形的动画
- 语法：accessKey(keyCode)，表示按键所在的字符
  
  chrome浏览器上似乎不生效
- <wallclock-sync-value>
- 表示【时间】值，其作用是在某个时间时才开始执行当前动画，这个时间是真实世界的时间
- 语法：一个真实的时间
- indefinite
  - 表示无限等待，但可以通过beginElement()方法来触发这个动画
end：其属性值同begin的属性值，定义end可以用来约束动画的执行时间
- 当然，一般情况下是不设置的
- 它通常用在begin里面，用来代替上一个动画的结束状态

接下来，我们来看一个实例

<syncbase-value>

代码示例

<svg>
    <circle cx="0" cy="0" r="25">
        <animateMotion id="bezier1" dur="3s" begin="0s;bezier2.end">
            <mpath xlink:href="#path1"></mpath>
        </animateMotion>
        <animateMotion id="bezier2" dur="3s" begin="bezier1.end">
            <mpath xlink:href="#path2"></mpath>
        </animateMotion>
    </circle>

    <path id="path1" d="M 100 100, Q 150 0 200 100, T 300 100" stroke="red" stroke="red" fill="none" />
    <path id="path2" d="M 100 100, Q 150 200 200 100, T 300 100" stroke="red" stroke="red" fill="none" />
</svg>

说明
对于SVG，动画不止可以设置一个
- 事实上，可以在一个SVG图形里面嵌套多个动画，用以控制不同的属性，或者执行不同的动画
这里设置了两个动画：bezier1、bezier2
- bezier1的动画第一次执行是：0s
- bezier2的动画第一次执行是：bezier1.end，即在bezier1动画结束后执行
- bezier1的动画第二次执行是：bezier2.end，即在bezier2动画结束后执行
- 这样，这两个动画会反复执行
效果

【CSS】SVG（十二）——动画（3）

SVG（十二）——动画（3）

（10）动画

（a）begin、end

（a）`begin`、`end`