calcMode, keyTimes和keySplines 屬性

admin發表於2019-03-06

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屬性值都是用分號分隔的。

上述文章對三個屬性進行了較為詳細的介紹，如果有任何問題可以在文章底部留言一起進行探討。

相關文章