短视频直播系统，前端比较常见的几种动画实现方式
我整理了如下的6种方式，接下来我们以最简单的例子，一个div从左到右移动一定的距离，分别看看这几种方案的具体实现。如有不妥还望指正。
一、CCS animation
这里省略了html部分，我们直接看css:
.box{
height: 100px;
width: 100px;
animation: move 5s linear;
position: absolute;
background: #409EFF;
left: 200px;
}
@keyframes move {
0%{
left: 0;
}
100%{
left: 200px;
}
}
二、CSS transition
想到这里我们很容易想到这样去写css来实现一个动画，对的，transition使用的一般场景就是有一个如hover的状态时去改变样式。
.box{
height: 100px;
width: 100px;
left: 0;
position: absolute;
background: #409EFF;
transition: 5s linear;
}
.box:hover{
left: 200px;
}
但是像上面的方式不能实现我们目标需求，所以稍微修改一下：
<style>
.box{
height: 100px;
width: 100px;
left: 0;
position: absolute;
background: #409EFF;
transition: 5s linear;
}
.target{
left: 200px;
}
</style>
<script>
window.onload = ()=>{
const box = document.getElementsByClassName("box")[0];
box.className = "target box";
};
</script>
三、setInterval & setTimeout
这里把单纯使用js定时器的方式归为一类，方式如下：
setInterval(move, 10);
const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
if (n>=200) {
return
}
box.style.left = n + 1 + "px";
n += 1;
}
const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
if (n>=200) {
return
}
box.style.left = n + 1 + "px";
n += 1;
setTimeout(move,10);
}
move();
四、requestAnimationFrame
const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
if (n>=200) {
return
}
box.style.left = n + 1 + "px";
n += 1;
requestAnimationFrame(move);
}
move();
五、Canvas
因为canvas只能由js操控绘制，其实这种方法也是js的方式实现动画，只是动起来的不是dom元素，而是画布展示；
<body>
<canvas id="canvas" ></canvas>
</body>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0,0,300,100);
ctx.fillStyle = "#409EFF";
ctx.fillRect(0,0,100,100);
let n = 0;
function move() {
if (n >= 200) {
return
}
ctx.clearRect(0, 0, 300, 100);
ctx.fillRect(n+1, 0, 100, 100);
n += 1;
requestAnimationFrame(move);
}
move();
</script>
六、SVG
用svg技术来实现，你会发现代码非常少；
<svg>
<Rect x="200" y="0" width="100" height="100" fill="#409EFF" >
<animate attributeName="x" from="0" to="200" dur="5"/>
</Rect>
</svg>
以上就是短视频直播系统，前端比较常见的几种动画实现方式， 更多内容欢迎关注之后的文章
标签：box,动画,const,前端,move,100px,直播,100,left From： https://www.cnblogs.com/yunbaomengnan/p/17922798.html