实现思路如下:
在页面初始化一个星星。
js中,根据数值去进行循环,clone()页面中的星星。
然后显示追加到页面中。
这样就完成了。
如图所示,当鼠标移上canvas区域的时候,显示星星闪烁的效果,星星本身还会有一个缓慢飘动的速度,当星星飘出canvas区域的时候,该星星消失,canvas区域的某个地方又会重生一个星星。首先准备两张图片:
背景图:girl.jpg
星星的序列帧图片:star.png
js库:commonFunctions.js
项目主文件:index.html
文件目录如下:
星星闪烁有很多种方法,比如关键帧动画,补间动画以及使用代码实现。最简单的就是关键帧动画,第一帧是原大小的星星,第二帧调整星星的大小,形状闪烁的效果,不过不够随机,所以还是用补间动画更好一些,使用图形元件,可以让起始帧随机一些,然后再调整大小和透明度旋转角度等,就可以制作很自然的星星效果了。