飞舞的樱花飘落效果【H5 Canvas】

  让我来一发技术贴吧,作为我的第一次,看来要写的详细点才好嘛,首先说说老版本的实现方法,那就是生成N个div,每个div里有对应的img,逐帧修改DOM来实现樱花的飘落效果。看见没,看见没?那个死宅说什么?逐帧修改DOM唉,好吧我承认说你是死宅是我的不对,但你有考虑过电脑酱的感受吗?快看啊,CPU君在哭泣,绝对在哭泣,CPU君说,你压制视频之类的让我努努力那是我应该的,你个死宅上个网页还让我拼命是想死吗!?唉,真拿你没办法,那我就让你轻松轻松吧~
赤城今天就要吃撑!
  这里就要用到我们神奇的H5的canvas酱啦,先科普一下什么是canvas,canvas呢就是用于图形的绘制,通过脚本 (通常是JavaScript)来完成的标签啦,啊,不支持H5就用不了哦。
  废话说了这么多,我怪不好意思的啦,咱先步入正题吧,实现思路是什么呢,我们通过requestAnimationFrame来进行动画绘制,至于requestAnimationFrame是什么优缺点有什么,这里就不多介绍了,想了解的可以去鑫大的博客里膜拜膜拜(点我传送过去)。大部分代码大家通过F12就可了解啦,这里主要介绍一个情况的解决方案,如何控制每个花瓣的独立旋转呢,所实话本菜鸡死宅困扰了好久的说,正常写法会导致整个canvas画布疯狂旋转,画面别提有多鬼畜了。后来经过多方查阅终于弄清了save()和restore() 的用法,简单来说就是先save保存当前画布状态,再对我们要有改的元素进行修改操作,最后restore还原画布状态,这样就很好的防止了对某一地方的修改之后影响了整个画布。至于其他的嘛,应该没什么难点啦,对了,看到一长串英文字母时不要惊慌啦,我是为了方便移植,那个是樱花瓣的Base64编码啦~
  具体Demo请点击这里啦(我叫Demo酱
  第一次发技术贴,如果有说错的地方,请各位大佬一定要指出来!顺便打个广告,请大家多多关注我的个人网站啦~

发表评论

电子邮件地址不会被公开。 必填项已用*标注