国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動(dòng)畫世界

wwolf / 3519人閱讀

摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫如果你問我為什么用做動(dòng)畫，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。

1、 svg知識掃盲 svg簡介

SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。

SVG1.1 于 2003 年 1 月 14 日成為 W3C 推薦標(biāo)準(zhǔn)。

SVG本質(zhì)上是用XML語言描述的，所以它可以和DOM結(jié)構(gòu)一樣被CSS和JS編程控制，通過連續(xù)地改變SVG圖形屬性就可以創(chuàng)建SVG動(dòng)畫。

SVG可用文本編輯器編輯，也可通過Adobe Illustator等專業(yè)編輯軟件處理。

SVG文件可多帶帶使用，使用XML定義并包含DTD聲明：

在現(xiàn)代瀏覽器中，我們可以直接在HTML代碼中嵌入SVG代碼：
元素

即標(biāo)簽，svg有三個(gè)視圖相關(guān)的屬性：

viewport 即用x, y, width, height定義的頁面矩形區(qū)域

viewbox 定義用戶視野的位置和大小，如 viewBox ="20 20 100 100" 定義了起始坐標(biāo)為(20, 20)，寬高為100的矩形區(qū)域，演示地址

preserveAspectRatio 保持橫縱比，當(dāng)viewport和viewbox 長寬比不一致時(shí)，該屬性可以控制2者的對齊和裁剪情況，演示地址 

用法
 []
align: xMid xMin xMax 和 YMid YMin YMax 自由組合 
e.g. preserveAspectRatio  = "xMidYMid meet"

基本圖形元素

svg繪制基本圖形元素，只要明確好各個(gè)參數(shù)的含義，應(yīng)該很簡單，老鐵們快速過一遍：

矩形，rx，ry定義圓角

圓 cx cy 定義圓心

橢圓 rx ry 定義長軸半徑、短軸半徑

線段

折線 點(diǎn)與點(diǎn)之間用空格隔開

多邊形

路徑，可以繪制上述所有圖形 d屬性定義路徑的具體形式

文字 dx dy是相對起點(diǎn)坐標(biāo)的偏移量，rotate指定單個(gè)文字的旋轉(zhuǎn)
示例文字
其他常用標(biāo)簽元素

主要有

      等

可以參考這個(gè) codepen 演示 來理解。

2、svg動(dòng)畫

why svg？如果你問我為什么用svg做動(dòng)畫，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)：

svg本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于web矢量圖繪制，適用于多數(shù)商業(yè)logo，卡通圖片制作。因此高清屏幕使用svg可避免模糊現(xiàn)象。（與此相關(guān)，canvas則是用來繪制點(diǎn)陣圖（或者說位圖），兩者是相對的）

基于不規(guī)則path的動(dòng)畫效果，如路徑描邊（path draw），路徑變體（path morph），沿路徑運(yùn)動(dòng)（path move）等，這是目前其他技術(shù)不太容易處理的。

除了path，svg也支持漸變、裁切、遮罩等特性，在其他技術(shù)遇到瓶頸時(shí)，不妨考慮svg。這里是一個(gè)用到大量svg技術(shù)的網(wǎng)站 welikesmall，可以參考里面的效果實(shí)現(xiàn)。

輕量，且兼容性好。svg于2003年已成為web標(biāo)準(zhǔn)，通常幾十行svg代碼就可解決特定的需求。svg在未來也有著可觀的發(fā)展前景。

SVG + SMIL 實(shí)現(xiàn)動(dòng)畫

SMIL 動(dòng)畫 Demo
基于SMIL標(biāo)準(zhǔn)，可以直接借助svg animate標(biāo)簽實(shí)現(xiàn)動(dòng)畫。

目前SMIL動(dòng)畫多數(shù)都可以用css3來代替，但要讓某個(gè)物體沿著特定路徑移動(dòng)，css3就無能為力了（除了chrome46新增的motion-path）。

遺憾的是，SMIL標(biāo)準(zhǔn)正逐漸衰落，并不會成為未來世界的主流，它正逐漸被css3所代替，所以我們只需簡單了解svg中的SMIL特性即可。

set 元素可以在特定時(shí)間后，瞬間修改圖形元素的某個(gè)屬性值，它不是動(dòng)畫，是一種突變。

animate元素定義在圖形元素里面，它可以改變圖形某一個(gè)屬性的值，需要指定起始值和結(jié)束值（from to）以及持續(xù)時(shí)間（dur）

animateMotion它可以引用一個(gè)事先定義好的動(dòng)畫路徑，用元素引用，讓圖形按路徑定義的方式運(yùn)動(dòng)。

類似于css transform，它可以改變圖形的transform屬性，e.g. rotate | translate | scale | skewX | skewY

svg + css3 或 svg + js 實(shí)現(xiàn)動(dòng)畫

snap.svg 動(dòng)畫 Demo
通過css或js修改svg圖形的屬性也可實(shí)現(xiàn)動(dòng)畫，這種方式也是目前最常用的。這就涉及到其他的知識點(diǎn)了，css3的transform，transition，animation等，js的setInterval和requestAnimationFrame。除了用原生代碼控制，我們當(dāng)然也可以用業(yè)界已經(jīng)成熟的動(dòng)畫庫來操作屬性：

anime.js （15kb左右，github 20k star, 最輕量，推薦使用）

velocity.js (50kb左右，不依賴jq，號稱比css動(dòng)畫快)

snap.svg.js (svg中的jQuery，專業(yè)操作svg，80kb左右)

GreenSock (100kb左右，動(dòng)畫功能齊全，部分插件收費(fèi))

// animejs api 
var animation= anime({
  targets: "#svg-path", // 目標(biāo)元素，支持css選擇器，dom，dom數(shù)組等
  opacity: "0", 要變化的屬性，這里是opacity屬性，可以是任何css或svg屬性
  duration: 3000,
  delay: 1000,
  easing: "easeInOutQuart",
  loop: true,
  direction: "reverse", // 動(dòng)畫方向：逆向播放
  complete: function(anim) {
  }
});

常見的圖形屬性如下所示：

fill 定義填充顏色

fill-opacity 定義填充透明度

stroke 邊框顏色

stroke-width

stroke-opacity

stroke-linecap 單條線端點(diǎn)樣式 butt | round | square

stroke-dasharray 定義虛線樣式，間隔定義實(shí)線和空白的長度，如 10 5 5 10

stroke-dashoffset 設(shè)置虛線描邊偏移量，使圖案向前移動(dòng)

opacity

font-size | font-weight | font-family | font-style | text-decoration 同CSS

transform | transform-origin 同CSS

rotate svg獨(dú)有，定義 單個(gè)文字 的旋轉(zhuǎn)角

d 路徑的描述屬性

3、相關(guān)工具網(wǎng)站

由于svg技術(shù)過于強(qiáng)大，此文章只是拋磚引玉，更多精髓等待大家發(fā)掘：

method draw | 在線制作svg圖片
svgo | 強(qiáng)大的svg壓縮工具
svg trick | 一個(gè)研究svg技術(shù)的網(wǎng)站
vivus | 制作svg路徑動(dòng)畫的js庫
snap.svg.js | svg中的jquery
snap.svg中文文檔
鑫空間，鑫生活 | 博主對svg和css研究很深

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54782.html

相關(guān)文章

  • svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動(dòng)畫世界

    摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫如果你問我為什么用做動(dòng)畫，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...

    DirtyMind 評論0 收藏0

  • SVG基礎(chǔ)教程(超級詳細(xì))

    摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補(bǔ)刀，它會自動(dòng)在基礎(chǔ)上生成一個(gè)對稱點(diǎn)，所以指令只需要兩個(gè)點(diǎn)就可以。二次貝塞爾曲線是控制點(diǎn)，表示的是曲線的終點(diǎn)。 一、內(nèi)置圖形: rect(矩形) circle(圓) ellipse(橢圓) line(直線) polyline(折線) polygon(多邊形) path(路徑) 二、內(nèi)置圖形的html屬性或(css樣...

    張憲坤 評論0 收藏0

  • svg animation動(dòng)畫應(yīng)用

    摘要：建議直接用同學(xué)給的編輯器打開后直接引用，因?yàn)樨惾麪柷€真的不是隨便就能住的。。。 最近在做首頁動(dòng)畫的時(shí)候，引入有背景色的mp4動(dòng)圖時(shí)，動(dòng)圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現(xiàn)了下圖這種尷尬的情況： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 動(dòng)圖的邊界始終有根分界線，即使調(diào)整了背景色適應(yīng)...

    spacewander 評論0 收藏0

  • svg animation動(dòng)畫應(yīng)用

    摘要：建議直接用同學(xué)給的編輯器打開后直接引用，因?yàn)樨惾麪柷€真的不是隨便就能住的。。。 最近在做首頁動(dòng)畫的時(shí)候，引入有背景色的mp4動(dòng)圖時(shí)，動(dòng)圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現(xiàn)了下圖這種尷尬的情況： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 動(dòng)圖的邊界始終有根分界線，即使調(diào)整了背景色適應(yīng)...

    peixn 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<