【原创】关于前端动画的几种实现方式和总结

2019独角兽企业重金招聘Python工程师标准>>>

基本动画实现方法

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来操作，改变对象的形态来实现动画。

例如水珠滴下的超动感弹性动画。

转载于:https://my.oschina.net/u/583531/blog/916185