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

最近遇到一個(gè)問題，就是怎么做一個(gè)圓環(huán)放大的動(dòng)畫，如果是用transform: scale放大的話，會(huì)導(dǎo)致圓環(huán)變粗，這樣看起來就不好看了，如下圖所示：

如果改成用width/height做動(dòng)畫的話，動(dòng)畫看起來會(huì)有點(diǎn)變形，如下圖所示：

這個(gè)圓圈是用border-radius: 50%畫出來的，所以width/height變大的時(shí)候，圓圈的半徑就會(huì)變大，但是在變化的過程中變形了。如果改成用padding做動(dòng)畫，效果也一樣，那怎么辦呢？一個(gè)方法是把動(dòng)畫時(shí)間調(diào)小一點(diǎn)，這樣看起來會(huì)減輕，但終究不是根本解決辦法。

我在網(wǎng)上搜羅一番，也沒有找到好的辦法，有的是用JS動(dòng)態(tài)計(jì)算width/height，但其實(shí)是一樣的。

***我想到是不是可以用SVG來做動(dòng)畫呢？試了一下，果然可以。

首先要用SVG來畫，之前是用html + css的方式，現(xiàn)在要改一下。如下代碼所示：

circle表示畫一個(gè)圓，圓心在(11, 11)，半徑為8px，填充白色，描邊為#2492fc，如果你設(shè)置fill=”none”，那么填充色就為透明色。相信很多人對(duì)SVG比較陌生，這里我簡單介紹一下。除了circle，其它常用的畫圖標(biāo)簽元素如下圖所示：

還有一個(gè)畫路徑的path，如下圖所示：

這個(gè)是用一個(gè)在線SVG畫圖工具來出來的，畫完后會(huì)顯示SVG代碼。path里面可以使用貝塞爾曲線，它是一種很見的曲線，在CSS的animation也會(huì)用到，用來控制動(dòng)畫的速度：

貝塞爾曲線（三階）是根據(jù)四個(gè)點(diǎn)畫出一條光滑的曲線，這種矢量繪制曲線的方法在圖形學(xué)具有重大的意義。

SVG的基本元素就介紹到這里，現(xiàn)在討論下怎么做動(dòng)畫呢？我們應(yīng)該要做半徑的動(dòng)畫，如下圖所示，使用animate標(biāo)簽：

其中begin指定動(dòng)畫的開始時(shí)機(jī)，可以是indefinite表示***循環(huán)，或者指定具體的秒數(shù)，又或者是在某個(gè)動(dòng)畫之后，還可以是事件如mouseover/click/mouseout等，上面使用mouseover，即hover的時(shí)候，半徑會(huì)從小變成到大，如果希望鼠標(biāo)移開后能縮回去，那么可以再加一個(gè)amimate，如下代碼所示：

如果是希望用JS控制的話，可以獲取到這個(gè)animate元素，然后用它的beginElement方法開始動(dòng)畫，如下代碼所示：

 
 
 
 

  
  
  
  
// 如果選中的話，就做放大的動(dòng)畫 
  
  
  
  
if (checked) { 
  
  
  
  
    $("animate.magnify").beginElement(); 
  
  
  
  
} 
  
  
  
  
// 如果失去選中態(tài)的話就做縮小動(dòng)畫 
  
  
  
  
else { 
  
  
  
  
    $("animate.shrink").beginElement(); 
  
  
  
  
} 
 
 
 
 

這樣看起來動(dòng)畫就會(huì)優(yōu)雅很多，如下圖所示：

另外還可以用CSS的animation等控制SVG做動(dòng)畫。

上面只是介紹了最最簡單的SVG動(dòng)畫，更多復(fù)雜的效果可以見CSS Tricks的教程。例如可以做形狀的動(dòng)畫：

又如做一個(gè)沿著路徑運(yùn)動(dòng)的動(dòng)畫：

本篇最主要還是想說一件事：當(dāng)你發(fā)現(xiàn)用html不太好做動(dòng)畫時(shí)，可以嘗試用svg做一下，幾行svg就能做出一個(gè)很順滑的動(dòng)畫。例如這篇文章《Animating Border》介紹了幾種做border變粗的動(dòng)畫的方法，筆者先后使用了border-width/outline/clip-path/linear-gradient/box-shadow等，***效果其實(shí)都不太好，還不如直接用svg做一下。

【本文是專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過聯(lián)系原作者獲取授權(quán)】

網(wǎng)站名稱：怎樣做一個(gè)圓環(huán)放大的動(dòng)畫
標(biāo)題網(wǎng)址：http://www.5511xx.com/article/cdidjjc.html