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

摘要: css3，jquery，

基本动画实现方法

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

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