整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天侃完了transform中的幾個屬性（縮放 scale、旋轉 rotate、移動 translate）的基本使用方法,今天就讓我們來一起看一下利用transform制作的動畫特效吧。
今天，就以卡通小鳥旋轉動畫特效為例吧，希望大家喜歡，哈哈。
首先，我們先來div布局
<div class="bird">
<div class="big"></div>
<div class="middle"></div>
<div class="small"></div>
</div>
然后，添加css樣式
*{margin:0; padding:0; list-style:none;}
body{
background:#27283b;
}
.bird{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
cursor:pointer;
}
.big{
position:absolute;
top:0;
left:0;
border-radius:50%;
border-color:transparent transparent #d72928 #db3e3d;
border-width:100px;
border-style:solid;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.middle{
position:absolute;
top:10%;
left:10%;
border-radius:50%;
border-color:#f8d245 transparent #f2f2f2 #fff;
border-style:solid;
border-width:80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.small{
position:absolute;
top:30%;
left:30%;
border-radius:50%;
border-color:transparent #f7a703 transparent transparent;
border-style:solid;
border-width:40px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
最后，添加動畫效果，讓卡通小鳥動起來。
.bird{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
cursor:pointer;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}
.big{
position:absolute;
top:0;
left:0;
border-radius:50%;
border-color:transparent transparent #d72928 #db3e3d;
border-width:100px;
border-style:solid;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.middle{
position:absolute;
top:10%;
left:10%;
border-radius:50%;
border-color:#f8d245 transparent #f2f2f2 #fff;
border-style:solid;
border-width:80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small{
position:absolute;
top:30%;
left:30%;
border-radius:50%;
border-color:transparent #f7a703 transparent transparent;
border-style:solid;
border-width:40px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small:before{
content:"";
background:#000;
width:20px;
height:20px;
border-radius:50%;
position:absolute;
top:-10px;
right:20px;
}
.bird:hover .big{
transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-moz-transform:rotate(225deg);
border-color:transparent transparent #1fe8b6 #16d7a7;
}
.bird:hover .middle{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
border-color:transparent #f8d245 #fff #f2f2f2;
}
.bird:hover .small{
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
border-color:transparent #f7a703 transparent transparent;;
}
卡通小鳥頭像旋轉動畫特效這就大功告成了，喜歡的小伙伴們是不早已迫不及待的動手試一下了呢。
鍵詞云
在之前文章《前端開發-JavaScript鍵盤控制及動畫實現（Sky Angel）》中，我們給出了一個簡單網頁應用（game）的開發。其中涉及到了鍵盤的控制，通過使用鍵盤事件處理用戶點擊操作行為。文本主要介紹JavaScript對象的生成（new）及對象的銷毀。
展示效果
在該應用中需要將飛機、小鳥及降落傘、星星等作為對象處理。使用對象表示的好處在于通過屬性設置實現各對象關鍵信息進行存儲與描述，如繪圖坐標的位置，繪圖的圖片資源等。本例要求降落傘、星星、小鳥出現位置隨機（頂端降落的x坐標隨機，右側出現的y坐標隨機），小鳥的樣式共提供了四種樣式，需要隨機繪制不同類型的小鳥（小鳥飛行狀態樣式可通過CSS動畫實現，本例使用canvs繪圖功能實現）。其他素材已在前文描述，不再贅述。本例小鳥需要最終實現飛行狀態。因此素材提供為Gif格式，該格式Canvs繪圖不支持，因此需要將其轉為png或者jpeg格式圖片組。具體操作過程描述如下：
1、素材處理
素材處理主要借助PhotoShop將gif格式圖片轉換為多張png或者jpeg格式圖片。本例涉及到gif格式提供的素材為birds，共4個不同的gif動態圖片。其中素材1的gif圖片展示如下：
bird素材1
因此我們需要借助PS實現格式轉化，并按照轉化之后的名字進行分組保存。因此可以生成4組指定小鳥的飛行狀態png圖片，部分效果描述如下：
飛行狀態圖片組
2、加載圖片資源
使用canvas 對應的drawImage方法進行動畫的繪制，需要首先加載圖片資源。本例小鳥圖片資源的加載主要通過new Image對象實現。由于每個對象對應四個狀態，因此我們使用到了數組。部分帶實現代碼如下：
鳥類圖片資源加載
采用如上數組形式保存了每一個狀態的圖片資源，在繪圖過程中可切換選擇四個不同狀態最終實現小鳥飛行的動態效果。
3、對象創建、定位及數組存儲
為保證程序開發過程中代碼的整潔及操作的方面，我們設計對小鳥采用類進行抽象，通過小鳥類的數組表示所創建的所有小鳥對象。這樣的話可以在一個?周期（setinterval）中實例化一個小鳥對象。在動畫?周期內，改變小鳥位置即可。小鳥類設計描述如下：
bird對象
小鳥對象需要間隔一定時間周期生成新的小鳥對象，因此我們定義了bird數組用于存儲所有的小鳥對象，生成新的小鳥對象就是向該數組中添加新的元素即可。實現部分代碼描述如下：
實例化bird對象
小鳥對象的生成描述如上圖，該應用要求小鳥出現的Y軸坐標隨機，因此我們采用random隨機函數是實現對其y軸坐標進行隨機數的生成，即y軸方向的初始化定位。
4、對象的移動及銷毀
在生成小鳥對象之后，需要實現小鳥由屏幕右側向左側移動效果，方法較為簡單，即修改bird的x屬性值。由于在屏幕中出現的小鳥可能多個。小鳥是數組表示的，因此在動畫?周期內，通過循環遍歷bird數組，繪制所有的小鳥。實現代碼啊描述如下：
遍歷繪制bird
小鳥飛行動畫最終實現圖片繪制描述如上所示，其中變量bflag用于標識4種飛行狀態，即實現狀態的切換。作為通過new操作符是生成的bird對象，如果不去主動銷毀，在程序執行過程中將一直生成對象，消耗內存資源。這是我們所不希望的，因此需要在小鳥飛行到最左側時進行判斷，如超出邊界將其從數組中刪除，即可釋放資源。我們采用循環形式遍歷該數組，進行判斷，然后刪除，實現代碼描述如下：
銷毀越界對象
實際執行過程中，當其他對象與小鳥對象相撞時也需要銷毀小鳥對象，實現此功能主要通過邊緣檢測實現，即判斷對象之間的坐標位置關系，如有興趣可自行練習。
以上給出游戲Sky Angel 對象創建、定位及銷毀實現思路及相關代碼，如有問題可在評論區討論。本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！相關文章鏈接如下：
前端開發-JavaScript鍵盤控制及動畫實現（Sky Angel）
前端開發-使用JavaScript canvas實現動態儀表盤效果
前端設計-教你如何快速繪制HTML5動畫
tml：<div id="bird"><img src="a.png" alt=""></div>
css：
*{ padding: 0; margin: 0; }
#bird{ width: 98px; height: 109px; position: absolute; }
.dir-37{ transform: rotateY(180deg); }
.dir-38{ transform: rotate(-60deg); }
.dir-40{ transform: rotate(60deg); }
js：
$(function(){
var step=20;
var code=39;
//屏幕的寬度
var dWidth=$(window).width();
var dHeight=$(window).height();
//小鳥的寬度
var birdWidth=$("#bird").width();
var birdHeight=$("#bird").height();
var off=$("#bird").offset(); //top left
$(document).keydown(function(e){ //當鍵盤按下后觸發的事件
var keycode=e.keyCode;
// console.log(keycode);
if(keycode!=code){
$("#bird").removeClass().addClass("dir-"+keycode);
}
code=keycode;
switch(keycode){
case 37:
off.left-=step;
if(off.left<=-birdWidth){
off.left=dWidth;
}
break; //left
case 38:
off.top-=step;
if(off.top<=-birdHeight){
off.top=dHeight;
}
break;//up
case 39: //right
off.left+=step;
if(off.left>=dWidth){
off.left=-birdWidth;
}
break;
case 40:
off.top+=step;
if(off.top>=dHeight){
off.top=-birdHeight;
}
break;//down
}
$("#bird").offset(off);
})
})
圖片隨意，我是隨意截了個圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
