如何发布网络小说,长生界辰东小说,我欲封天txt下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

一篇文章帶你了解SVG 動畫元素

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

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

可以對SVG圖像中的形狀進行動畫處理。有幾種不同的動畫SVG形狀的方法。

一、SVG動畫

這是一個簡單的SVG動畫。

 
 
 
   
  
  
    
  
  
  
    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"   
  
  
          />

運行效果：

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

二、動畫選項概述

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

1. set

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

這是一個元素示例：

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

注:

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

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

2. attributeType

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

3. animate

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

示例

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

運行效果：

解析:

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

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

4. animateTransform

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

例：

 
 
 
   
  
  
     
  
  
                 
  
  
                    
  
  
  
                 repeatCount="indefinite" />

運行效果：

解析：

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

使正方形的比例動畫化。

示例

運行效果：

注：

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

三、總結(jié)

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

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

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

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

當(dāng)前名稱：一篇文章帶你了解SVG 動畫元素
文章分享：http://m.fisionsoft.com.cn/article/cdsphhg.html

新聞中心

其他資訊