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

SVG keyPoints 属性

2018-10-17 15:58| 作者: admin| 查看: 1352| 评论: 0|来自: 蚂蚁部落

keyPoints是路径动画元素<animateMotion>的属性。

关于上述动画元素的具体用法参阅SVG animateMotion路径动画一章节。

动画在不同的运行时段可能具有不同的特征,可以通过keyPoints属性为动画分段。

keyPoints属性值介于0-1之间,使用分号分隔。

代码实例如下:

[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 
    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"
    calcMode="linear"
    keyPoints="0;0.4;0.8;1"
    keyTimes="0;0.1;0.6;1"
    fill="freeze">
  </animateMotion> 
 
  <rect id="ant"
    x="0" y="0"
    width="20" height="20"
    fill="green"/>
</svg>          
</body>
</html>

代码分析如下:

(1).使用keyPoints属性将整个动画分为三段。

(2).keyTimes规定动画每一段所花费的时间,必须与keyPoints分段对应起来。

使用values也可以分段,不过对一个比较复杂的线性动画有点超过其能力,对于简单线性规则动画还可以。

关于keyTimes可以参阅calcMode, keyTimes和keySplines属性一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

返回顶部