幸运快三极速快3|极速快3猜大小
您的位置:首頁> HTML5教程> SVG教程

SVG keyPoints 屬性

2018-10-17 15:58| 作者: admin| 查看: 1221| 評論: 0|來自: 螞蟻部落

keyPoints是路徑動畫元素<animateMotion>的屬性。

關于上述動畫元素的具體用法參閱SVG animateMotion路徑動畫一章節。

動畫在不同的運行時段可能具有不同的特征,可以通過keyPoints屬性為動畫分段。

keyPoints屬性值介于0-1之間,使用分號分隔。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.iufrl.icu/" />
<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屬性一章節。


鮮花

握手

雷人

路過

雞蛋
返回頂部
幸运快三极速快3 网络棋牌输赢原理教程 时时彩最长历史记录 棋牌炸金花免费单机版 体彩金七乐玩法介绍 十三张棋牌游戏 ag体育真人 五分赛车是骗局吗 开一个小牛专卖店要多少钱 南粤二十六选五开奖 河北十一选五稳赚技巧