动画SVG元素每x秒 [英] Animate SVG element every x seconds

问题描述

简介

我知道一些基本的动画技术， SVG code> Javascript 和DOM < animate> 元素。所以我创建了这个SVG，但是我无法确定如何每x秒触发动画，没有太多的代码。我试过 begin =4s，但只能等待第一次。

问题： strong>

有一个DOM属性，如 begin 或 dur ，但是要定义一个间隔（以秒为单位）

我尝试了：

 < animateTransform attributeName =transformadditive =sumattributeType =XML
 type =rotatedur =1srepeatCount =indefinitefrom = 0 54.2 43.3
 to =360 54.2 43.3begin =3sfill =freeze/> 
  

此处的完整示例： SVG小提琴

注意：

• 我已经检查过 SVG规格


• 添加一些Javascript代码是一个选项


• 使用CSS3也是一个选项

解决方案

 < g取代; 
< rect x =0y =0width =30height =20fill =＃f83/> 
< animateTransform id =id1attributeName =transformadditive =sum
 type =scalecalcMode =linearbegin =4; id1.end + 4dur = 2keyTimes =0; 1
 values =1 1; 2 2fill =freeze/> 
 
< / g> 
  

这里的动画开始是相对于动画结束指定的，这样你的动画将永远等待你的指定的时间（这里是4秒），然后重新开始播放...

尝试这个，最好的

更新

如果您能够使用id.end而不是id.end + some_clock_value，则可以正确使用keyTimes和values属性，替换旋转动画使用以下animateTransform并查看是否得到所需的输出，

 < animateTransform id =id1attributeName =transform $ = $$$$$$$$$$$$ b值=0 54.2 43.3; 0 54.2 43.3; 360 54.2 43.3fill =freeze/> 
  

Introduction

I know some basic animation techniques for SVG using both Javascript and DOM <animate> element. So I have created this SVG, but I can't figure it out how trigger the animation every x seconds without too much code. I tried begin="4s" but it only wait the first time.

Question:

There is a DOM property like begin or dur, but to define an interval in seconds? Which is the better way to achieve this?

What I have tried:

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

Complete example here: SVG Fiddle

Notes:

• I already checked SVG Spec
• Add some Javascript code is an option
• Using CSS3 is an option too

解决方案

<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>      
    <animateTransform id="id1" attributeName="transform" additive="sum" 
     type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
     values="1 1;2 2" fill="freeze" />

</g>

here animation begin is specified with relative to animation end, in this way your animation will always wait for your specified time(here 4 sec) and start playing again ...

try this, all the best

UPDATE

if you able to use id.end instead of id.end+some_clock_value then use keyTimes and values attribute correctly, replace your rotation animation with following animateTransform and see if you get the output you want,

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />

这篇关于动画SVG元素每x秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！