SVG奥林匹克五环动画

r囧r小猫 2022-08-24 14:22 164阅读 0赞

## 引言 ##

昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。

先来看看[效果][Link 1]，效果如下图所示。根据大家留言的意见进行了修正，见[效果][Link 2]。

![SouthEast][]

## 效果解析 ##

好的，Let‘s do it.

然后是CSS，我们用到了LESS

//颜色变量
    @blue : #0885C2;
    @red : #ED334C;
    @yellow : #FBB132;
    @green : #1C8b3C;
    @black : #292B2A;
    
    //动画持续时间动画
    @duration : 3s;
    
    //设置svg居中显示
    html, body { height: 100%; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background: whitesmoke; 
      margin: 0 1rem;
    }
    svg {
      maxwidth: 100%;
      height: auto;
      background: white;
      box-shadow: 0 1px 4px gainsboro;
      border-radius: .5rem;
    }
    
    //定义svg五环的绘制属性和动画效果  
    path {
      fill: transparent;
      stroke: rgba(0,0,0,.4);
      stroke-width: 12;
      stroke-dasharray: 465;
      stroke-linecap: round;
      stroke-linejoin: round;
      -webkit-animation: load @duration linear infinite;
      animation: load @duration linear infinite;
      transform-origin: center center;
    }
    //动画关键帧
    @keyframes load {
      from{stroke-dashoffset:480; }
      to { stroke-dashoffset: 0; }  
    }
    
    //五环的颜色
    //旋转环以模拟实现异步效果
    .blue {
      stroke: @blue;
      transform: rotate(210deg)
    }
    .black {
      stroke: @black;
      transform: rotate(-20deg)
    }
    .red {
      stroke: @red;
      transform: rotate(-55deg)
    }
    .yellow {
      stroke: @yellow;
      transform: rotate(40deg)
    }
    .green {
      stroke: @green;
    }

好了，整个效果就是这样。大家可以到我的[codepen][Link 1]在线修改、体验，或是下载收藏本效果。

\------------------------------------------------------------------------------------------------------------------------

华丽的分分分分分分割线  
\------------------------------------------------------------------------------------------------------------------------

## 效果优化 ##

根据大家的意见进行了修正，参照Brian Suda的[svg path animation][]优化了动画操作，做法解析如下。

html部分增加了重播的按钮和每条path的id控制

<button οnclick="rerun();">Again!</button>
    <svg id="mySvg"  version="1.1" viewBox="0 0 550 300">
    <path id="i0" class="blue"  d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i1" class="green" d="M 365, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i2" class="black" d="M 275, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i3" class="red" d="M 450, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i4" class="yellow" d="M 187.5, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    </svg>

css部分改变不大，去掉了动画部分。

button {
      position: absolute;
      top: 10px;
      right: 5px;
    }
    path {
      fill: transparent;
      stroke-width: 12;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .blue {
      stroke: #0885C2;
    }
    .black {
      stroke: #292B2A;
    }
    .red {
      stroke: #ED334C;
    }
    .yellow {
      stroke: #FBB132;
    }
    .green {
      stroke: #1C8b3C
    }

最重要的是借用了js优化动画效果。

var current_frame, total_frames, path, length, handle, myobj;
    var mysvg=document.getElementById('mySvg');
    var init = function() {
      current_frame = 0;
      total_frames = 60;
      path = new Array();
      length = new Array();
      for(var i=0; i<5;i++){
        path[i] = document.getElementById('i'+i);
        l = path[i].getTotalLength();
        length[i] = l;
        path[i].style.strokeDasharray = l + ' ' + l; 
        path[i].style.strokeDashoffset = l;
      }
      handle = 0;
    }
     
    var draw = function() {
       var progress = current_frame/total_frames;
       if (progress > 1) {
         window.cancelAnimationFrame(handle);
       } else {
         current_frame++;
         for(var j=0; j<path.length;j++){
    	     path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
         }
         handle = window.requestAnimationFrame(draw);
       }
    };
    
    init();
    draw();
    
    var rerun = function() {
      var old = document.getElementById('mySvg');
      old.parentNode.removeChild(old);
      document.getElementsByTagName('body')[0].appendChild(mysvg);
      init();
      draw();
    };

That's it. 大家可以到我的[codepen][Link 2]在线修改、体验改进后的效果，或是下载收藏本效果。

## 总结 ##

1.本效果主要利用strokeDashOffset属性的改变实现线绘动画，大家可以参考老外的[animated-line-drawing-svg][]。

2.利用js优化动画，大家可以参考Brian Suda的[Animating Vectors with SVG][svg path animation]。

3.关于网页里使用svg的情况，大家可以参考Chris Coyier在css-ticiks的[Using SVG][]。

4.SVG动画教程，参阅[10 BEST SVG ANIMATION TUTORIAL][]。

\---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/feDrj
[Link 2]: http://codepen.io/whqet/pen/gDhru
[SouthEast]: /images/20220824/179ff82e7eb64de6b7f447ef079c2120.png
[svg path animation]: http://24ways.org/2013/animating-vectors-with-svg/
[animated-line-drawing-svg]: http://jakearchibald.com/2013/animated-line-drawing-svg/
[Using SVG]: http://css-tricks.com/using-svg/
[10 BEST SVG ANIMATION TUTORIAL]: http://bashooka.com/coding/svg-animation-tutorials/