日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

SVG 動(dòng)畫元素用于為SVG圖形制作動(dòng)畫。動(dòng)畫元素最初是在同步多媒體集成語言（SMIL）中定義的。在動(dòng)畫中，必須指定屬性，運(yùn)動(dòng)，顏色，動(dòng)畫的開始時(shí)間和動(dòng)畫的持續(xù)時(shí)間的開始和結(jié)束值。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、烏蘭察布網(wǎng)站維護(hù)、網(wǎng)站推廣。

可以對(duì)SVG圖像中的形狀進(jìn)行動(dòng)畫處理。有幾種不同的動(dòng)畫SVG形狀的方法。

一、SVG動(dòng)畫

這是一個(gè)簡(jiǎn)單的SVG動(dòng)畫。

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
  
  
  
 
  
  
  
  
      
  
  
  
         style="stroke:#ff0000; fill: #0000ff"> 
  
  
  
  
 
  
  
  
  
          
  
  
  
            attributeName="transform" 
  
  
  
  
            begin="0s" 
  
  
  
  
            dur="20s" 
  
  
  
  
            type="rotate" 
  
  
  
  
            from="0 60 60" 
  
  
  
  
            to="360 60 60" 
  
  
  
  
            repeatCount="indefinite" 
  
  
  
  
        /> 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
 
 
 

運(yùn)行效果：

注意元素如何在元素 內(nèi)部嵌套。正是這個(gè)元素使矩形動(dòng)畫化。

二、動(dòng)畫選項(xiàng)概述

這些SVG動(dòng)畫元素中的每一個(gè)都設(shè)置或設(shè)置SVG形狀的不同方面的動(dòng)畫。這些動(dòng)畫元素將在本文的其余部分中進(jìn)行說明。

1. set

該set元素是SVG動(dòng)畫元素中最簡(jiǎn)單的元素。在經(jīng)過特定時(shí)間間隔后，它只是將屬性設(shè)置為特定值。因此，形狀不會(huì)連續(xù)進(jìn)行動(dòng)畫處理，而只是更改屬性值一次。

這是一個(gè)元素示例：

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
      
  
  
  
         to="100" 
  
  
  
  
         begin="5s"  /> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 

注:

元素在特定時(shí)間設(shè)置屬性的值。要設(shè)置的屬性名稱在attributeName屬性中指定。將其設(shè)置為的值在to屬性中指定。設(shè)置屬性值的時(shí)間在begin屬性中指定。

運(yùn)行效果：（r在5秒鐘后將屬性設(shè)置為100）：

2. attributeType

可以設(shè)置形狀的CSS屬性的動(dòng)畫。如果這樣做，則需要將attributeType設(shè)置為CSS。如果不提供attributeType屬性，則瀏覽器將嘗試猜測(cè)要制作動(dòng)畫的屬性是XML屬性還是CSS屬性。

3. animate

animate元素用于為SVG形狀的屬性設(shè)置動(dòng)畫?？梢詫nimate元素嵌套在要應(yīng)用的形狀內(nèi)。

示例

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
      
  
  
  
             from="30"  to="470" 
  
  
  
  
             begin="0s" dur="5s" 
  
  
  
  
             fill="remove" repeatCount="indefinite"/> 
  
  
  
  
   
  
  
  
  
 
 
 
 

運(yùn)行效果：

解析:

此示例將元素的cx屬性從值30（“from”屬性）設(shè)置為值479（“to”屬性）的動(dòng)畫。動(dòng)畫從0秒開始（“begin”屬性），持續(xù)時(shí)間為5秒（“dur”屬性）。

動(dòng)畫完成后，動(dòng)畫屬性將設(shè)置回其原始值（fill=“remove”屬性設(shè)置）。如果希望動(dòng)畫屬性保持動(dòng)畫的“到”值(to-value)，請(qǐng)將“fill ”屬性設(shè)定為“freeze”。動(dòng)畫無限期重復(fù)（“repeatCount”屬性）。

4. animateTransform

元素不能做到這一點(diǎn)，元素可以為形狀的Transform屬性設(shè)置動(dòng)畫。

例：

 
 
 
 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
                  
  
  
  
                 repeatCount="indefinite" /> 
  
  
  
  
             
  
  
  
  
         
 
 
 

運(yùn)行效果：

解析：

例中對(duì)嵌套transform其中的元素的屬性進(jìn)行動(dòng)畫處理。該type屬性設(shè)置為rotate（旋轉(zhuǎn)變換功能），表示動(dòng)畫變換將是旋轉(zhuǎn)。在from和to屬性設(shè)定的參數(shù)進(jìn)行動(dòng)畫，并傳遞給rotate函數(shù)。本示例圍繞點(diǎn)100,100從0度旋轉(zhuǎn)到360度。

使正方形的比例動(dòng)畫化。

示例

運(yùn)行效果：

注：

from 和 to 屬性包含通常作為參數(shù)傳遞給scale()轉(zhuǎn)換函數(shù)的值。

三、總結(jié)

本文基于HTML基礎(chǔ)，介紹了SVG中元素。對(duì)每一種動(dòng)畫的效果進(jìn)行詳細(xì)講解。每一種動(dòng)畫中都采用靜態(tài)圖解析的方式來呈現(xiàn)動(dòng)態(tài)運(yùn)用的效果。通過具體的案例分析，能夠讓讀者更好的理解。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。

當(dāng)前文章：一篇文章帶你了解SVG 動(dòng)畫元素
當(dāng)前路徑：http://www.5511xx.com/article/cdsphhg.html