SVG - 動畫製作
阿新 • • 發佈：2022-05-03
SVG - 動畫製作
HTML5學堂：SVG - 動畫製作。上一篇文章講解了SVG的基本屬性，大家能夠利用SVG的基本屬性進行繪製圖像，那麼如何讓繪製好的影象動起來呢？今天要給大家分享的是SVG的動畫製作，具體我們來看看下面的內容吧。
接觸過HTML5的人，都知道，Canvas實現一個動畫，需要不斷的清除畫布再重新繪製，如果沒有接觸過Canvas也不要緊，SVG之後我們緊接著要為大家介紹的就是Canvas。SVG提供了比較方便的API介面，動畫實現起來比較方便，具體看看下面的動畫命令。
SVG 動畫基本命令
<set> 表示瞬間的動畫設定
<animate> 用於實現單屬性的動畫效果
<animateColor> 顏色發生動畫效果（也能夠使用animate進行操作，因此，可忽略）
<animateTransform> 變形類動畫
<animateMotion> 沿著某個路徑進行運動
SVG 動畫引數介紹
1、attributeName的屬性值是要變化的元素屬性名稱
2、attributeType = "CSS | XML | auto";如果你不提供一個attributeType屬性，那麼瀏覽器會嘗試猜測是一個XML屬性還是CSS屬性
3、from, to
from：動畫的起始值。
to：指定動畫的結束值。
4、begin, end
begin：指動畫開始的時間。begin的定義是分號分隔的一組值。
end：指定動畫結束的時間。與begin的取值方法類似。
5、dur
指定動畫的持續時間。可以取下面三者之一：大於0的數值、media和indefinite。該屬性值預設為indefinite，即無限長。
SVG示例1：<set> 動畫設定
<html> <head> <meta charset="UTF-8"> <title>HTML5學堂</title> <link rel="stylesheet" href="reset.css"> <style> .smile { border: 1px solid #999; } </style> </head> <body> <svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <rect x="100" y="10" width="220" height="60" fill="yellow"> <set attributeName="x" attributeType="XML" to="300" begin="1s"/> <!-- 如果你不提供一個attributeType屬性，那麼瀏覽器會嘗試猜測是一個XML屬性還是CSS屬性。 --> </rect> <text x="20" y="40" fill="red">set瞬間動畫設定</text> </svg> </body> </html>
SVG示例2：<animate> 動畫設定
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.smile {
border: 1px solid #999;
}
</style>
</head>
<body>
<svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="220" height="60" fill="yellow">
<animate attributeName="x" attributeType="XML" from="100" to="470" begin="0s" dur="5s" fill="remove" repeatCount="indefinite"/>
<!-- 當動畫完成，animate的屬性被設定回其原始值（fill="remove"）。如果想要的將動畫屬保持在to值的位置，則fill設定為"freeze"。動畫如果無限重複則設定repeatCount的值。 -->
</rect>
<text x="20" y="140" fill="red">animate用於實現單屬性的動畫效果</text>
</svg>
</body>
</html>SVG示例3：<animateTransform> 動畫設定
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.smile {
border: 1px solid #999;
}
</style>
</head>
<body>
<svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="200" width="220" height="60" fill="yellow">
<animateTransform attributeName="transform" type="rotate" from="0 50 220" to="360 50 220" begin="0s" dur="10s"repeatCount="indefinite"/>
</rect>
<text x="20" y="240" fill="red">animateTransform變形類動畫</text>
</svg>
</body>
</html>SVG示例4：<animateMotion> 動畫設定
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.smile {
border: 1px solid #999;
}
</style>
</head>
<body>
<svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<path d="M200,300 q60,50 100,0 q60,-50 100,0" stroke="#000000" fill="none"/>
<rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
<animateMotion path="M200,300 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite"/>
</rect>
<text x="20" y="300" fill="red">set瞬間動畫設定</text>
</svg>
</body>
</html>SVG 動畫效果綜合示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.smile {
width: 800px;
height: 400px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="#000000" fill="none"/>
<circle cx="0" cy="0" r="100" fill="yellow" stroke="black" stroke-width="1px">
<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="-50" cy="-20" r="20" fill="black">
<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="50" cy="-20" r="20" fill="black">
<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
</circle>
<clipPath id="faceClip">
<rect x="-100" y="40" width="220" height="60" />
</clipPath>
<circle cx="0" cy="0" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)">
<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
<!-- 註釋 -->
<!-- 清除路徑 clipPath -->
<!-- 簡單的理解就是畫一個路徑把它剪切出來 -->
<!-- 用於隱藏位於剪下路徑以外的物件部分。定義繪製什麼和什麼不繪製的模具被稱為剪下路徑 -->
<!-- 動畫 -->
<!-- path中可以使用M L 和 z。M表示將畫筆移動到某個位置，即moveTo L表示的是lineTo z則表示的是關閉路徑（closePath） -->
<!-- q表示的貝塞爾，也就是拐點的位置（Q表示絕對，q表示相對） -->
</body>
</html>SVG動畫效果圖
