H5动画制作 Web前端开发_canvas简单入门

网站前端开发_前端开发者丨h5动画制作 web前端开发
https://www.rokub.com

实现的效果html 代码

先提一个问题:什么是动画?

很简单,动画不就是‘动’起来的画嘛。说白了就是每秒刷新多少帧,帧数越大动画越流畅,当然也要考虑性能。

SO,问题来了,怎么让我们的代码每秒刷新呢,当然大家都知道 setInterval setTimeout 这两个都可以用来做动画,但官方提供了一个更适合的API requestAnimationFrame(fn)这里的fn就是我们需要循环的代码 它的帧数是动态的,根据性能动态改变的。

OK,有了这些我们就可以从简单的一个动画开始。

假设大家已经创建好了画布,并设置了全屏宽高,背景色为黑色,当然什么颜色都可以。

首先 我们要创建200个点,当然随便多少个点都可以。那么我们就需要一个变量来保存一下,var num=200;
OK,然后我们需要画点,这个可以封装成一个函数,每个点的位置还要随机生成,我们需要一个变量来保存这些位置,var pos=[],javascript 代码

好了,点数和画点的函数都有了,接下来就开始画点了

html 代码

好了,怎么样,是不是感觉很简单,下一步就是让它动起来了。那么怎么让它动呢,原理就是每帧的点的位置都要改变,来,上代码

随机速度的生成

html 代码

开始运动

html 代码

做到这里我们先看下效果,是不是发现到了屏幕边缘它就飞出去了。接下来就要让它弹回来,来,上代码

javascript 代码

怎么样,感觉有没有很奇妙。接下来开始画线,当然画线也要封装成一个函数

javascript 代码

接下来到了考研大家数学知识的环节了,怎么求两点间的距离?我不说,上代码

html 代码

网站前端开发_前端开发者丨h5动画制作 web前端开发
https://www.rokub.com
» 本文来自:前端开发者 » 《H5动画制作 Web前端开发_canvas简单入门》
» 本文链接地址:https://www.rokub.com/2715.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!