动画帧

Question

谁能帮我看看帧动画是如何用js或css完成的。我实际上正在尝试实现与 here 相同的动画。我对道路动画的工作原理感到困惑。是执行此操作的任何插件还是简单的 js 和 css

Answer 1

我把它做成图像 (SVG) 格式。
我使用纯 HTML5 和 CSS3 动画对其进行动画处理。
随着 class .path 和 @keyframes.
很遗憾，IE 和 safari 不支持。

代码如下：

.line{
    width: 65%;
    margin: 0 auto;
}

svg{
     display: block;
}

#svg path.path{
    stroke-dasharray: 3000;
    stroke-dashoffset: 4000;
    stroke-width: 2;
    
    -webkit-animation:lines 5s linear forwards;
    -moz-animation:lines 5s linear forwards;
    -ms-animation:lines 5s linear forwards;
    -0-animation:lines 5s linear forwards;
    animation: lines 5s linear forwards;
}

@keyframes lines {
form { stroke-dashoffset:4000;}
  to { stroke-dashoffset: 0; }  
}

@-webkit-keyframes lines {
form { stroke-dashoffset:4000;}
  to { stroke-dashoffset: 0; }  
}

@-moz-keyframes lines {
 form { stroke-dashoffset:4000;}
  to { stroke-dashoffset: 0;}  
}

@-ms-keyframes lines {
 form { stroke-dashoffset:4000;}
  to { stroke-dashoffset: 0; }
}

@-o-keyframes lines {
 form { stroke-dashoffset:4000;}
  to { stroke-dashoffset: 0; }

}

<div class="line">
  <svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
   c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
   c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
   c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
   c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
   c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
   c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
   c12.464-36.907,21.327-75.103,35.836-111.202" />
  </svg>
</div>

See the code in "Code Pen"

如果可以编辑我的代码以在 IE 和 safari 中支持它，我希望对您有所帮助并欢迎大家。

动画帧

Animation Frames

html

javascript

css

svg

css-animations