用前端技术实现2d动画和特效(canvas)

1. 作品展示

下面是我实现的一个粒子效果，粒子在区域内随机生成并随机移动

参考代码

采用原生的h5 + css + js实现

2. 原理

何为动画？连续的画面显示就是动画，特效也可以理解为动画。

浏览器的页面看似静止，但它也有自己的刷新率，大概60帧每秒。

requestAnimationFrame()这个函数浏览器每次刷新就会调用。

     function render() { // 渲染函数,每一帧如何渲染就写在这里.....}function update() { // 每一帧要执行的函数render();requestAnimationFrame(update);}function start() { // 当在html页面调用此方法时 粒子系统开始init(); // 相关数据初始化update();}

上面代码中的start函数一旦被调用，那么此后，render()函数每帧都会执行一次，每一帧显示的内容是什么就要写在这个函数里面。
既然要显示画面，那么就要有画布，也就是html5的canvas标签，可以理解为一个div，canvas的用法可自行百度，本人采用的是js动态创建的方法:

// 画布的初始化canvas = document.createElement("canvas");canvas.style.width =  choose.divWrapper.offsetWidth+ 'px';canvas.style.height =  choose.divWrapper.offsetHeight + 'px';canvas.width = choose.divWrapper.offsetWidth;canvas.height = choose.divWrapper.offsetHeight;context = canvas.getContext("2d");context.font = '20px bold'canvas.style.backgroundColor = "#f1f3f4";choose.divWrapper.appendChild(canvas);

绘制到canvas上

  function render() {context.clearRect(0, 0, canvas.width, canvas.height)// 清除上一帧for(i=0; i<particles.length; i++) { // 绘制每一个粒子context.beginPath();context.arc(particles[i].x, particles[i].y, particles[i].radius, 0, 2 * Math.PI, false);context.fillStyle = particles[i].color;context.fill();context.closePath();}

按照这个思想，很多简单的小动画和特效都可以实现

用前端技术实现2d动画和特效(canvas)相关推荐

HTML5花瓣飘落动画js特效canvas
下载地址 HTML5花瓣飘落动画特效,canvas实现的炫酷动态网页背景. dd:
web前端技术（二）之动画进阶
web前端技术(二)之动画进阶目录 web前端技术(二)之动画进阶前言一.web前端动画是什么二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
前端技术的发展与演变
近年来,前端技术的发展迅速,但因为前端知识面庞大,在实际学习当中往往无法理清其中的脉络.下面从各种库.框架.插件的层面上,对前端知识点做一些简单的梳理.从软件工程上,将前端分为四个由浅及深的层面或阶段 ...
前端技术学习路线及技术汇总
第一阶段网页开发基础首先从以下几个方面了解web: 一.Web的概述 1.万维网的发展 2.浏览器与服务器 3.网页与网站 4.域名与主机 5.HTTP协议 6.W3C标准需要了解的核心是:浏览器 ...
好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
[转] React风格的企业前端技术
亲爱的各位朋友们,大家下午好! 首先祝大家国庆节快乐! 很高兴可以在国庆前夕,可以为大家分享一下React风格的企业前端技术. 谈到前端,可能以前大家的第一感觉就是,前端嘛,无非就是做做页面切图,顶多 ...
我对前端技术更新的看法以及未来发展趋势预测
我对前端技术更新的看法以及未来发展趋势预测前端开发如何看待"别更新了,学不动了"?Deno.TypeScript 等新轮子层出不穷,未来前端重点方向在哪?前端开发在大前端浪潮下如 ...
2d 蓝图_“二渲三”打破传统思维！Netflix冲奥动画会推动2D动画变革吗？
我们看到了Netflix做原创动画的野心,二维动画的高度将被重新定义. 编辑 | Katei Netflix的第一部原创动画电影<克劳斯:圣诞节的秘密>将冲击奥斯卡最佳动画长片!这也是Ne ...
Atiitt 前端技术点清单列表 attilax总结 v2 s11.docx 1. ui与前端系列类库与api 3 1.1. 概念性技术 4 1.2. 运行环境 4 1.3. Ui技术点 4 1
Atiitt 前端技术点清单列表 attilax总结 v2 s11.docx 1. ui与前端系列类库与api 3 1.1. 概念性技术 4 1.2. 运行环境 4 1.3. Ui技术点 4 1.4 ...

用前端技术实现2d动画和特效(canvas)

1. 作品展示

2. 原理

用前端技术实现2d动画和特效(canvas)相关推荐

最新文章

热门文章