前端实现动画的六种方式，够用！

引言

动画基本上分类两类：补间动画和帧动画。

补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。

帧动画：除了开始与结束状态，开发者还可以定义中间关键帧的状态，可以制作复杂的动画。

通常在前端中，实现动画的方案主要有6种：

javascript直接实现；SVG（可伸缩矢量图形）；CSS3 transition；（补间动画）CSS3 animation；（帧动画）Canvas动画；requestAnimationFrame；

javascript 直接实现动画

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

示例

#rect {

width: 200px;

height: 200px;

background: #ccc;

}

let elem = document.getElementById(rect);

let left = 0;

let timer = setInterval(function(){

if(left

elem.style.marginLeft = left px;

left ;

}else {

clearInterval(timer);

}

},16);

复制代码

Jquery的animate()方法就是这种方式实现的。

存在的问题

javascript 实现动画通常会导致页面频繁性