【原創】關於前端動畫的幾種實現方式和總結

基本動畫實現方法

1，最先的動畫，是經過a連接的，僞類hover來實現。主要有背景色，背景邊框的改變。

2，接下來，是用js原生實現一些樣式的改變，如.getElementById('div1');  
          div1.style.backgroundColor="red";  等等

3，而後，jquery出來了，它封裝了一些動畫，讓動畫實現更簡單，它們是：show hide slideDown slideUp  fadeIn ，和animate等等

4，而後，css3出現了，css3的改變很是大，主要有2D的轉化，

• translate()
• rotate()
• scale()
• skew()
• matrix()等

以及3D轉換，過渡，以及 @keyframes動畫規則。

hover動畫 http://web.chacuo.net/css3transition

----------------------------------以上均爲常見動畫實現方式---------------------------------

進階動畫實現方法探索

寫在進階篇前面的話，爲何須要進階？進階是對動畫實現效果有更高要求的同窗們，

一，先講jquery的進階：

jquery自己自帶庫並不能實現帶有緩衝的動畫，自定義動畫animate函數，須要一個外部插件來協助它來更優雅的完成緩衝彈性動畫。

【插件介紹】

這個插件是：jquery.easing.min.js

它的動畫方式有以下：

• linear
• swing
• jswing
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

具體效果請自行去測試。

【調用方式】
配合animate使用。

備註：marginLeft這裏須要駝峯寫法。而不是margin-left；另外animate函數不支持display，那麼下面的none和block更加不能用。解決辦法：用css的opacity屬性。

$(".right").animate({ 
	                    	marginLeft:0,
						}, 500, 'easeOutCubic');

$(".right").animate({ 
                            marginLeft:0,
                        }, 500, 'easeOutCubic');  

 

二，關於css3的的動畫進階：

 1，貝塞爾曲線動畫

【貝塞爾定義】
cubic-bezier 又稱三次貝塞爾，主要是爲 animation 生成速度曲線的函數，規定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

【在線設置】
貝塞爾曲線在線設置（中文）：http://yisibl.github.io/cubic-bezier/#.09,1.65,.45,-0.61 

貝賽爾曲線在線設置（英文）：http://cubic-bezier.com/#.17,.67,.83,.67

這裏有更多的參數能夠配，好比寬，高，透明度等。http://web.chacuo.net/css3beziertool

以下圖：

【如何使用？】

html

<div class="box">貝塞爾曲線</div>

css（貝塞爾曲線動畫添加到了css3的transition中去了。）

.box{ width:100px; height: 100px; background: #999; transition: all 1000ms cubic-bezier(0.170, 0.960, 0.725, -0.355);} /*過渡*/
/*.box:hover{transform: translate(1000px);}*/
.box_selected{ transform: translate(1000px);}/*轉換-位移*/

transition 是一個過渡複合屬性，複合寫法如左邊：transition: all 1s ease 0；（4個值分別對應下表↓：）

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

此處的貝塞爾曲線，只不過是替換了默認的 ease，（也就是速度曲線。）

備註：

1，第二個值，transition-duration 請務必填寫，不然爲0，則不會產生過渡效果。

2，第三個值，transition-timing-function ，默認有以下值↓：

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義本身的值

 js

$(function(){
				$(".box").click(function(){
					$(this).addClass("box_selected")
				})
				
			})

2，第三方的css庫animate.css, 以及hover.css
animate.css的使用方法分2種：

1，直接樣式引入，如<div class="box animated flipInY"></div>

這樣你的動畫就會在頁面載入時產生動畫；

2，配合jquery，在頁面作點擊，或者其餘鼠標事情時，追加樣式，以下代碼：

$('#yourElement').addClass('animated bounceOutLeft');

animate.css 在github的地址 https://github.com/daneden/animate.css

animate.css 動畫在線測試地址：https://daneden.github.io/animate.css/

 

三，H5的SVG動畫（此爲高進階，未完待續...）

配合path來操做，改變對象的形態來實現動畫。

例如水珠滴下的超動感彈性動畫。