快捷导航

栏目导航

calcMode, keyTimes和keySplines属性

2018-2-6 22:38| 发布者: admin| 查看: 587| 评论: 0|来自: 钱柜手机网页版

关于动画的更多内容可以参阅如下几篇文章:

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

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

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

下面通过代码实例介绍一下标题中几个属性的作用。

calcMode属性用来规定动画片段的效果,也就是说可以将一个完整的动画分割若干片段,并且为这些动画片段规定相应的执行效果。

此属性具有四个属性值:

(1).linear:默认值,动画给多个动画片段平均分配时间,并且每一个动画片段都是匀速进行。可以使用keyTimes属性来指定不同的时间点,但是每一步动画还都是线性的。特别说明:animateMotion路径动画的calcMode属性默认值是paced。

(2).discrete:没有动画效果,直接从初始状态跳跃到终止状态。

(3).paced:和linear有一点类似,不过它规定动画在整个执行期间都是以相同的速度进行;keyTimes会失效。

(4).spline:允许改自定义动画片段的过渡效果;使用keySplines属性来实际定义各个动画过渡效果的easing函数。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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="10s"
           begin="click"/>
</svg>          
</body>
</html>

上面动画分割为两段,linear属性会平均分配时间,每一段动画的执行时间是5s,且都是匀速执行。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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="10s"
           begin="click"/>
</svg>          
</body>
</html>

discrete也会给动画片段平均分配时间,然而并没有动画效果。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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="10s"
           begin="click"/>
</svg>          
</body>
</html>

paced会根据dur时间在整个动画期间匀速运动。

由于spline比较复杂,它放在最后介绍,先介绍keyTimes属性。

keyTimes属性类似于css3的@keyframes属性,具体可以参阅CSS3 @keyframes一章节。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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>

如果我们把整个dur时间看作1,那么keyTimes就是如何分割这个时间,值是介于0-1之间。

values属性值需要和keyTimes属性值相对应,也就是规定某一个时间段动画移动指定的尺寸。

特别说明:values的优先级要高于from、to和by。

calcMode="spline":

规定此属性值,目的是为了使用keySplines;如果calcMode属性值不是spline,那么即使定义keySplines也无效。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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;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,比keyTimes少一个值。

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-11 13:35 , Processed in 0.108182 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部