SVG animateMotion路径动画

2017-11-25 22:51| 作者: admin| 查看: 7879| 评论: 0|来自: 蚂蚁部落

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

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

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

(3).<animateTransform>:实现transform变换动画效果,参阅SVG animateTransform变换动画一章节。

(4).<animateMotion>:实现路径动画效果。

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

<animateMotion>可以让指定的图形元素沿着一条计算后所得路径进行运动。

首先看一段代码实例:

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M0,0 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M0,0 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="click"
                 fill="freeze">
  </animateMotion> 
  <g id="ant">
    <circle
          fill="red"
          fill-opacity="0.5"
          cx="0" cy="0"
          r="20"/>
    <circle
          fill="green"
          cx="0" cy="0"
          r="3"/>
  </g>
</svg>          
</body>
</html>

说明:动画元素具有大量重复属性,重复的不做介绍,参阅SVG animation动画详解一章节。

path属性:

此属性用来规定元素运动的路径,语法与<path>元素的d属性基本一致。

具体可以参阅SVG <path>路径元素一章节。

<animateMotion>的path属性规定的路径并不会显示,代码中红色路径是一个辅助线,便于观察效果。

深入介绍:

第一段代码中,圆的初始位置在左上角,被遮挡了部分区域,有点不便于观察。

所以我们把路径的起点,和圆心位置都修改一下:

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M20,20 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="click"
                 fill="freeze">
  </animateMotion> 
  <g id="ant">
    <circle
          fill="red"
          fill-opacity="0.5"
          cx="20" cy="20"
          r="20"/>
    <circle
          fill="green"
          cx="20" cy="20"
          r="3"/>
  </g>
</svg>          
</body>
</html>

代码运行不符合预期,虽然初始状态圆心位于路径的初始点,但是运行开始之后并没有沿着路径。

路径本质是一连串坐标点的连接;被引用的元素(也就是沿着路径运动的元素)实际运动路径的坐标是在元素初始坐标基础上,通过路径坐标对其进行translate()转换,例如元素的初始坐标是(10,10),路径对应当前点的坐标是(100,50),那么就进行如下转换:

[XML] 纯文本查看 复制代码
transform="translate(10 10) translate(100 50)"

关于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>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M20,20 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="click"
                 fill="freeze">
  </animateMotion> 
  <g id="ant">
    <circle
          fill="red"
          fill-opacity="0.5"
          cx="0" cy="0"
          r="20"/>
    <circle
          fill="green"
          cx="0" cy="0"
          r="3"/>
  </g>
</svg>          
</body>
</html>

我们将圆心坐标设置为(0,0),那么<animateMotion>元素path属性规定的路径坐标无论如何对被引用的元素进行translate()变换,运动的路径坐标都会落在<animateMotion>元素path属性规定的路径之上。

特别说明:路径动画开始后会有一个跳跃,这是因为元素的初始坐标在(0,0)位置,当开始动画,<animateMotion>元素path属性规定的路径坐标马上会对元素进行translate()变换。

<mpath>元素:

上面的代码都是通过<animateMotion>元素path属性来规定路径,其实我们可以在<animateMotion>元素中嵌套<mpath>元素来规定路径。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
#box {
  border:1px solid blue;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg id="box" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path
        id="path"
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 dur="10s"
                 begin="0s"
                 fill="freeze">
    <mpath xlink:href="#path" />
  </animateMotion> 
  <g id="ant" >
    <circle
          fill="red"
          fill-opacity="0.5"
          cx="0" cy="0"
          r="20"/>
    <circle
          fill="green"
          cx="0" cy="0"
          r="3"/>
  </g>
</svg>          
</body>
</html>

使用<mpath>元素可以引用外部定义好的路径,它的优先级要高于path属性定义的路径。

如果不想让路径显示,那么将路径嵌套在<defs>元素中即可。

rotate属性:

先来看一段代码实例:

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M20,20 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="0s"
                 fill="freeze">
  </animateMotion> 
 
  <rect id="ant"
        x="0" y="0"
        width="20" height="20"
        fill="green"/>
</svg>          
</body>
</html>

上面的代码实现了矩形沿着路径运动的效果,但是有点不符合实际情况,矩形的方向是固定不变的。

代码修改如下:

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M20,20 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="0s"
                 rotate="auto"
                 fill="freeze">
  </animateMotion> 
 
  <rect id="ant"
        x="0" y="0"
        width="20" height="20"
        fill="green"/>
</svg>          
</body>
</html>

为<animateMotion>添加rotate="auto"之后,矩形的路径运动就比较符合实际情况了。

auto属性值可以规定元素自动根据运动路径的角度(路径曲线的切线方向)来改变它的运动方向

再来看一段代码实例:

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M20,20 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="0s"
                 rotate="auto-reverse"
                 fill="freeze">
  </animateMotion> 
 
  <rect id="ant"
        x="0" y="0"
        width="20" height="20"
        fill="green"/>
</svg>          
</body>
</html>

和auto类似,不过矩形在内测切线上运行,也就是在auto的镜像位置。

rotate属性值也可以是一个具体的数字,表示旋转的度数。

keypoints属性:

由于篇幅原因,此属性的用法可以参阅SVG keypoints属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部