calcMode, keyTimes和keySplines 属性

2019-3-6 16:05| 作者: admin| 查看: 793| 评论: 0|来自: 蚂蚁部落

SVG动画可以通过一些属性进行更为精确的控制,以适应实际需求。

标题中的属性可以在一定程度上满足上述需求,关于SVG动画的基本用法可以参阅如下几篇文章:

(1).SVG animation 动画一章节。

(2).SVG animateTransform 变换动画一章节。

(3).SVG animateMotion 路径动画一章节。

下面结合代码实例介绍一下标题中三个属性的功能。

一.calcMode:

我们知道,可以将一个完整的SVG动画划分为几个片段去执行,此属性就是用来规定每一个动画片段的动画表现。

此属性具有四个属性值,分别如下:

(1).linear:默认属性值,它规定每一个片段平均划分总得动画持续时间,在每一个片段中动画匀速进行。

(2).discrete:此单词翻译成汉语是"非连续"的意思,恰如其名,它同样规定每一个片段平均划分总的动画持续时间,但是并没有动画效果,而是瞬时完成。

(3).paced:它规定整个动画效果始终以相同的速度进行,设置keyTimes属性无效。

(4).spline:此属性值能够让我们自定义动画效果,使用keySplines属性来定义各个动画过渡效。

特别说明:路径动画calcMode默认值是paced,也就是说并不是所有动画calcMode默认属性值是linear。

纯理论阐述比较晦涩,也不利于理解,下面通过代码演示一下每一个属性的功能。

[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:200px;
    margin:50px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="ant"
      x="10" y="10"
      width="50" height="50"
      fill="blue"/>
    <animate xlink:href="#ant"
      attributeName="x"
      calcMode="linear"
      values="10;30;150"
      dur="4s"
      begin="click"/>
</svg>          
</body>
</html>

代码分析如下:

(1).点击蓝色矩形可以开始动画效果,整个动画持续时间为4秒。

(2).动画通过values属性划分为两个阶段,在x轴方位(10至30)与(30至150)。

(3).这两个阶段动画持续时间相同,也就是都是2秒。

(4).动画在这两个阶段都是允许进行。

[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:200px;
    margin:50px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="ant"
      x="10" y="10"
      width="50" height="50"
      fill="blue"/>
    <animate xlink:href="#ant"
      attributeName="x"
      calcMode="discrete"
      values="10;30;150"
      dur="4s"
      begin="click"/>
</svg>          
</body>
</html>

代码分析如下:

(1).点击蓝色矩形可以开始动画效果,整个动画持续时间为4秒,但是没有动画效果,都是瞬间完成。

(2).动画通过values属性划分为两个阶段,在x轴方位(10至30)与(30至150)。

(3).这两个阶段动画持续时间相同,也就是都是2秒。

(4).点击按钮之后,需要等待2秒,然后瞬时完成第一阶段,再等待两秒,再瞬时完成第二阶段。

[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:200px;
    margin:50px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="ant"
      x="10" y="10"
      width="50" height="50"
      fill="blue"/>
    <animate xlink:href="#ant"
      attributeName="x"
      calcMode="paced"
      values="10;30;150"
      dur="4s"
      begin="click"/>
</svg>          
</body>
</html>

将属性值设置为"paced"之后,动画效果比较耿直,动画阶段无论如何划分,都是匀速执行。

比如上述代码,动画划分为两个阶段,点击按钮后,动画会从头到尾保持相同速度完成。

考虑到文章的可读性,spline属性值放到最后介绍,首先介绍一下keyTimes属性值。

二.keyTimes属性:

从属性的名称大致可以猜测它的功能,可以为动画各个阶段指定动画持续时间。

首先看一段代码实例:

[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:200px;
  margin:50px;
}
</style>
</head>
<body>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="ant"
      x="10" y="10"
      width="50" height="50"
      fill="blue"/>
    <animate xlink:href="#ant"
      attributeName="x"
      calcMode="linear"
      values="10;30;40;60;80;140;160"
      keyTimes="0;0.15;0.3;0.45;0.6;0.75;1"
      dur="10s"
      begin="click"/>
  </svg>
</body>
</html>

代码分析如下:

(1).点击矩形框可以开始动画效果。

(2).通过values属性为整个动画划分阶段。

(3).keyTimes可以为values规定的动画阶段规定对应的执行时间。

将整个动画持续过程看做1,keyTimes值对0-1这个这个时间段进行划分区间与value规定的值对应起来。

三.keySplines属性:

当calcMode属性值为"spline"的时候,keySplines属性才会生效。

首先看一段代码实例:

[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:200px;
  margin:50px;
}
</style>
</head>
<body>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="ant"
      x="10" y="10"
      width="50" height="50"
      fill="blue"/>
    <animate xlink:href="#ant"
      attributeName="x"
      calcMode="spline"
      values="10;60;140;160"
      keyTimes="0;0.3;0.8;1"
      keySplines="0.42 0 1 1;
        0 0 0.59 1;
        0.42 0 1 1;"
      dur="10s"
      begin="click"/>
  </svg>
</body>
</html>

keySplines属性值是一组三次贝塞尔控制点(默认0 0 1 1)。

每个控制点使用4个浮点值表示:x1 y1 x2 y2,值范围0~1。

三次贝塞尔曲线可以参阅SVG <path>元素C指令三次贝塞尔曲线一章节,网上有专门的贝塞尔曲线生成工具。

特别说明:values、keyTimes和keySplines属性值都是用分号分隔的。

上述文章对三个属性进行了较为详细的介绍,如果有任何问题可以在文章底部留言一起进行探讨。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部