svg動畫介紹1.svg的animate標籤<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="200px" height="30px" viewBox="0 0 200 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"><rect x="0" y="0" width="20" height="20" stroke="green" fill="none"> <animate attributeName="width" attributeType="XML" from="20" to="200" begin="2s" dur="5s" fill="freeze" /></rect></svg>效果如下圖：
解釋：以上代碼使20*20的正方形，停留2秒後，再用時5秒變成一個200*20的長方形，並且在動畫結束時停留在長方形的狀態。<animate>標籤的基本屬性：屬性名含義attributeName定義發生變化的元素屬性名attributeType當attributeType="XML"時，attributeName被認為是XML的屬性；當attributeType="CSS"時，attributeName被認為是css的屬性；不指定attributeType時，默認為"auto"，會先將attributeName作為css的屬性，如果無效，再將attributeName作為XML的屬性。from & to & byfrom和to分別定義發生變化的屬性的初始值和終止值。from可預設，表示初始值即為<animate>父元素相應的屬性值。可用by替換to，表示變化偏移量。可以理解為to = from + by。begin & dur & endbegin定義動畫開始時間；dur定義動畫所需時間；end定義動畫終止時間。時間單位h：小時；min：分鐘；s：秒；ms：毫秒。默認時間單位為sfill當fill="freeze"時，動畫終止時，發生變化的元素屬性值停留在動畫終止時的狀態；當fill="remove"時，動畫終止時，發生變化的元素屬性值回復到動畫起始時的狀態。fill屬性默認值為remove。repeatDur設置動畫執行的總時長。在repeatDur設置的時間內，動畫一直會重複執行。如果repeatDur小於dur，repeatDur的作用與end一樣。repeatCount設置動畫重複執行的次數。repeatDur和repeatCount都可以通過設置為indefinit實現無限循環動畫。當repeatDur和repeatCount同時作用於同一個<animate>時，動畫終止時間取兩者中較小值。複雜動畫之多節點變化的動畫1. 多個<animate>組合2. values屬性的運用<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"><rect x="0" y="12.5001" width="4" height="5.99984" fill="#FF6700"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="10" y="8.50008" width="4" height="13.9998" fill="#FF6700"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="20" y="5.49992" width="4" height="20.0002" fill="#FF6700"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect></svg>效果如下圖：
解釋：1.允許在同一個元素內嵌入多個<animate>;1. values屬性的應用：values屬性值表示一個動畫經過的節點數值，數值間以分號分割。複雜動畫之keyTimes和calcModekeyTimes屬性值與values屬性值一一對應，第一個數值永遠是0（表示起始時間點），最後一個數值永遠是1（表示終止時間點）,中間的數值表示變化到對應values屬性值時所處時間點百分比(0~1之間)。calcMode設置動畫運行的效果。有四種屬性值：paced, linear, discrete, spline。calcMode="paced"時，動畫會忽略keyTimes屬性，根據values數值以勻速變化。calcMode="linear"時，為calcMode的默認屬性值。動畫根據values和keyTimes屬性，在每個時間段內勻速變化。calcMode="discrete"時，動畫根據values和keyTimes屬性，去掉過渡動畫，到了keyTimes的某個節點，屬性值直接變為values對應數值。calcMode="spline"時，需要配合keySplines屬性，設置每個時間段內的三次貝塞爾變化曲線。<svg width="260" height="100" xmlns="http://www.w3.org/2000/svg"><text font-size="40" y="60" x="100">程序思維 <animate attributeName="x" dur="5s" values="0; 50; 100" keyTimes="0; .5; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" /> </text></svg>效果如下：
2. svg的<animateTransform>標籤實現transform屬性改變的動畫，需要使用<animateTransform>來替代<animate>。<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/> </path> </svg>效果如下圖：
解釋：<animateTransform>的attributeName指定為transform。用type屬性指定transform需要改變的屬性（translate, scale, rotate, skewX, skewY）。3.animateMotion之前所有動畫功能在css裡都可以用animation實現，但<animateMotion>可以讓父元素沿著指定的路徑運動。也可以使用path指定複雜的路徑，或者可以指定<mpath>元素作為自己的路徑。
效果如下：
解釋：小圓方塊即id為pedal沿著圓形即id為motionPath的路徑走。這就是<animateMotion>標籤的作用。λ CSS3動畫CSS3中有兩種實現動畫的方式transition和animation。1.transition用於實現較簡單的兩點動畫，即根據屬性的起始狀態和終止狀態，完整中間過渡動畫。transition的基本屬性:css屬性含義transition-property要運用動畫的屬性，可運用在多個屬性，逗號分隔transition-duration定義動畫執行時間，單位(s,ms)，可定義多個屬性，與transition-property一一對應，逗號分隔transition-timing-function要使用的動畫。默認值為ease。可選項有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)transition-delay定義動畫延遲多少時間後開始執行#box{transition-property:width, height; transition-duration:1s, 3s; transition-timing-function:ease-in, cubic-bezier(1,0,0,1); transition-delay:2s, 0.5s;}transition還可以簡寫，簡寫格式如下：transition:<single-transition> [ 『,』 <single-transition> ]<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>第一個<time>對應transition-duration，第二個<time>對應transition-delay。所以上面例子可以簡寫為：#box{ transition:width 1s ease-in 2s,height 3s cubic-bezier(1,0,0,1) .5s;}如上面所說：第一個<time>對應transition-duration，第二個<time>對應transition-delay。2. animation可以說是transition的高級版，配合@keyframes可以實現對動畫過程的多點控制。除了svg中延指定path路徑運動的動畫實現不了，其他都可以用animation來實現。其很多屬性與svg的<animate>元素屬性作用也能一一對應。animation的基本屬性:Css屬性含義對應svg的animate屬性animation-name它的值與@keyframes名對應attributeNameanimation-duration動畫所需時間duranimation-timing-function用三次貝塞爾曲線來設置動畫運行的效果。可以設的值有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)linear:勻速，線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)ease：默認。平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)ease-in由慢到快等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)ease-out由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)ease-in-out由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)。cubic-bezier(n,n,n,n) 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內calcMode屬性animation-iteration-count動畫重複執行的次數。默認為1。infinite表示無限重複repeatCountindefinit表示無限循環animation-delay動畫延遲執行時間可以用begin開始時間大於0來表示延遲多長時間執行動畫animation-fill-modeanimation-fill-mode有四個屬性值可選：none | forwards | backwards | both。forwards類似fill的freeze，動畫結束後保持最後一幀時的狀態。backwards這個功能svg裡沒有。backwards是配合animation-delay一起使用的，如果動畫延遲執行，那麼在開始執行之前處於延遲的這段時間內，動畫對象元素的默認狀態是其原始狀態，而非@keyframes的起始狀態。當animation-fill-mode設置成backwards時，動畫對象元素在延遲的這段時間內，將處於@keyframes設置的起始狀態。both相當於同時設置了forwards和backwards兩個屬性值。none是animation-fill-mode的默認屬性值，即動畫開始前和動畫結束後，對象元素均處於其原始狀態。類似<animate>的fill屬性，但有區別。有freeze和remove兩個值，默認為：remove。當fill="freeze"時，動畫終止時，發生變化的元素屬性值停留在動畫終止時的狀態；當fill="remove"時，動畫終止時，發生變化的元素屬性值回復到動畫起始時的狀態。animation-play-state控制動畫狀態。running表示讓動畫執行paused表示暫停動畫可以通過改變這個屬性來控制動畫的播放和暫停，pause改為running後不會讓元素重頭再執行一遍動畫，而是接著暫停時的狀態繼續變化。svg沒有控制動畫狀態的屬性animation-direction用於控制動畫是正向執行，或者反向執行，如果設置了animation-iteration-count重複執行次數，還能控制一次動畫執行完畢後，以何種方式執行接下去的一次動畫。有四個屬性值normal | reverse | alternate | alternate-reverse。normal默認屬性值，動畫正向執行，重複執行動畫時，每次都從起始狀態開始變化。reverse動畫反向執行，即從指定的終止狀態變化到起始狀態，重複執行動畫時，每次都從終止狀態開始變化。其中animation-timing-function設置的運動曲線也會被顛倒，原來的ease-in會變成ease-out的效果。alternate第一次執行動畫時，從起始狀態開始變化。重複執行動畫時，單次動畫結束後，下一次動畫以當前狀態作為起始狀態開始變化，以上一次動畫的起始狀態作為該次動畫的終止狀態，相當於執行一次reverse的動畫效果。alternate-reverse和alternate類似，但是第一次執行動畫時，從指定的結束狀態開始向起始狀態變化。svg沒有對應屬性<div id="round_loading"></div>動畫代碼：#round_loading {-webkit-animation: loading 1.5s infinite;animation: loading 1.5s infinite;-webkit-animation-delay: 0.25s; animation-delay: 0.25s;}@-webkit-keyframes loading { 75% { -webkit-transform: scale(0); }}@keyframes loading { 75% { transform: scale(0); -webkit-transform: scale(0); }}效果如下：
好了，就寫到這，我們總結了svg動畫和css3動畫常用的知識點，並且都舉了相關例子，截了效果圖，希望看文章的童鞋都能有所收穫。Css3動畫的使用是我們前端必須掌握的技能，而svg動畫，我認為大家只要會運用，知道svg動畫代碼什麼意思，並能根據實際開發項目做修改即可。歡迎繼續關注和收藏程序思維。我們一起學習，共同進步！