SVG动画

    SVG中提供三种常用动画标记
    <animate> 基础动画
    <animateTransform> 形变动画
    <animateMotion> 路径动画

    SVG动画使用方式
    2.1 创建动画，告诉动画标记哪个元素需要执行动画
    2.2 创建元素，在元素中说明需要执行什么动画

    SVG动画属性

    attributeType: CSS/XML规定的属性值的名称空间
    attributeName: 规定元素的哪个属性会产生动画效果
    from/to: 从哪到哪
    dur: 动画时长
    fill: 动画结束之后的状态，保持freeze结束状态/remove回复初始状态

SVG动画常用属性

    repeatCount = "次数/indefinite" 规定动画重复的次数
    repeatDur = “持续时间/indefinite” 规定动画重复总时长
    begin: 规定动画开始的时间
    begin="1s"
    begin="click"
    begin="click + 1s"
    restart: 规定元素开始动画后，是否可以被重新开始执行
    always: 动画可以在任何时候被重置。默认值
    whnNoActive: 只有在动画没有被激活的时候才能被重置，例如在动画结束之后
    never： 在整个SVG自行过程中，元素动画不能被重置
    calcMode: 非连续动画，没有动画效果瞬间完成
    linear: 默认属性，匀速动画
    discrete: 非连续动画，没有动画效果瞬间完成
    paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
    spline: 配合ksyplines属性来定义各个动画过渡，自定义动画
    keyTimes: 划分动画时间片段，取值0-1
    values: 划分对应取值片段的值

复合动画

利用复合动画实现一个无限往返效果

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate
                id="toRight"
                attributeName="cx"
                from="100"
                to="300"
                dur="1s"
                begin="click;toLeft.end"
        />
        <animate
                id="toLeft"
                attributeName="cx"
                from="300"
                to="100"
                dur="1s"
                begin="toRight.end"
        />
    </circle>
</svg>

形变动画

<animateTransform attributeName="transform" type="translate/rotate/scale" />

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animateTransform
                attributeName="transform"
                type="translate"
                from="0 0"
                to="100 0"
                dur="1s"
                begin="click"
                fill="freeze"
        />
    </circle>
</svg>

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="blue">
        <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 100 100"
                to="45 100 100"
                dur="1s"
                begin="click"
                fill="freeze"
        />
    </rect>
</svg>

SVG路径动画

<svg width="500" height="500" viewBox="-100 -100 500 500">
    <path d="M0 0 C0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="rgba(255, 0, 0, 0.5">
        <animateMotion
                path="M0 0 C0 300 300 300 300 0"
                dur="5s"
                begin="click"
                fill="freeze"
                rotate="auto"
        />
    </rect>
</svg>