<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何使用SVG及其動畫技術為你的 Web 前端開發帶來一些新鮮的體驗

          時間:?2017-11-14閱讀:?1061標簽:?svg

          任何有開發經驗的前端工程師都會考慮到不成體系的設備生態所帶來的挑戰。設備間不同的屏幕尺寸、分辨率和比例使得產品難以提供一致的體驗,對于那些對產品有著像素級完美追求的人這種體驗差異尤其顯著! SVG(可縮放的矢量圖形)完美地解決了上文中提到的部分問題。盡管 SVG 有它的局限性,但是在某些場景下是非常有用的,如果你有一個好的設計團隊,你也可以基于SVG創建一些震撼的視覺體驗,而不必擔心給瀏覽器帶來過重的渲染負擔或阻礙頁面的加載時間。

          在過去的幾個月里,我一直在做一個大量使用了 SVG 及其動畫效果的項目。在本文中,我將介紹如何使用SVG及其動畫技術為你的 Web 前端開發帶來一些新鮮的體驗。


          可縮放矢量圖形

          SVG 是一種基于 XML 文檔的圖片格式,所以大部分情況其特性表現類似于 HTML。它為許多常見的幾何圖形定義了不同的元素,通過組合這些不同的形狀元素可以生成 SVG 二維圖形。SVG 規范是由萬維網聯盟(W3C)于1999制定的標準,所有的主流瀏覽器目前均支持了 SVG 的渲染。由于 SVG 圖形是 XML 文檔,因此 Web 瀏覽器提供的 DOM 相關的 API,同樣可作用于與 SVG 圖形的交互。

          SVG 路徑

          如果要說出 SVG 中最強大的元素,毫無疑問是 (路徑元素)。 路徑元素是一個可以構建出你所能想象的幾乎任何高級的2D圖形的基本形狀。路徑元素通過一系列繪圖命令來生效,它非常類似于1967年的 Logo 編程語言,不同的是它只是更現代化的,為復雜花哨的圖形而設計的。這些繪圖命令如下圖所示,被寫在路徑元素的 d 屬性中 :

          <!-- A right-angled triangle -->
          <path d="M10 10 L75 10 L75 75 Z" />


          你可以把它想象成一支虛擬的畫筆在屏幕上作畫,而路徑元素的 d 屬性中的繪圖命令控制著畫筆的走向。上圖的示例中,畫筆一開始移動到起點坐標 (10,10) (M10 10),以 (75,10)為終點畫直線(L75 10),接著又畫一條直線至 (75,75) (L75 75),最后的 Z 表示畫筆回到起點坐標以閉合路徑。

          使用一些其他的繪圖命令,例如繪圓弧(A)、二次貝塞爾曲線(Q)、三次貝塞爾曲線(C)等等,你可以在 SVG 中創建出很多組合的形狀和矢量圖形。

          你可以點擊這里了解更多關于路徑元素的知識 >> path element。


          SVG 路徑與 CSS

          也許你會問:“好吧我知道 Paths 很強大,但是我怎樣才能對它做路徑動畫呢?”。

          因此我們第一步需要利用到 SVG 的兩個屬性: stroke-dasharray 和 stroke-dashoffset 。

          stroke-dasharray 屬性可以控制圖案描邊路徑的樣式,如果你并不想用連續的直線去繪制路徑,而希望通過一些不同樣式的虛線,你就可以使用這個屬性。

          由于 SVG 圖形其實也是瀏覽器 DOM 的組成部分,因此 stroke-dasharray 作為一個控制外觀的屬性,也可以直接用作一個 CSS 樣式屬性,達到同樣的設置效果。

          類似的,stroke-dashoffset 屬性(虛線在原路徑下的偏移量)也同樣可以使用 CSS 來進行設置。

          這兩個屬性的組合使用可以生成 SVG 路徑動畫,給人一種圖案的輪廓線逐漸擬合的視覺感受。

          例如下面這個二次貝塞爾曲線的例子:


          <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

          為了平穩流暢地繪制出這個路徑,首先我們需要通過 stroke-dasharray 屬性設置虛線段的長度,將 stroke-dasharray 屬性的值設為該路徑的長度。這樣的話就將虛線的每一段 dash 和 gap 的長度等于整段路徑的長。

          下一步我們需要使用 stroke-dashoffset 屬性將虛線的偏移量設置為 0,此時我們看到的路徑描邊就是沒有間斷的連續曲線(實際上看到的是虛線段的第一段,前面已經設置每一虛線段的長度等于該曲線的長)。通過設置虛線偏移量等于曲線的長度,那該曲線恰好“消失”(實際上看到的是虛線段的一段間隙)。

          通過 stroke-dashoffset 屬性,同時結合 CSS3 的 animation,你可以讓該曲線一點點的出現在屏幕上,這就是 SVG 路徑動畫的原理。

          <svg width="300px" height="175px" version="1.1">
          
             <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
          
          </svg>
          svg {
           width: 300px;
           display: block;
           position: absolute;
           .path {
             stroke-dasharray: 320;
             stroke-dashoffset: 0;
             animation: dash 1s linear;
           }
           @keyframes dash {
             from {
               stroke-dashoffset: 320;
             }
             to {
               stroke-dashoffset: 0;
             }
           }
          }


          可以看到,我們只是改變了虛線的偏移來讓虛線段的部分一點一點地出現。

          運用相同的原理來設置多條路徑的動畫,可以得到更炫酷的效果:

          <svg width="300px" height="175px" version="1.1">
           <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
           <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
           <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
          </svg>
          
          svg {
           width: 300px;
           display: block;
           position: absolute;
          }
          
          svg .line1 {
           stroke-dasharray: 340;
           stroke-dashoffset: 40;
           animation: dash 1.5s linear alternate infinite;
          }
          
          svg .line2 {
           stroke-dasharray: 320;
           stroke-dashoffset: 320;
           animation: dash2 1.5s linear alternate infinite;
          }
          
          @keyframes dash {
           from {
             stroke-dashoffset: 360;
           }
           to {
             stroke-dashoffset: 40;
           }
          }
          
          @keyframes dash2 {
           from {
             stroke-dashoffset: 280;
           }
           to {
             stroke-dashoffset: -40;
           }
          }
          

          上面在 SVG 中畫了3條路徑:其中一條是固定的黑色曲線, 有一條沿著路徑移動的紅色曲線,后面跟著另一條黑色曲線。

          stroke-dasharray 和 stroke-dashoffset 是創造大量 SVG 路徑動畫所要用到的兩個重要屬性,你可以點擊這里(一個方便的小工具)來體會這兩個屬性。


          沿 SVG 路徑的動畫對象

          通過 SVG 和 CSS,我們可以讓一個對象或者元素沿著 SVG 路徑做一些動效,過程中我們會用到兩個屬性:

          • offset-path:offset-path 是一個 CSS 屬性,它表示元素的運動路徑;

          • offset-distance:同樣是一個 CSS 屬性,定義了元素在路徑上運動的距離,單位是數值或百分比;

          通過組合使用這兩個屬性,你可以非常容易地創建出類似下面的動畫:

          <svg width="300px" height="175px" version="1.1">
             <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
          </svg>
          <div class="ball"></div>
          
          svg {
           width: 300px;
           display: block;
           position: absolute;
          }
          
          .ball {
           width: 10px;
           height: 10px;
           background-color: red;
           border-radius: 50%;
           offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
           offset-distance: 0%;
           animation: red-ball 2s linear alternate infinite;
          }
          
          @keyframes red-ball {
           from {
             offset-distance: 0%;
           }
           to {
             offset-distance: 100%;
           }
          }

          上面我們讓一個 div.ball 的元素動了起來,同樣的我們可以對任何元素( div , image , text...)做這種路徑動畫。在這個例子中我們簡單的用 offset-path 畫出了元素的運動路徑,然后用 offset-distance 控制元素在路徑上的運動距離從 0% 到100%。


          使用 JavaScript 做 SVG 動畫

          以上如果還不足以滿足你的動畫需求,你可以考慮借助 JavaScript。

          使用 JavaScript 對 SVG 元素做動畫與對 DOM 元素做動畫相似。然而我們可以更容易地實現上面提到的動畫效果。之前,我們需要將路徑長度硬編碼在 CSS 中。借助 JavaScript 的 path.getTotalLength() 函數可以獲取 DOM 上路徑的長度,你可以點擊這里了解更多。除此之外,有很多第三方庫可以幫助你十分容易地制作 SVG 動畫。

          Snap.svg 不僅可以使 JavaScript 繪制 SVG 圖形變得更容易,它的使用也異常簡單,只需要調用 .animate({}) 這個API即可。 另外一個庫 anime.js 通過幾行代碼就可以讓一個元素沿著 SVG 路徑運動,點擊這里 常看更多 DEMO。

          如果你需要一個本身已經為你做了大部分操作來生成復雜的動畫的庫,Vivus 是比較適合你的,它采取了一種不同的調用方式,僅需要通過配置項的方式去生成 SVG 路徑動畫。你只需要用你想作用的 SVG 元素的 id 來新建一個 Vivus 對象,然后就交給 Vivus 來處理剩下的事情。


          來源:http://mp.weixin.qq.com/s/vLiBG0YSQGieCO_7bIS7Cw


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/105

          svg的path的應用

          我們這里只要用到M L A 和Z命令就可以了,M L 和Z命令比較簡單,這里詳細講解A命令,A命令是畫弧的命令,里面的A命令有 7個參數:rx ry x-axis-rotation large-arc-flag sweep-flag x y

          svg生成環形進度條

          之前在項目中遇到一個環形進度條的需求,要求能實時更新進度,腦海中瞬間便蹦出css,svg,canvas3中方案,對于3種方案個人更偏向于svg,用法簡單,代碼量也很少,同時也便于實時控制。具體效果如下圖:

          使用SVG symbols建立圖標系統完整指南

          從最開始的使用img圖片,到后來的使用css sprite來減少服務器請求,再到流行的圖形字體化圖標Iconfont。現在,一種全新的圖標使用方式開始流行了起來——SVG symbols圖標。

          巧妙運用clip-path,實現CSS形狀變換

          CSS3的clip-path,這個clip-path看起來有點眼熟,因為它原本就存在于SVG里頭,利用掩碼(剪裁)的方法,連接坐標繪制掩碼區域,就可以做出許多不同的形狀,讓底色或底圖顯現,隨著瀏覽器對于CSS3的支持度大幅提升

          關于Data URLs svg圖片顯示出錯和瀏覽器URL hash #

          在使用生成的svg圖作為<img>標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下,在<img src=\\\"Data URLs\\\">中,Data URLs格式與顯示情況如下:

          SVG基礎圖形和D3.js

          學習如何使用D3.js來創建這些圖形?這里會包括前面例子中的SVG基礎圖形以及如何使用D3.js設置圖形的屬性。使用D3.js畫一個SVG 的 圓 circle,可以使用如下代碼創建:

          一步步教你用 CSS 為 SVG 添加過濾器

          SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重點將放在 SVG 的過濾器上 —— 但不只是將它們應用于 SVG 圖像,我將向你展示如何將它們應用于任何常規頁面的內容上。實際上我們是通過告訴 CSS 過濾器所擁有的 ID,然后再把過濾器應用于 SVG 的方式來實現。

          通過css改變svg img的顏色

          一般的解決辦法有:1.字體圖標改變css的color屬性;2.js在hover事件中切換圖片;3.老一點的方案是hover切換背景?但是為了更小的開銷,一般css為更好的解決方案

          封裝全局icon組件 svg (仿造element-ui源碼)

          引入 svg-sprite-loader 插件,vue-cli項目默認情況下會使用 url-loader 對svg進行處理,會將它放在/img 目錄下,所以這時候我們引入svg-sprite-loader 會引發一些沖突。使用 webpack 的 exclude和 include

          如何在vue項目中優雅地使用SVG

          安裝svg-sprite-loader。通過vue-cli腳手架創建的項目默認情況下會使用 url-loader 對svg進行處理,在static下新建svg文件夾,用來放置當做icon使用的svg,使用include,include和img做區分。然后修改webpack.base.conf.js配置,這樣svg-sprite-loader只會處理我們指定的static/svg下的文件

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网