1. 程式人生 > >如何使用css3繪製任意角度扇形+動畫

如何使用css3繪製任意角度扇形+動畫

本文參考自:

http://jingyan.baidu.com/article/c910274be4dd69cd371d2d48.html

這裡只是做下原理解釋

原理:使用兩個半圓做角度拼接。

比如想繪製一個缺口朝右,缺口弧度30度角的扇形


那麼將由一個旋轉65度角的半圓A+一個旋轉-65度角的半圓B組合而成。

程式碼:

<style>
.outer{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(65deg);
clip: rect(0px,100px,200px,0px);/* 這個clip屬性用來繪製半圓,在clip的rect範圍內的內容顯示出來,使用clip屬性,元素必須是absolute的 */
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an1 2s infinite linear;*/
}


.pie{
    position: absolute;
width: 200px;
height: 200px;
transform: rotate(-65deg);
clip: rect(0px,100px,200px,0px);
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an2 2s infinite linear;*/
}

</style>

<div class="outer"></div>
 <div class="pie"></div>

這樣可以繪製0-360任意角度的扇形了。

然後,我們要繪製一個會動的扇形,比如這個缺口一開一合,向貪吃蛇一樣。

css3提供了animation屬性,本文只考慮chrome,因此只加了-webkit-animation,需要相容的同學另行處理。

1.解開上面兩個css中註釋掉的部分:-webkit-animation

然後增加如下css

/**動畫*/
@-webkit-keyframes an1{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(90deg);}
       100%{transform: rotate(0deg);}
}


@-webkit-keyframes an2{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(-90deg);}
       100%{transform: rotate(0deg);}
}

這樣讓A半圓在2秒內從0旋轉到90在旋轉到0

讓B半圓在2秒內從0旋轉到-90在旋轉到0

剛好完成一次開閉的動作。

ps:

上面的半圓是通過clip產生的,假設我的場景是這個扇形的位置是變化的,比如貪吃蛇的場景,那麼使用clip就不合適了。

下面採取另外一種方法

<style>
.outer{
position: absolute;
width: 100px;
height: 200px;
border-radius: 100px 0 0 100px; /* 繪製半圓,採用只繪製左上角,左下角的方法,因此需要將寬度設定為高度的一半*/
transform: rotate(0deg);
transform-origin: 100% 50%;/* 這個很重要,需要設定旋轉中心,預設旋轉中心是元素的中間,但是我們繪製的是半圓,因此旋轉中心應該是 100%寬度,50%高度*/
background-color: yellow;
-webkit-animation: an1 1s infinite linear;
}


.pie{
    position: absolute;
width: 100px;
height: 200px;
transform: rotate(0deg);
transform-origin: 100% 50%;
border-radius: 100px 0 0 100px;
background-color: yellow;
-webkit-animation: an2 1s infinite linear;
}


/**動畫*/
@-webkit-keyframes an1{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(90deg);}
       100%{transform: rotate(0deg);}
}


@-webkit-keyframes an2{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(-90deg);}
       100%{transform: rotate(0deg);}
}


.ct{
position: absolute;
width: 200px;
height: 200px;
}


</style>

<div class="ct" id="ctx">
  <div class="outer"></div>
  <div class="pie"></div> 
 </div>

<script type="text/javascript">
 
 var left = 0;
 var ctx = document.getElementById("ctx");


 setInterval(function () {
 left+=10;
 if(left>400){
 left=0;
 }
 ctx.style.left=left+"px";
 },1000);
</script>

效果可以看到,一個會動的圓形在往右邊一動,缺口一開一合.