svg 交互动画 2

继续模仿一些微信公众号文章中的交互效果。

---

卷轴展开效果

效果描述：刚进入页面时，是一个较短的矩形，点击后主体逐渐变长，显示更多内容。这么个简单的效果在某编辑器中要付费，我是挺惊讶的。

无非是个线性变长的矩形，里层容器为固定高度，存放正文内容，改变外层容器的 height 属性，控制可视区域。添加 restart="never" 保证动画触发一次后不会再被触发。

如下例子，内容固定高度为160，外层容器高度在 1s 内从 100 变成 160：

<svg width="100" height="100">
    <rect id="rectangle" width="100" height="160" 
          style="fill:lightsalmon;"></rect>
    <animate attributeName="height"
             begin="click"
             values="100;160"
             dur="1s"
             fill="freeze"
             restart="never"/>
</svg>

markup

Copy

实际应用中，可能还需要加上头尾，这样卷轴展开效果就完美了：

<svg id="out" width="100" height="120">
    <rect x="0" y="0" width="100" height="30" style="fill:indianred;"></rect>
    <rect x="0" y="30" width="100" height="260" style="fill:lightyellow;"></rect>
    <g>
        <rect x="0" y="90" width="100" height="30" style="fill:indianred;"></rect>
        <animateTransform attributeName="transform"
                          type="translate"
                          values="0 0;0 200"
                          begin="out.click"
                          dur="2s"
                          fill="freeze"
                          restart="never">
        </animateTransform>
    </g>
    <animate attributeName="height"
             begin="click"
             values="120;320"
             dur="2s"
             restart="never"
             fill="freeze"
             restart="never">
    </animate>
</svg>

markup

Copy

回弹效果

在上述基础上，做一些变形：全程线性变长改为分段变长，且每一段都有回弹效果：

<svg width="100" height="100">
    <rect id="rectangle" width="100" height="160" style="fill:lightpink;"></rect>
    <animate attributeName="height"
             begin="click+0s"
             calcMode="spline"
             dur="1s"
             fill="freeze"
             keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"
             keyTimes="0; 0.85; 1"
             restart="never"
             values="100;130;120"></animate>
    <animate attributeName="height"
             begin="click+1.1s"
             calcMode="spline"
             dur="1s"
             fill="freeze"
             keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"
             keyTimes="0; 0.85; 1"
             restart="never"
             values="120;150;140"></animate>
    <animate attributeName="height"
             begin="click+2.2s"
             calcMode="spline"
             dur="1s"
             fill="freeze"
             keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"
             keyTimes="0; 0.85; 1"
             restart="never"
             values="140;170;160"></animate>
</svg>

markup

Copy

foreignObject

讲了这么多例子，为了容易理解，都是用颜色方块来代替正文内容。在实际应用中，更多是使用图片作为内容，foreignObject 就是一个很好的选择，它允许包含来自不同的 XML 命名空间的元素，甚至嵌入 HTML。

<svg width="100" height="100">
    <foreignObject x="0" y="0" width="100" height="320">
        <svg style="display: inline-block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-image: url(https://s11.ax1x.com/2024/01/31/pFKOYX4.jpg);"></svg>
    </foreignObject>
    <animate attributeName="height" begin="click" values="100;320" dur="2s" fill="freeze" restart="never"/>
</svg>

markup

Copy

作弊方法

市面上有各种编辑器，可以方便地给公众号文章添加交互动效，由于 SVG 的代码是可以直接查看的，所以看到喜欢的效果时，打开控制台，把 SVG 的代码复制下来，研究一下，基本就能理解他的实现原理，从而复刻类似效果。