HTML5Canvas海水上涨动画效果
海水慢慢升起的 Canvas 动画,视觉效果治愈,适合用在首页背景或者加载动画上。
核心思路是用 HTML5 的加上
requestAnimationFrame()
,模拟出波浪一点点涨上来的动效。代码结构清晰,逻辑也不复杂,蛮适合拿来练手。
波浪的实现主要靠Math.sin()
函数来画出上下起伏的曲线,用不同的蓝色+透明度叠加,看起来还挺有深度感的。再配合fill()
每一帧填充,海水就像真的在动一样。
要注意性能问题,别用setInterval()
那种老方法,推荐用requestAnimationFrame()
,画面更流畅,CPU 也轻松些。
如果你想加点互动,比如点一下加快海水速度,也可以通过addEventListener()
加个点击事件,操作空间挺大。
感兴趣的话可以顺带看看下面这些动画效果的实现,也都挺有意思:
- HTML5 Canvas 动画时钟
- Html5javascript 动画基础 canvas
- javascript 加 HTML5 的 Canvas 实现 Lab 单车动画效果
- html5 canvas 球形网状烟花动画特效
- HTML5 加 JavaScript 动画基础源码
如果你做的是互动网页、展示页或者游戏登录界面,这种“海水升起”的动画还挺加分的。
下载地址
用户评论