如何为该SVG路径设置动画，使其看起来像绘制了箭头? [英] How to animate this SVG path so it looks like the arrow is being drawn?

问题描述

我有一个用Illustrator创建的箭头的SVG路径，但是我一辈子都无法弄清楚如何(或者如果可以)以所需的方式对其进行动画处理.下面是我来的最接近的，但正如您所知...就在那儿.

I have an SVG path for an arrow created in Illustrator, but I can't for the life of me figure out how (or if I can) animate it the way I want to. Below is the closest I've come, but as you can tell...just not there.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 850 683" style="enable-background:new 0 0 792 612;" xml:space="preserve">

<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="#fff"></stop>
          <stop offset="0.29" stop-opacity="1" stop-color="#fff">
            <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate>
          </stop>
          <stop offset="0.29" stop-opacity="0" stop-color="#fff">
            <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"></stop>
      </linearGradient>

<path class="st4 arrow" fill="url(#lg" d="M500.3,201.9l-33.7,17.5l10.1,6.4l-71,111.4l-39.9-62.3c0,0,0,0-0.1-0.1c-0.1-0.2-0.3-0.4-0.5-0.6
 c-0.1-0.2-0.3-0.3-0.4-0.5c-0.1-0.1-0.3-0.3-0.4-0.4c-0.2-0.2-0.4-0.4-0.7-0.5c0,0,0,0-0.1-0.1c-0.1-0.1-0.3-0.1-0.4-0.2
 c-0.2-0.1-0.5-0.3-0.7-0.4c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2-0.1-0.4-0.1-0.6-0.2c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.4,0-0.6,0
 c-0.2,0-0.5,0-0.7,0.1c-0.2,0-0.4,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.5,0.2-0.8,0.4
 c-0.1,0.1-0.3,0.1-0.4,0.2c0,0,0,0-0.1,0.1c-0.2,0.2-0.5,0.3-0.7,0.5c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.3,0.3-0.4,0.5
 c-0.2,0.2-0.3,0.4-0.5,0.6c0,0,0,0-0.1,0.1l-72.8,113c-2.1,3.3-1.2,7.6,2.1,9.7c1.2,0.8,2.5,1.1,3.8,1.1c2.3,0,4.6-1.1,5.9-3.2
 l66.8-103.7l39.9,62.4c0,0,0,0,0.1,0.1c0.3,0.5,0.6,0.9,1,1.2c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.4,0.7,0.5
 c0.1,0,0.1,0.1,0.2,0.1c0.4,0.2,0.8,0.4,1.2,0.5c0.2,0.1,0.4,0.2,0.6,0.2c0.5,0.1,1.1,0.2,1.7,0.2c0,0,0.1,0,0.1,0
 c0.6,0,1.2-0.1,1.8-0.3c0.2,0,0.3-0.1,0.5-0.2c0.4-0.2,0.9-0.3,1.3-0.6c0.1,0,0.1,0,0.2-0.1c0.2-0.1,0.4-0.3,0.6-0.5
 c0.1-0.1,0.3-0.2,0.4-0.3c0.4-0.4,0.7-0.8,1-1.2c0,0,0.1-0.1,0.1-0.1l77-120.7l10.1,6.4L500.3,201.9z"></path>

</svg>

基本上，我只是想让动画看起来像是从左到右画出的箭头...而我并不是那么接近:/有人可以帮忙吗?

Basically I just want to the animation to look like the arrow is drawn on from left to right...and I'm not that close :/ can anyone help??

https://jsfiddle.net/cnilsson/g4wfpmr9/

推荐答案

另一种方法是对路径数据本身进行动画处理.这在路径具有的顶点数方面有其明显的局限性.列表越长，它越难以管理.反转动画意味着将值列表加倍.为了正确地开始和结束，请将路径元素本身上的d设置为第一个/最后一个动画值.

Another approach would be to animate the path data itself. This has its obvious limitations in the number of vertices the path has. The longer the list, the more unmanageable it gets. Reversing the animation means doubling the value list. For a proper start and end, set the d on the path element itself to the first/last animated value.

对于箭头，必须沿箭头方向移动，并且始终将其指向正确的方向，您需要添加额外的中间动画点.请注意，中间的keyTimes会加倍.

For the arrowhead, it must be moved along, and to always have it point into the right direction, you need to add extra intermediate animation points. Note that there are intermediate keyTimes that are doubled.

要让所有内容在动画结束时消失，箭头只需要在动画期间显示.

To let everything disapear at the end of the animation the arrowhead needs to shown only during the duration of the animation.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="250">
  <defs>
    <marker orient="auto" refY="0" refX="0" id="tri" style="overflow:visible">
      <path d="M 1.76,0 -0.56,1.36 V -1.36 Z" fill="royalblue" />
    </marker>
  </defs>
  <path d="M 47,213 47,213 47,213 47,213"
        fill="none" stroke="royalblue" stroke-width="14"
        stroke-linejoin="round" marker-end="none">
    <animate attributeType="XML" attributeName="d" 
             begin="0s" dur="10s" fill="remove"
             keyTimes="0;0.18;0.18;0.27;0.27;0.45;0.55;0.73;0.73;0.82;0.82;1"
             values="M 47,213 47,213 47,213 47,213;
                     M 47,213 47,213 47,213 120,100;
                     M 47,213 120,100 120,100 120,100;
                     M 47,213 120,100 120,100 166,171;
                     M 47,213 120,100 166,171 166,171;
                     M 47,213 120,100 166,171 247,44;
                     M 47,213 120,100 166,171 247,44;
                     M 47,213 120,100 166,171 166,171;
                     M 47,213 120,100 120,100 166,171;
                     M 47,213 120,100 120,100 120,100;
                     M 47,213 47,213 47,213 120,100;
                     M 47,213 47,213 47,213 47,213" />
    <set attributeType="CSS" attributeName="marker-end"
         begin="0s" dur="10s" to="url(#tri)" />
  </path>
</svg>

这篇关于如何为该SVG路径设置动画，使其看起来像绘制了箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！