前言
上篇本来应该就是最后一篇了，但是楼主总觉得没有写上一个简单应用，不算是完整的学习系列。所以增加一篇关于动画的应用，对一个开源动画的介绍（很基础，非楼主原创）。
本篇介绍一个基于Canvas的发光加载动画（这里可下载源码）。算是对之前系列的各个知识点的一个总结吧。
我们先看看最终的效果截图：
新建一个html和一个js文件
html文件引入该js，并加了一个背景黑色，大体如下这样：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>HTML5 Canvas发光Loading动画DEMO演示</title>
6 <style>
7 body {
8 background: #000;
9 }
10 </style>
11 </head>
12 <body>
13 <canvas id="c"></canvas>
14 <script src="js/index.js"></script>
15 </body>
16 </html>
在画图之前，我们要确定一下简单的数据结构。
看效果图可以知道，我们是要画弧线，所有的动画都是基于这个弧线来操作的，那我们就要确定该弧线的坐标、半径、弧度起始点等。
要让其动起来，即旋转起来，我们需要旋转速度（弧度），当前旋转角度等。
我们整理成如下变量：
1 var c = document.getElementById(‘c‘),
2 ctx = c.getContext(‘2d‘),
3 cw = c.width = 400,
4 ch = c.height = 300,
5 rand = function (a, b) { return ~~((Math.random() * (b - a + 1)) + a); },//获取a到b之间的整数值
6 dToR = function (degrees) { return degrees * (Math.PI / 180); },//角度变弧度
7 circle = {
8 x: (cw / 2) + 5,
9 y: (ch / 2) + 22,//圆心坐标
10 radius: 90,//半径
11 speed: 2,//旋转速度（角度）
12 rotation: 0,//当前角度
13 angleStart: 270,//圆弧起始弧度
14 angleEnd: 90,//结束弧度
15 hue: 220,//色调
16 thickness: 18,//边缘粗细
17 blur: 25//模糊度
18 },
19 particles = [],//亮点数组
20 particleMax = 100,//亮点个数
19-29行的变量示例中增加其他效果时会用到，这里可以暂时忽略。
画弧线
该弧线带有一个渐变效果，我们会用到的APIs有arc()，createLinearGradient()等，方法如下：
1 renderCircle = function () {
2 ctx.save();//保存当前作图上下文
3 ctx.translate(circle.x, circle.y);//移动坐标原点到圆心位置
4
5 ctx.beginPath();
6 ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);
7 ctx.lineWidth = circle.thickness;
8
9 var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
10 gradient1.addColorStop(0, ‘hsla(‘ + circle.hue + ‘, 60%, 50%, .25)‘);
11 gradient1.addColorStop(1, ‘hsla(‘ + circle.hue + ‘, 60%, 50%, 0)‘);
12
13 ctx.strokeStyle = gradient1;//弧线是渐变色
14 ctx.stroke();
15 ctx.restore();//画完弧线之后，画其他东西之前，先恢复作图上下文
16 },
这里就不截图看效果了，就是一条渐变弧线。
旋转
这里旋转其实就很简单了，只要不停地旋转角度，在画弧线之前调用旋转API rotate()就可以了。下边是代码：
1 updateCircle = function () {
2 if (circle.rotation < 360) {
3 circle.rotation += circle.speed;
4 } else {
5 circle.rotation = 0;
6 }
7 }
我们可以在画弧线的方法中加入旋转角度（renderCircle 方法第四行加上下边这句即可）：
ctx.rotate(dToR(circle.rotation));//旋转角度，此处是动画动起来的地方。
说到这里，其实关于动画的内容就写的差不多了，只要一个定时器不停地调用这两个方法就好了。
不过，要注意一点，每次重新画图之前我们都要将canvas清空，我们调用clearRect或者统一写一个初始化方法即可，如下：
1 clear = function () {
2 ctx.globalCompositeOperation = ‘destination-out‘;
3 ctx.fillStyle = ‘rgba(0, 0, 0, .1)‘;
4 ctx.fillRect(0, 0, cw, ch);
5 ctx.globalCompositeOperation = ‘lighter‘;
6 }
定时器统一调用方法：
1 loop = function () {
2 clear();
3 updateCircle();
4 renderCircle();
5 }
设置定时器：
setInterval(loop, 20);
现在的效果已经出来了：
剩下的就是给弧线增加效果了。
该示例中为了更好地展示效果，设置了弧线边缘，头部发亮及小亮点显隐等多个效果，园友可运行代码查看效果。
完整的js代码如下：
1 /* super inefficient right now, could be improved */
2
3 //http://www.html5tricks.com/html5-canvas-shine-loading.html
4
5 var c = document.getElementById(‘c‘),
6 ctx = c.getContext(‘2d‘),
7 cw = c.width = 400,
8 ch = c.height = 300,
9 rand = function (a, b) { return ~~((Math.random() * (b - a + 1)) + a); },//获取a到b之间的整数值
10 dToR = function (degrees) { return degrees * (Math.PI / 180); },//角度变弧度
11 circle = {
12 x: (cw / 2) + 5,
13 y: (ch / 2) + 22,//圆心坐标
14 radius: 90,//半径
15 speed: 2,//旋转速度（角度）
16 rotation: 0,//当前角度
17 angleStart: 270,//圆弧起始弧度
18 angleEnd: 90,//结束弧度
19 hue: 220,//色调
20 thickness: 18,//边缘粗细
21 blur: 25//模糊度
22 },
23 particles = [],//亮点数组
24 particleMax = 100,//亮点个数
25
26 //更新旋转角度
27 updateCircle = function () {
28 if (circle.rotation < 360) {
29 circle.rotation += circle.speed;
30 } else {
31 circle.rotation = 0;
32 }
33 },
34 //画弧线
35 renderCircle = function () {
36 ctx.save();//保存当前作图上下文
37 ctx.translate(circle.x, circle.y);//移动坐标原点到圆心位置
38 ctx.rotate(dToR(circle.rotation));//旋转角度，此处是动画动起来的地方。
39 ctx.beginPath();
40 ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);
41 ctx.lineWidth = circle.thickness;
42
43 var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
44 gradient1.addColorStop(0, ‘hsla(‘ + circle.hue + ‘, 60%, 50%, .25)‘);
45 gradient1.addColorStop(1, ‘hsla(‘ + circle.hue + ‘, 60%, 50%, 0)‘);
46
47 ctx.strokeStyle = gradient1;//弧线是渐变色
48 ctx.stroke();
49 ctx.restore();//画完弧线之后，画其他东西之前，先恢复作图上下文
50 },
51 //弧线边缘效果
52 renderCircleBorder = function () {
53 ctx.save();
54 ctx.translate(circle.x, circle.y);
55 ctx.rotate(dToR(circle.rotation));
56 ctx.beginPath();
57 ctx.arc(0, 0, circle.radius + (circle.thickness / 2), dToR(circle.angleStart), dToR(circle.angleEnd), true);
58 ctx.lineWidth = 2;
59
60 var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
61 gradient2.addColorStop(0, ‘hsla(‘ + circle.hue + ‘, 100%, 50%, 0)‘);
62 gradient2.addColorStop(.1, ‘hsla(‘ + circle.hue + ‘, 100%, 100%, .7)‘);
63 gradient2.addColorStop(1, ‘hsla(‘ + circle.hue + ‘, 100%, 50%, 0)‘);
64
65 ctx.strokeStyle = gradient2;
66 ctx.stroke();
67 ctx.restore();
68 },
69 //弧线顶点发亮
70 renderCircleFlare = function () {
71 ctx.save();
72 ctx.translate(circle.x, circle.y);
73 ctx.rotate(dToR(circle.rotation + 185));
74 ctx.scale(1, 1);
75 ctx.beginPath();
76 ctx.arc(0, circle.radius, 30, 0, Math.PI * 2, false);
77 ctx.closePath();
78 var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30);
79 gradient3.addColorStop(0, ‘hsla(330, 50%, 50%, .35)‘);
80 gradient3.addColorStop(1, ‘hsla(330, 50%, 50%, 0)‘);
81 ctx.fillStyle = gradient3;
82 ctx.fill();
83 ctx.restore();
84 },
85 //发亮延伸
86 renderCircleFlare2 = function () {
87 ctx.save();
88 ctx.translate(circle.x, circle.y);
89 ctx.rotate(dToR(circle.rotation + 165));
90 ctx.scale(1.5, 1);
91 ctx.beginPath();
92 ctx.arc(0, circle.radius, 25, 0, Math.PI * 2, false);
93 ctx.closePath();
94 var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25);
95 gradient4.addColorStop(0, ‘hsla(30, 100%, 50%, .2)‘);
96 gradient4.addColorStop(1, ‘hsla(30, 100%, 50%, 0)‘);
97 ctx.fillStyle = gradient4;
98 ctx.fill();
99 ctx.restore();
100 },
101 //创建亮点
102 createParticles = function () {
103 if (particles.length < particleMax) {
104 particles.push({
105 x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation - 85))) + (rand(0, circle.thickness * 2) - circle.thickness),
106 y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation - 85))) + (rand(0, circle.thickness * 2) - circle.thickness),
107 vx: (rand(0, 100) - 50) / 1000,
108 vy: (rand(0, 100) - 50) / 1000,
109 radius: rand(1, 6) / 2,
110 alpha: rand(10, 20) / 100
111 });
112 }
113 },
114 //更新已有亮点的坐标用于动态更随展示
115 //同时降低透明度，删除透明度过低（先创建的点调用该函数的次数最多，也就最容易变低）的亮点。
116 updateParticles = function () {
117 var i = particles.length;
118 while (i--) {
119 var p = particles[i];
120 p.vx += (rand(0, 100) - 50) / 750;
121 p.vy += (rand(0, 100) - 50) / 750;
122 p.x += p.vx;
123 p.y += p.vy;
124 p.alpha -= .01;
125
126 if (p.alpha < .02) {
127 particles.splice(i, 1)
128 }
129 }
130 },
131 renderParticles = function () {
132 var i = particles.length;
133 while (i--) {
134 var p = particles[i];
135 ctx.beginPath();
136 ctx.fillRect(p.x, p.y, p.radius, p.radius);
137 ctx.closePath();
138 ctx.fillStyle = ‘hsla(0, 0%, 100%, ‘ + p.alpha + ‘)‘;
139 }
140 },
141 clear = function () {
142 ctx.globalCompositeOperation = ‘destination-out‘;
143 ctx.fillStyle = ‘rgba(0, 0, 0, .1)‘;
144 ctx.fillRect(0, 0, cw, ch);
145 ctx.globalCompositeOperation = ‘lighter‘;
146 }
147 loop = function () {
148 clear();
149 updateCircle();
150 renderCircle();
151 renderCircleBorder();
152 renderCircleFlare();
153 renderCircleFlare2();
154 createParticles();
155 updateParticles();
156 renderParticles();
157 }
158
159
160 ctx.shadowBlur = circle.blur;
161 ctx.shadowColor = ‘hsla(‘ + circle.hue + ‘, 80%, 60%, 1)‘;
162 ctx.lineCap = ‘round‘;
163
164 setInterval(loop, 20);
小结
本篇没有什么内容，只是一个简单应用。
其实在上篇状态的保存和恢复中那个示例就是一个简单动画了。
其实HTML5中动画也不算难，简单说就是画图+定时刷新，所以重点还是在HTML5 APIs的应用及与其他现有技术的交叉使用。
时间： 2024-10-10 05:05:01