持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

在网页开发中，大家或多或少都用到过动画，动画实现的方式也有好多种，下面列举一些实现动画的方式。

实现动画种类

gif动画

gif动画是指通过使用专门的动画制作工具或者采用逐帧拍摄对象的方法，让多个GIF图片按一定规律快速、连续播放运动的画面。

所以有时候如果想省事一点，并且gif能实现的动画，我们可以考虑用一些gif代替。常见的gif我们想到的应该是表情包

可达鸭.gif

但是高清的 gif 体积较大。压缩后的体检较小的会失帧，交互相对来说比较差。

javascript 直接实现动画

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

	jsFlash(){
						
					 let elem = document.getElementById('jsclick');
					        let left = 0;
					        let timer = setInterval(function(){
					            if(left<window.innerWidth-200){
					                elem.style.marginLeft = left+'px';
					                left ++;
					            }else {
					                clearInterval(timer);
					            }
					        },16);
			}

这里用js写了个动画，不断往右移动，即使用样式的marginLeft属性，不断增加px，就能达到这个效果。

SVG动画

svg动画也是一个实现动画的好方式，我们可以通过控制内部的一些属性来做其他变换，如下

用于控制动画延时
对属性的连续改变进行控制
颜色变化，单用就能控制
控制如缩放、旋转等几何变化
控制SVG内元素的移动路径

CSS3 动画

这里就是用css实现我们需要的动画效果，现阶段相对用的还是比较多的，大致有以下一些属性。

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

canvas动画

这个相对来说难度较大一些，用画笔来在画布上绘出一些图案，并且结合setInterval，定时器可以不断绘制，达到我们想要的动画效果。

    console.log('开始绘制')
				const ctx = uni.createCanvasContext('canvas',this);
				        let left = 0;
				        let timer = setInterval(function(){
				            ctx.clearRect(0,0,200,200);
				            ctx.beginPath();
				            ctx.fillStyle = "#000";
				            ctx.fillRect(left,0,100,100);
				            ctx.stroke();
				            if(left>200){
				                clearInterval(timer);
				            }
				            left += 1;
				        },16);

总结

目前想到的主要是以上几种方式，应该也足够我们使用了，相对的我觉得用的比较多的还是css动画，canvas动画，有时候也可以用用svg 和 gif，下次重点学习一下css动画的使用。

css之动画的学习

前言