使用腾讯 AlloyTeam.js 插件打造波浪加载进度条

HTML5 herman 1751浏览 0评论

最近使用 腾讯的AlloyTeam移动Web触摸解决方案实现了一款基于 HTML5 Canvas的加载进度条案例,这里分享给大家,希望能对各位在开发和学习过程中有所帮助。

最近 AlloyTouch 写了一个下拉刷新的酷炫 loading 效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用 Canvas 绘制矢量图和图片素材合成出波浪特效。
相关代码可以在这里 https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html 下载

运行效果

HTML5 Canvas 加载进度条

quadraticCurveTo

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
JavaScript 语法:

context.quadraticCurveTo(cpx,cpy,x,y);

参数值

  • cpx 贝塞尔控制点的 x 坐标
  • cpy 贝塞尔控制点的 y 坐标
  • x 结束点的 x 坐标
  • y 结束点的 y 坐标
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

通过上面代码可以绘制一条二次贝塞尔曲线,具体原理效果看下图:

Canvas 用法

整体实现

var img = new Image();
function tick() {
    ...
    ...
    ctx.fill();
    ctx.globalCompositeOperation = "destination-atop";
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(tick);
}

img.onload = function () {
    tick();
};

img.src = "asset/alloy.png";

为了代码简单直接,这里免去了封装一个加载器的代码,直接通过new Image来设置src来加载图片。
在绘制完矢量图之后,设置globalCompositeOperation,然后再绘制企鹅图片,绘制顺序不能搞错。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用腾讯 AlloyTeam.js 插件打造波浪加载进度条