web 动画实现方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web 动画实现方式相关的知识，希望对你有一定的参考价值。
这这里，总结了一些 我知道的不用框架来实现动画的方式，总的来说有两种，第一种是用css的transition或keyframes+animation，第二种用js来实现
首先看基本结构
<style>
div {
position: relative;
background: #999;
width: 50px;
height: 50px;
}
.ani {
}
</style>
<body>
<div class="ani"></div>
</body>
一 css
1) transition
transition是渐变的意思，就是某个属性 从一个值逐渐变成另一个值，比如width：从50px，到200px
基本表达式 transition: transition-property transition-duration transition-timing-function transition-delay
- transition-property ：需要做缓动的属性，默认值为all，就表示所有可以缓动的属性都做缓动动画
- transition-duration : 整个缓动动画的持续时间，比如1s 就是1秒
- transition-timing-function ： 缓动动画的呈现速度方式，默认值为ease，即 先慢再快再慢,还有linear（匀速）等其他方式
- transition-delay : 延迟执行动画时间
举例：
.ani {
transition: width 1s .4s linear;
}
.ani:hover {
width: 200px;
}
这个动画呈现效果是：当鼠标移动到div上的时候，执行width 改变动画
很多其他的一些属性也可以，比如left，opacity 等等，这里就不详述了，感兴趣的可以自己试试
2）keyframes
包含两部分，第一个是使用animation属性，第二部分是：用@keyframes定义动画，
animation：
- animation-name ： 动画名字，就是 @keyframes 定义的动画名
- animation-duration： 动画持续时间
- animation-timing-function： 动画呈现的速度
- animation-delay： 延迟时间
- animation-iteration-count：动画播放次数，默认值：１，值是一个数字或infinite（表示无限次，其他的就是直接用数字表示）
- animation-direction：当动画播放到１００％的时候，是否需要反向播放，默认值：normal，如果需要方向播放则alternat
.ani {
animation: testAni 2s infinite alternate;
}
注：播放完一次的会后，你会发现动画停留最开始的状态，但是你想停止在100%时候的状态，那怎么办呢？ 你可以使用nimation-fill-mode:forwards 的方式到达目的
keyframes
@keyframes testAni {
0% {
width:50px;
}
30% {
width：80px；
}
100% {
width: 200px;
}
}
0% 表示最开始，30%，表示整个动画时间的30%， 100% 表示结束，
中括号里面就是需要呈现动画的属性
注：动画优化：1）因为动画改变的太频繁，所以我们最好用position：absolute或fixed的方式把元素脱离文档流，避免频繁重绘
2） 如果是定位属性：比如left，top等等，可以用transform：translate（）的方式来替代，这样性能更好
注：transition适合于一次性的呈现动画，animation适合多次 或者需要控制中间过程的动画
1) setTimeout
表达式：setTimeout（funcName，delayTime）
funcName：函数名字
delayTime： 延迟执行时间
window.onload = function(){
var divDom = document.querySelector(".ani");
var nowWidth = divDom.offsetWidth;
var speed = 2;
function showAni(){
nowWidth += speed;
if(nowWidth > 200){
nowWidth = 200;
speed *= -1;
}
else if(nowWidth < 50){
nowWidth = 50;
speed *= -1;
}
divDom.style.width = nowWidth + "px";
setTimeout(showAni, 20);
}
showAni();
}
停止方法：使用clearTimeout(id)
2） setInterval
表达式：setInterval（funcName，delayTime）
表示程序间隔多少时间就执行一次func，是持续的，如果不使用clearInterval的话就一直执行，不像setTimeout是执行一次
具体的动画实现和setTimeout 的实现一样，只是调用方式不一样，
showAni改为：setInterval（showAni，40），然后showAni里面 删除 setTimeout那条语句
停止方法：使用clearInterval(id)
3) window.requestAnimationFrame()
window.onload = function(){
var divDom = document.querySelector(".ani");
var nowWidth = divDom.offsetWidth;
var speed = 4;
var lastTime = 0;
function showAni(nowTime){
if(nowTime-lastTime > 20){
lastTime = nowTime;
nowWidth += speed;
if(nowWidth > 200 || nowWidth < 50){
speed *= -1;
}
divDom.style.width = nowWidth + "px";
}
window.requestAnimationFrame(showAni)
}
window.requestAnimationFrame(showAni);
}
这个实现看起来 和setTimeout的方式差不多，但是因为浏览器针对requestAnimationFrame接口专门做了优化，简而言之就是把所有更新集中到
渲染期的最后一起集中渲染，所以效率更高
停止方法：cancelAnimationFrame(id)
注：1）nowTime-lastTime > 20 这个表达式只是为了设置间隔时间，因为一般情况下，执行这个方法的间隔时间是16.7秒的样子（60帧），
用这个表达式可以来控制真正的逻辑执行的间隔时间
2）用requestAnimationFrame加上canvas 可以实现一个动画引擎，当然这个只是核心，还包括其他的一些技术，才能实现，而且一般
是在游戏中才会用到那么复杂的，所以这里就不去详述相关的东西
注：上面的所有停止方法里面的id 都是调用相关方法的返回值，比如 id = setTimeout(showAni,20);
这里只是列举 实现动画的方式，所有对每种方式没去深究，拿requestAnimationFrame来说，就可以说一整篇幅，如果感兴趣的，可以针对
每种方式再去深入研究，这篇就到此结束，欢迎拍砖
以上是关于web 动画实现方式的主要内容，如果未能解决你的问题，请参考以下文章