轩枫阁

首页 / Web前端 / HTML / 基于HTML5 Canvas实现的下雪动画

基于HTML5 Canvas实现的下雪动画

看到过许多的下雪动画,总感觉不够形象生动下面的这个下雪动画,是基于HTML5 Canvas实现的,理解起来也挺简单。

demo地址

先来一览是多生动的效果吧:http://www.xuanfengge.com/funny/html5/snowFall/

小tip:支持的浏览器有Chrome、IE9+、360极速

1

 需求点分析

  • 雪花形状:统一在canvas上绘制
  • 随机绘画出雪花形状:运用canvas的绘制圆形渐变
  • 雪花飘动画:利用requestAnimationFrame绘制动画帧
  • 雪花数量:控制在一定范围,如200片

javascript代码

 

点解

关于requestAnimationFrame

教程:http://technet.microsoft.com/zh-cn/library/hh920765.aspx

整个过程

  • 创建画布,获得2D上下文对象
  • 根据雪花片数,定义雪花随机形状、出现位置、X随机速度、Y随机速度
  • 定义动画帧,让每个帧的雪花位置都改变并渲染
  • 雪花的下路路径是以左右摇摆(即余弦函数图)形式下落
  • 超出边界时,回到顶部随机位置继续下落,保持雪花最大片数

左右摇摆

91ef76c6a7efc

主要代码:

step从0开始,每一帧增加0.05,相当于上图的横轴(X坐标)随着时间向右走

Math.cos(this.step += .05)则为上图对应的数轴(Y坐标),会随着step的增加,呈现1到-1的抛物线变换,正负值使得velX有左右方向

stepSize为步长,因为一帧有几十毫秒,很快,所以这个值为小于1/30的一个随机数

x为雪花的X坐标位置,就会在界面左右摆动

最后附上本demo的其他代码

HTML代码

 CSS代码

如有有什么更好的方案,欢迎交流

 

268/470
270/470

相关阅读

文章评论

  • 请问网页显示程序用的什么插件?

    • 什么网页显示程序?

  • 网站的平滑滚动不是很爽啊。

    • 那还是换回普通的滚动咯?现在的滚动条是div,那我用CSS3模仿个吧

      • 就是滚动的时候还有一点缓冲的这个有点不适应。

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子