您的位置:首页> HTML5教程> SVG教程

SVG animateTransform变换动画

2018-9-13 09:30| 作者: admin| 查看: 3512| 评论: 0|来自: 蚂蚁部落

SVG提供的动画元素主要有如下几个:

(1).<set>:在指定的时间之后执行指定的动画,具体参阅SVG animation动画一章节。

(2).<animate>:基础动画元素,实现单属性的动画效果,具体参阅SVG animation动画一章节。

(3).<animateTransform>:实现transform变换动画效果。

(4).<animateMotion>:实现路径动画效果,具体参阅SVG animateMotion路径动画一章节。

本章节将通过代码实例详细介绍一下<animateTransform>元素的用法。

animateTransform是animate+transform的组合,很明显是对svg元素transform变换的动画操作。

关于transform变换可以参阅以下几篇文章:

(1).SVG transform用法详解一章节。

(2).SVG transform变换深入理解一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:250px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="20" y="20"
        width="50" height="50"
        fill="blue">
  </rect>
  <animateTransform
                    xlink:href="#ant"
                    attributeName="transform"
                    begin="0s"
                    dur="3s"
                    type="scale"
                    from="1" to="2"
                    repeatCount="indefinite" />
</svg>
</body>
</html>

上面的代码可以在3秒内,将举行放大2倍,下面介绍一下相关属性。

attributeName、begin、dur、from、to和repeatCount参阅SVG animation动画一章节。

type属性:

此属性用来规定transform的变换类型。

from、to和by属性:

这两个属性基本用法可以参阅SVG animation动画一章节。

这里再通过一个代码实例做一下加强,如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  margin:100px;
}
</style>
</head>
<body>
<svg width="500" height="250" >
  <rect
        x="50" y="50"
        width="50" height="50"
        fill="red">
    <animateTransform
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 75 75"
                      to="360 75 75"
                      dur="2"
                      repeatCount="indefinite" />
  </rect>
</svg>          
</body>
</html>

上面的代码可以设置矩形围绕点(75,75)进行旋转,这和transform变换的语法是想通的。


鲜花

握手

雷人

路过

鸡蛋
返回顶部