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

HTML5 herman 1092浏览 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,然后再绘制企鹅图片,绘制顺序不能搞错。

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