成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

svg系列：2. svg path實(shí)現(xiàn)圖片路徑動(dòng)畫(huà)

zhangyucha0 / 1546人閱讀

摘要：于年月日成為推薦標(biāo)準(zhǔn)。注意繪制復(fù)雜的路徑應(yīng)盡可能借助設(shè)計(jì)工具，人為計(jì)算的屬性耗時(shí)耗力，也不是目前的學(xué)習(xí)重點(diǎn)。動(dòng)畫(huà)方面，使用控制的屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，這個(gè)屬性可以將繪制為虛線。

原文鏈接

為了之后產(chǎn)品可能的動(dòng)畫(huà)需求，我們需要調(diào)研各種可行的前端動(dòng)畫(huà)技術(shù)。相信CSS3動(dòng)畫(huà)和JS動(dòng)畫(huà)我們平常已經(jīng)接觸很多了，而SVG技術(shù)則很少用，事實(shí)上SVG也是一種強(qiáng)大的動(dòng)畫(huà)解決方案，可以幫我們解決傳統(tǒng)動(dòng)畫(huà)做不到的技術(shù)痛點(diǎn)。

SVG簡(jiǎn)介

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

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

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

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

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

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

SVG可以繪制許多形狀，這里不一一介紹，重點(diǎn)介紹下svg path，它是svg形狀中功能最為強(qiáng)大的一個(gè)，也是我們前端動(dòng)畫(huà)會(huì)經(jīng)常用到的形狀。

顧名思義，path定義的是一組路徑，你可以用path元素繪制矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其他的形狀，例如貝塞爾曲線、2次曲線等曲線。path元素的形狀是通過(guò)它的 d 屬性決定的，d屬性中通常以字母為命令，如下所示：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

以下path 定義了一個(gè)三角形：它開(kāi)始于位置150 0，到達(dá)位置75 200，然后從那里開(kāi)始到225 200，最后在150 0關(guān)閉路徑。

注意：繪制復(fù)雜的path路徑應(yīng)盡可能借助設(shè)計(jì)工具，人為計(jì)算path的d屬性耗時(shí)耗力，也不是目前的學(xué)習(xí)重點(diǎn)。

path的其他常用屬性有：

stroke 定義路徑顏色

stroke-width 定義路徑寬度，單位像素

stroke-dasharray 用于創(chuàng)建虛線

fill 定義path閉合區(qū)域的填充顏色

基于svg path實(shí)現(xiàn)圖片路徑動(dòng)畫(huà)

點(diǎn)擊這里查看demo：

WPS Logo Demo

這個(gè)效果的實(shí)現(xiàn)并不復(fù)雜，首先我們需要wps logo的svg資源，可以借助photoshop 和 Adobe Illustrator 從圖片中生成svg路徑。

第一步，使用ps魔棒工具去除白色背景，并選中路徑，然后右鍵，建立工作路徑：

點(diǎn)擊菜單-> 文件 -> 導(dǎo)出 -> 導(dǎo)出路徑到ai ：

在ai中選中路徑，存儲(chǔ)為svg格式。然后在編輯器中打開(kāi)svg即可查看到path的d屬性了！

之后，在代碼里創(chuàng)建svg圖形，并指定其stroke-width等屬性。

動(dòng)畫(huà)方面，使用css animation控制path的stroke-dasharray屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，這個(gè)屬性可以將path繪制為虛線。

如 stroke-dasharray: 10px 20px; 就定義了實(shí)線的長(zhǎng)度是10px，空白的長(zhǎng)度是20px，如下圖所示：

利用這個(gè)原理，我們將實(shí)線的長(zhǎng)度從0逐漸變?yōu)閜ath總長(zhǎng)度，將空白的長(zhǎng)度逐漸變?yōu)?，就可以實(shí)現(xiàn)類似“繪圖”的效果了~

#wps-logo-path {
  animation: wpsLogo 3s ease-in-out forwards;
}

@keyframes wpsLogo {
    0% {
        stroke-dasharray: 0 1078px;
    }
    100% {
        stroke-dasharray: 1078px 0;
    }
}

path的總長(zhǎng)度可以這樣計(jì)算 $("#wpsLogoPath")[0].getTotalLength()

動(dòng)畫(huà)過(guò)程中，可以設(shè)置監(jiān)聽(tīng)，在動(dòng)畫(huà)的不同階段執(zhí)行不同的鉤子函數(shù)：

document.addEventListener("webkitAnimationEnd", function(e) {

}

代碼中，我們還定義了線性漸變，用來(lái)填充path閉合區(qū)域內(nèi)的背景值，fill: url(#wpslinear)

到這一步，svg path動(dòng)畫(huà)的demo就基本做完了，我們可利用這個(gè)原理實(shí)現(xiàn)更復(fù)雜的svg path動(dòng)畫(huà)，如多個(gè)path的過(guò)渡動(dòng)畫(huà)，物體沿不規(guī)則path移動(dòng)等等。svg技術(shù)本身還是很復(fù)雜的，短時(shí)間掌握svg有一定的難度，必要時(shí)可以借助svg動(dòng)畫(huà)庫(kù)實(shí)現(xiàn)需要的設(shè)計(jì)效果，做到技術(shù)靈活服務(wù)于產(chǎn)品。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116034.html

相關(guān)文章

  • svg系列：2. svg path實(shí)現(xiàn)圖片路徑動(dòng)畫(huà)

    摘要：于年月日成為推薦標(biāo)準(zhǔn)。注意繪制復(fù)雜的路徑應(yīng)盡可能借助設(shè)計(jì)工具，人為計(jì)算的屬性耗時(shí)耗力，也不是目前的學(xué)習(xí)重點(diǎn)。動(dòng)畫(huà)方面，使用控制的屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，這個(gè)屬性可以將繪制為虛線。 原文鏈接 為了之后產(chǎn)品可能的動(dòng)畫(huà)需求，我們需要調(diào)研各種可行的前端動(dòng)畫(huà)技術(shù)。相信CSS3動(dòng)畫(huà)和JS動(dòng)畫(huà)我們平常已經(jīng)接觸很多了，而SVG技術(shù)則很少用，事實(shí)上SVG也是一種強(qiáng)大的動(dòng)畫(huà)解決方案，可以幫我們解決傳統(tǒng)動(dòng)畫(huà)做不到的...

    Honwhy 評(píng)論0 收藏0

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

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

    wwolf 評(píng)論0 收藏0

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

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

    DirtyMind 評(píng)論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開(kāi)發(fā)者第一次接觸手寫(xiě)那種，雖然很多情況都有設(shè)計(jì)師使用來(lái)完成這項(xiàng)工作，但還是不排除需要利用到的每個(gè)元素。輕量級(jí)，具備靈活的來(lái)自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字效果 早上無(wú)意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開(kāi)始以為是gif動(dòng)畫(huà)之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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