前端實現動畫的方法總結

目錄

• 1. css3的transition 屬性

• 2. css3的transform 屬性

• 3. css3的animation 屬性

• 4. Jquery的animate函數

• 5. 使用插件

• 6. 原生JS動畫

• 7. 使用canvas繪製動畫

• 8. 使用gif圖片

• 9. CSS動畫和JS動畫的優缺點

1. css3的transition

transition屬性： 用來設置樣式的屬性值是如何從一種狀態平滑過渡到另外一種狀態
語法：

transition: property duration timing-function delay;

transition是一種簡寫屬性,它可以拆分爲四個過渡屬性：
即，你可以transition: 值1，值2，值3，值4這樣寫；
也可以：transition-property: 值1 transition-duration:值2 transition-timing-function:值2 transition-delay:值4這樣寫；

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果需要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果何時開始。

演示代碼：

<div></div>

div{
	width:50px;
	height: 50px;
	background-color: pink;
}
div:hover{
	width:200px;
}

效果圖：

由上圖可看出：鼠標移入移出時,width狀態的變化是瞬間完成的。
添加transition: 1s;後

div{
	width:50px;
	height: 50px;
	background-color: pink;
	transition: 1s;
}
div:hover{
	width:200px;
}

效果圖：

transition: 1s; 設置了width屬性狀態變化的過渡時間爲1秒。
transition屬性默認爲：transition: all 0 ease 0;
transition:1s; 等價於 transition: all 1s ease 0;

第三個參數transition-timing-function速度曲線的值可以爲以下：

• ease (默認值) 逐漸變慢
• linear 勻速
• ease-in 加速
• ease-out 減速
• ease-in-out 先加速後減速
• cubic-bezier(x1,y1,x2,y2) 貝塞爾曲線

對不同的樣式做不同的變化，該怎麼寫？
用逗號,隔開即可；
演示代碼：

<div></div>

div{
	width:50px;
	height: 50px;
	background-color: pink;
	transition: width 1s,height 2s,background-color 3s;
}
div:hover{
	width:200px;
	height:100px;
	background-color: black;
}

效果圖：

2. css3的transform

transform屬性：應用於元素的2D或3D轉換，可以用來設置元素的形狀改變，如：
rotate（旋轉）、scale（縮放）、skew（扭曲）、translate（移動）和matrix（矩陣變形）
語法：

transform: none | transform-functions;

none表示不做變化；
transform-functions表示一個或多個變化函數
W3C transform屬性

演示代碼：

<div class="container">
	<div class="item item1">rotate(30deg)</div>
	<div class="item item2">scale(2)</div>
	<div class="item item3">rotate(30deg)</div>
	<div class="item item4">skew(30deg,10deg)</div>
</div>

.container{
	width:200px;
	margin:0 auto;
	background: #ccc;
}
.item{
	width:60px;
	height: 60px;
	background-color: pink;
	margin-bottom:60px;
	font-size:12px;
}

效果圖：

添加樣式：

.item1{
	transform: rotate(30deg); /*順時針旋轉30度*/
}
.item2{
	transform: scale(2); /*放大爲2倍*/
}
.item3{
	transform: translate(50px,50px);/*水平垂直移動50px*/
}
.item4{
	transform: skew(30deg,10deg); /*水平扭曲30度，垂直扭曲10度*/
}

效果圖：

通常transform變化 和 transition過渡 是組合使用的。
演示代碼：

 <div></div>

div{
	width:100px;
	height:100px;
	background-color: pink;
	margin: 100px;
	transition: all 1s;
}
div:hover{
	transform: scale(2) rotate(360deg);
}

效果圖：

transform-origin基點

• 根據上圖可以看出元素是根據中心點旋轉放大的。
• 這個中心點就是當前設置的基點
• 所有的變形都是基於基點，默認基點爲元素中心。
• 可以通過transform-origin: (x, y)來設置基點；
  其中x 和y的值可以是百分比、rem或者是 px 等等，也可以用表示位置的單詞來表示例如：x可以用left、center、right；y 可以用top、center、bottom；

演示代碼：

<div></div>

div{
	width:100px;
	height:100px;
	background-color: pink;
	margin: 100px;
	transition: all 1s;
}
div:hover{
	transform: scale(2) rotate(360deg);
	transform-origin:right bottom;
}

效果圖：

3. css3的animation

animation屬性：比較類似於 flash 中的逐幀動畫。學習過 flash的同學知道，這種逐幀動畫是由關鍵幀組成，很多個關鍵幀連續的播放就組成了動畫
在 CSS3 中是由屬性keyframes來完成逐幀動畫的

animation屬性與transition屬性的區別：

• transition只需指定動畫的開始和結束狀態，整個動畫的過程是由特定的函數控制,你不用管它。
• animation可以對動畫過程中的各個關鍵幀進行設置

演示代碼：

<div></div>

div{
	width:50px;
	height:50px;
	background-color: pink;
}
div:hover{
	animation: change1 5s;
}
@keyframes change1{
	25%  {width:130px;background-color: red;}
	50%  {width:170px;background-color: blue;}
	75%  {width:210px;background-color: green;}
	100% {width:250px;background-color: yellow;}
}

效果圖：

4. Jquery的animate()方法

• animate() 方法執行 CSS 屬性集的自定義動畫。
• 該方法通過 CSS 樣式將元素從一個狀態改變爲另一個狀態。
• CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
• 只有數字值可創建動畫（比如 “margin:30px”）。字符串值無法創建動畫（比如 “background-color:red”）。
  W3C jQuery animate() 方法

代碼演示：

<button id="btn1">使用動畫放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height:"300px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height:"100px"});
    });
});

效果圖：

5. 使用插件

• GSAP
  github：https://github.com/greensock/GSAP
• Anime.js
  官網：https://www.animejs.cn/
• Wicked CSS
  https://www.bypeople.com/wicked-css-animation-library/
• Animate CSS
  https://daneden.github.io/animate.css/
• CSShake
  https://github.com/elrumordelaluz/csshake
• Mo.js
  https://github.com/mojs/mojs
• Animate Plus
  https://github.com/bendc/animateplus
• Bounce.js
  https://github.com/tictail/bounce.js/
• Magic
  https://github.com/miniMAC/magic
• AniJS
  https://github.com/anijs/anijs

很多很多。。。

6. 原生JS動畫

這裏給出我用JS寫的小遊戲：

• JS版小黃臉大戰(DOM (html+css+js))
• JS貪喫蛇小遊戲(DOM (html+css+js))
• JS掃雷小遊戲(DOM (html+css+js))

7. 使用canvas繪製動畫

這裏給出我用canvas寫的小遊戲：

• JS打磚塊小遊戲 canvas繪製
• JS五彩連珠小遊戲(Canvas繪製)

8. 使用gif圖片

技術角度很low,用戶體驗沒影響。
๑乛◡乛๑看着來吧。。。

9. CSS動畫和JS動畫的優缺點

CSS動畫

• 優點：

  • 瀏覽器可以對動畫進行優化
  • 代碼相對簡單,性能調優方向固定
  • 對於幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外代碼

• 缺點：

  • 運行過程控制較弱,無法附加事件綁定回調函數
  • 代碼冗長，想用CSS實現稍微複雜一點動畫,最後CSS代碼都會變得非常笨重

JS動畫

• 優點：

  • 控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
  • 動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,衝擊閃爍,視差滾動效果，只有js動畫才能完成
  • CSS3有兼容性問題，而JS大多時候沒有兼容性問題

• 缺點：

  • 代碼的複雜度高於CSS動畫
  • JavaScript在瀏覽器的主線程中運行，而主線程中還有其它需要運行的JavaScript腳本、樣式計算、佈局、繪製任務等,對其干擾導致線程可能出現阻塞，從而造成丟幀的情況

總結：

• 代碼複雜度方面
  簡單動畫：css代碼實現會簡單一些，js複雜一些。
  複雜動畫的話：css代碼就會變得冗長，js實現起來更優。
• 動畫運行時，對動畫的控制程度上
  js 比較靈活，能控制動畫暫停，取消，終止等
  css動畫不能添加事件，只能設置固定節點進行什麼樣的過渡動畫。
• 兼容方面
  css 有瀏覽器兼容問題
  js大多情況下是沒有的。
• 性能方面
  css動畫相對於優一些，css 動畫通過GUI解析
  js動畫需要經過js引擎代碼解析，然後再進行 GUI 解析渲染。

css動畫是黑盒的，你只按它的使用要求告訴他從哪個狀態到哪個狀態要產生動畫

js動畫是白盒的，你需要去編寫代碼去描述 狀態-時間，比如代碼“每隔10毫秒，某dom元素left加1px，直到1000ms停止”