一、背景:
合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。
二、动画技术分类:
按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解。
1)JS动画
通过一个定时器setInterval间隔来改变元素样式,动画结束时clearInterval即可。(早期类库:jquery、prototype、mootools)
优缺点:
优点:可控性很强,兼容性较好
缺点:
1、性能不佳:因为需要不断获取和修改dom布局,所以导致了大量页面重排(repaint);
2、缺乏标准:不同的库使用了不同的API,导致即使是简单的动画也有各不相同的实现方式,调整起来比较耗时;
3、带宽消耗:相对丰富的动画库代码量都很大,结果就是增加了http请求的大小,降低了页面的载入时间。
2)css3动画
css3两种动画实现方式:一种是transition,一种是animation,animation相比transition使用起来更为复杂。
transition包含4种属性:transition-delay、transition-duration、transition-property、transition-timing-function,对应动画的4种属性:延迟、持续时间、对应CSS属性和缓动函数。
transform包含7种属性:animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-iteration-count、animation-fill-mode、animation-play-state,对应动画名称、持续时间、缓动函数、动画延迟、动画方向、重复次数、填充模式。
优点:
1、css3动画相比JS更轻量,性能更好,更易于实现。
2、不必担心缺乏标准和增加带宽消耗的问题。
3、不依赖于主线程,采用硬件加速(GPU)
4、move.js是一个封装了css3动画效果的轻量级js动画库。
缺点:
1、不能动态的修改或定义动画内容
2、不同的动画无法实现同步
3、多个动画彼此无法堆叠
示例:2-1 Transitions动画 (过渡动画)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-transition {
transition: transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-webkit-transition: -webkit-transform 2s linear;
-o-transition: -o-transform 2s linear;
}
.animate-transition:hover {
cursor: pointer;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="animate animate-transition">Transition Animation</div>
</body>
</html>
示例2-2:keyframes animation(关键帧动画)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-keyframes {
-webkit-animation: none;
}
.animate-keyframes:hover {
cursor: pointer;
-webkit-animation: frames 2s linear infinite;
}
@-webkit-keyframes frames {
0% {
background-color: #f00;
-webkit-transform: rotate(0deg);
}
100% {
background-color: #f00;
-webkit-transform: ro