svg animate attributeName偏移暂停在不同时间间隔恢复

时间:2019-03-28 01:18:34

标签: animation svg

我需要一些有关暂停和恢复动画的帮助。有没有办法在几秒钟后暂停 attritubeName =“ offset” 然后反转偏移量?

基本上,梯度向右偏移,然后在几秒钟后暂停,然后向左偏移……以几个间隔。

我能够使用 animate (动画)来反转,但是它需要暂停几个时间间隔。我不确定使用 keyTimes 是否可以解决此问题,因为间歇间隔很长。

可以在这里找到

带有svg渐变的反向动画的演示:https://codepen.io/tfss/pen/BbOYmx 以及这里:https://jsfiddle.net/telosantos/vreqL6bd/24/

这是渐变动画的代码段,我希望间隔为:

<defs>
  <linearGradient id="userGradient" x1="300%" y1="0" x2="-100%" y2="0" >
    <stop offset="0" stop-color="#ffffff">
          <animate id="white-first" attributeName="offset" values="1;0.9;0;0.9;1" dur="3s" fill="freeze" repeatCount="indefinite" /> 
    </stop>
    <stop id="green" offset="0.5" stop-color="#4caf50" stop-opacity="1">
      <animate attributeName="offset" values="1;0.8;0.9;0;0.9;0.8;1" dur="3s" fill="freeze" repeatCount="indefinite" />
    </stop>
    <stop offset="0" stop-color="#ffffff">
          <animate id="white-last" attributeName="offset" values="1;1;0.5;1;1" dur="3s" fill="freeze" repeatCount="indefinite" /> 
    </stop>
  </linearGradient>
</defs>

<g id="user">
    <circle fill="#f6f7f8" stroke="#607d8b" stroke-width="0.48" stroke-miterlimit="10" cx="30" cy="169.8" r="13"/>
    <path fill="#607d8b" d="M29.7,182.6c-2.7,0-5.5-0.9-7.9-2.6v-2c0-1,0.6-2,1.5-2.5l3.2-1.8c0.4-0.2,0.7-0.7,0.7-1.2v-1.2 c0-0.1,0-0.2-0.1-0.2c-0.6-0.7-1-1.6-1.2-2.5c0-0.1-0.1-0.1-0.1-0.2c-0.3-0.2-0.4-0.5-0.4-0.8v-1.4c0-0.3,0.1-0.5,0.3-0.7 c0.1-0.1,0.1-0.1,0.1-0.2v-1.1c0,0,0,0,0,0c-0.1-0.7,0.2-1.5,0.7-2c0.7-0.8,1.8-1.1,3.3-1.1h0c1.5,0,2.6,0.4,3.3,1.1 c0.5,0.6,0.7,1.3,0.7,2c0,0,0,0,0,0v1.1c0,0.1,0,0.2,0.1,0.2c0.2,0.2,0.3,0.4,0.3,0.7v1.4c0,0.3-0.1,0.6-0.4,0.8 c-0.1,0-0.1,0.1-0.1,0.2c-0.2,0.9-0.6,1.7-1.2,2.5c0,0.1-0.1,0.1-0.1,0.2v1.2c0,0.5,0.3,0.9,0.7,1.2l3.2,1.8 c0.9,0.5,1.5,1.5,1.5,2.5v2C35.2,181.7,32.5,182.6,29.7,182.6L29.7,182.6z"/>
  <path class="circle-outline" fill="url(#userGradient)" d="M30,185.75c-8.822,0-16-7.178-16-16s7.178-16,16-16s16,7.178,16,16
    S38.823,185.75,30,185.75z M30,155.75c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S37.72,155.75,30,155.75z"/>
</g>

0 个答案:

没有答案
相关问题