公众号图文中用SVG实现各种翻页动画

这次我们来介绍如何用SVG在公众号图文中实现各种卡牌翻转和翻页等特效，包括卡牌单面旋转，双面旋转，翻页效果的实现。

熟悉前端开发的同学都知道，我们可以借助CSS的伪3D API轻松的实现3D卡片的旋转和翻页效果，而对于SVG这种2D图形接口，又如何模拟类似的效果呢？

今天我来带大家剖析卡片旋转和翻页效果在SVG中的实现方法和原理，相信看过本文后，你也可以轻松的实现各种旋转和翻页效果。

翻页效果的实现原理

简单地说，我们可以通过设置对象x轴方向的缩放来模拟卡片的旋转效果。为此我们要通过animateTransform标签来设置对象的缩放(scale)值，生成旋转动画。

单面旋转动画

通过将scale值从1 1变为0 1，让图形在x轴方向被压扁，产生类似旋转的效果。

<animateTransform 
  attributeName="transform" 
  type="scale" 
  values="1 1;0 1" 
  dur="1s" 
  fill="freeze" 
  restart="never" 
  begin="click">
</animateTransform>

由于SVG的坐标原点默认是在左上角，元素的缩放也是以坐标原点进行的。因此我们需要改变缩放原点坐标，使卡片在中心点缩放。

通过改变原点坐标值，我们可以实现元素绕任意点旋转或缩放。

<!-- 将原点设置在卡片中心 -->
<g transform="translate(300 430)">
  <foreignObject x="-300" y="-430" width="600" height="861">
    <!-- 卡片SVG -->
    <svg viewBox="0 0 600 861"></svg> 
  </foreignObject>
</g>

双面旋转动画

和单面实现的原理类似，不同的是：我们需要将正反两张卡片放在一个分组中，通过旋转该分组来模拟双面翻转的效果。当旋转动画执行到一半时，需要隐藏正面的卡片，使用户有卡片被翻转的错觉。

<g transform="translate(300 430)">
  <g transform="translate(-300 -430)">
    <g>
      <!-- 卡片背面 -->
      <foreignObject x="0" y="0" width="600" height="861">
        <svg viewBox="0 0 600 861"></svg>
      </foreignObject>
    </g>
  
    <g>
      <!-- 卡片正面 -->
      <foreignObject x="0" y="0" width="600" height="861">
        <svg viewBox="0 0 600 861"></svg>
      </foreignObject>
      <!-- 旋转到一半时，隐藏正面卡片 -->
      <set 
        attributeName="visibility" 
        to="hidden" 
        begin="click+0.25s"
        >
      </set>
    </g>
  </g>
  <animateTransform 
    attributeName="transform" 
    type="scale" 
    additive="sum" 
    values="1 1;-1 1" 
   >
  </animateTransform>
</g>

翻页动画

明白了卡牌翻页的原理，翻页效果的实现就是小菜一碟了。这里我们在翻牌代码的基础上，结合斜切(skewY)属性来实现翻页特效。

<g transform="translate(0 430)">
  <!-- 翻页元素 -->
  <foreignObject x="0" y="-430" width="600" height="861">
    <svg viewBox="0 0 600 861">
    </svg>
  </foreignObject>
  <animateTransform type="scale"></animateTransform>
  <animateTransform 
    attributeName="transform" 
    type="skewY" 
    values="0;-5;-5" 
    keyTimes="0;0.5;1" 
    dur="1s" 
    fill="freeze" 
    restart="never" 
    begin="click" 
    calcMode="spline" 
    additive="sum" 
    keySplines="0.5 0 0.5 1;0 0 1 1">
  </animateTransform>
</g>

总结

通过三个案例我们已经掌握了卡片旋转和翻页效果的原理，只要设置好缩放的中心点，再结合scale和skewX，skewX等变换属性就能轻松的实现这些效果。

为了节约篇幅，上面例子中的代码都做了简化，大家可以点击“阅读原文”结合源文件来学习，做教程不易，请大家多点“在看分享”，你的支持是我的动力！

Categories
SVG
教程