短视频直播系统,前端比较常见的几种动画实现方式
短视频直播系统,前端比较常见的几种动画实现方式
我整理了如下的6种方式,接下来我们以最简单的例子,一个div从左到右移动一定的距离,分别看看这几种方案的具体实现。如有不妥还望指正。
这里省略了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使用的一般场景就是有一个如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>
这里把单纯使用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();
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只能由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> <Rect x="200" y="0" width="100" height="100" fill="#409EFF" > <animate attributeName="x" from="0" to="200" dur="5"/> </Rect> </svg>
以上就是短视频直播系统,前端比较常见的几种动画实现方式, 更多内容欢迎关注之后的文章