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

HTML5 herman 3046浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:codedq,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:codedq,之前的微信号好友位已满,备注:返现
饿了么大量招人,我内推!Java 方向!薪资不设上限,工作年龄不限!工作地点限魔都,可电话面试!简历,发我微信:codedq
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

最近使用 腾讯的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)!可加作者微信号1:xmtxtt(5000人已满),微信号2:xttblog(5000人已满),微信号3:codedq(超3800)。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

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