Canvas制作动态进度加载水球
前言
之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下。
样式预览
height="342" width="100%" scrolling="no" title="动态进度水球" src="//codepen.io/lecein/embed/dOKrmr/?height=342&theme-id=0&default-tab=result" allowfullscreen="true">
实现思路
关于水波的实现,使用了sin()
函数,通过每一帧不断的移动sin()
函数曲线,实现水波动态效果。然后,通过绘制圆形路径,进行clip()
,实现球型效果。
sin()函数相关
这里说一下sin()
函数的相关基础,对于绘制水波的影响。
看一下图,回顾一下中学sin()
函数的基础。
从图中可以看出,当函数为sin(x)
时,值域为[-1, 1]
,周期为2π
。
当sin(x)
乘以一个数,可以改变值域,也就是峰值,如下图:
系数大于1时曲线更陡峭,小于1大于0时曲线更缓。
当sin(x ± 某个数)
时,实现曲线的左右移动,减时右移,加时左移。
当sin(x * 某个数)
时,曲线的周期会变化,某个数大于1时,周期变短;某个数小于1大于0时,周期变长。
在一点,sin()
是一个周期函数,所以只要不断的给它值,它就会周期变化。
好了,sin()
的数学基础差不多了,接下来开始步入正题。
绘制 sin() 曲线
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');//画布属性
var mW = canvas.width = 700;
var mH = canvas.height = 300;
var lineWidth = 1;//Sin 曲线属性
var sX = 0;
var sY = mH / 2;
var axisLength = mW; //轴长
var waveWidth = 0.011 ; //波浪宽度,数越小越宽
var waveHeight = 70; //波浪高度,数越大越高ctx.lineWidth = lineWidth;//画sin 曲线函数
var drawSin = function(xOffset){ctx.save();var points=[]; //用于存放绘制Sin曲线的点ctx.beginPath();//在整个轴长上取点for(var x = sX; x < sX + axisLength; x += 20 / axisLength){//此处坐标(x,y)的取点,依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”var y = -Math.sin((sX + x) * waveWidth);points.push([x, sY + y * waveHeight]);ctx.lineTo(x, sY + y * waveHeight); }//封闭路径ctx.lineTo(axisLength, mH);ctx.lineTo(sX, mH);ctx.lineTo(points[0][0],points[0][1]);ctx.stroke()ctx.restore();
};
drawSin()
此处通过waveWidth
和waveHeight
调节曲线的陡峭度和周期。
加入动态效果
var speed = 0.04; //波浪速度,数越大速度越快
var xOffset = 0; //波浪x偏移量
速度变量和x偏移变量
var y = -Math.sin((sX + x) * waveWidth + xOffset);
修改y点的函数。
var render = function(){ctx.clearRect(0, 0, mW, mH);drawSin(xOffset);xOffset += speed; //形成动态效果requestAnimationFrame(render);
}render()
加入渲染。
百分比控制
因为要加入百分比不同的涨幅效果,所以要对y的坐标时行百分比控制修改。
var dY = mH * (1 - nowRange / 100 );
球型显示
这里需要用到clip()
进行球型裁切显示。
ctx.beginPath();
ctx.arc(r, r, cR, 0, 2 * Math.PI);
ctx.clip();
其他
可以通过修改如下变量来修改曲线的形状以及速度:
var waveWidth = 0.015 ; //波浪宽度,数越小越宽
var waveHeight = 6; //波浪高度,数越大越高
var speed = 0.09; //波浪速度,数越大速度越快
完整代码
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">#c{margin:0 auto;display:block;}#r{display:block;margin:0 auto;}#r::before{color:black;content:attr(min);padding-right:10px;}#r::after{color:black;content:attr(max);padding-left:10px;}</style>
</head>
<body><canvas id="c"></canvas><input type="range" id="r" min="0" max="100" step="1"><script type="text/javascript">var canvas = document.getElementById('c');var ctx = canvas.getContext('2d');var range = document.getElementById('r');//range控件信息var rangeValue = range.value;var nowRange = 0; //用于做一个临时的range//画布属性var mW = canvas.width = 250;var mH = canvas.height = 250;var lineWidth = 2;//圆属性var r = mH / 2; //圆心var cR = r - 16 * lineWidth; //圆半径//Sin 曲线属性var sX = 0;var sY = mH / 2;var axisLength = mW; //轴长var waveWidth = 0.015 ; //波浪宽度,数越小越宽var waveHeight = 6; //波浪高度,数越大越高var speed = 0.09; //波浪速度,数越大速度越快var xOffset = 0; //波浪x偏移量ctx.lineWidth = lineWidth;//画圈函数var IsdrawCircled = false;var drawCircle = function(){ctx.beginPath();ctx.strokeStyle = '#1080d0';ctx.arc(r, r, cR+5, 0, 2 * Math.PI);ctx.stroke();ctx.beginPath();ctx.arc(r, r, cR, 0, 2 * Math.PI);ctx.clip();}//画sin 曲线函数var drawSin = function(xOffset){ctx.save();var points=[]; //用于存放绘制Sin曲线的点ctx.beginPath();//在整个轴长上取点for(var x = sX; x < sX + axisLength; x += 20 / axisLength){//此处坐标(x,y)的取点,依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”var y = -Math.sin((sX + x) * waveWidth + xOffset);var dY = mH * (1 - nowRange / 100 );points.push([x, dY + y * waveHeight]);ctx.lineTo(x, dY + y * waveHeight); }//封闭路径ctx.lineTo(axisLength, mH);ctx.lineTo(sX, mH);ctx.lineTo(points[0][0],points[0][1]);ctx.fillStyle = '#1c86d1';ctx.fill();ctx.restore();};//写百分比文本函数var drawText = function(){ctx.save();var size = 0.4*cR;ctx.font = size + 'px Microsoft Yahei';ctx.textAlign = 'center';ctx.fillStyle = "rgba(06, 85, 128, 0.8)";ctx.fillText(~~nowRange + '%', r, r + size / 2);ctx.restore();};var render = function(){ctx.clearRect(0, 0, mW, mH);rangeValue = range.value;if(IsdrawCircled == false){drawCircle(); }if(nowRange <= rangeValue){var tmp = 1;nowRange += tmp;}if(nowRange > rangeValue){var tmp = 1;nowRange -= tmp;}drawSin(xOffset);drawText(); xOffset += speed;requestAnimationFrame(render);}render();</script>
</body>
</html>
效果
博客名称:王乐平博客
博客地址:http://blog.lepingde.com
CSDN博客地址:http://blog.csdn.net/lecepin
Canvas制作动态进度加载水球相关推荐
- android 动态水球,Canvas 制作动态进度加载水球详解及实例代码
Canvas 动态进度加载水球 前言 之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路 关于水波的实现,使用了sin()函数,通 ...
- CSS动态能量加载水球
效果如下: 相关代码: 由于水面上升的高度是动态传值控制,所以水面上升和波动的动画需通过js添加. HTML: <div class="crystal"><div ...
- html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
- 如何制作一个loading加载页
功能效果展示 运行环境 Win7,Win8,Win10 Reworld版本 体验版 vc_redist.x64 运行环境 针对零基础读者的补充 下载安装 Reworld对应版本 Reworld官网链接 ...
- Android 自定义进度加载动画
偶尔浏览一个android开发网站,发现进度加载动画比较不错,觉得挺有意思 就自己参考了下自己做了一个进度加载动画 效果图如下: 首选来看自定义动画 package com.itzb.paintdem ...
- 卓盟科技: 动态资源加载技术背后的兼容性升级 | Android 开发者故事
在游戏变得日益复杂的今天,一根加载进度条不再仅仅只是开启冒险的倒计时,更是连接玩家与开发者的信使. 玩家们总是希望游戏能马上加载完毕,这意味着 "加载" 这件事情本身也有轻重缓急: ...
- android自定义笑脸,Android实现笑脸进度加载动画
最近看到豆瓣的笑脸loading很有意思,看一张效果图: 下面分析一下如何实现这样的效果: 1.默认状态是一张笑脸的状态(一个嘴巴,两个眼睛,默认状态) 2.开始旋转,嘴巴追上眼睛(合并状态) 3.追 ...
- React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件 安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
- js如何动态的加载js文件
在这个地方我说的动态的加载js文件是通过调用函数来加载js文件,我们在这个地方通过一个简单的小例子来实现 首先创建3个文件分别为:test1.html,test1.js,demo.js test1.j ...
最新文章
- MFC EDIT控件的使用记录
- mysql guid_MySQL – 自动增加到guid
- Android实现简单的检测手机自由落体关闭屏幕
- 返回对应对象的克隆方法
- 为什么到今天还要坚持写博客(转)
- 深度学习 《BiRNN》
- java 动手动脑之父子继承
- c++中的system函数
- java大数据组件Zookeeper
- npm ERR! command failednpm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
- 机器学习从入门到进阶✅
- 2017年 Java 程序员,风光背后的危机
- android渐变效果
- javaweb邮箱注册账号和激活
- Codeforces Gym 100015G Guessing Game 差分约束
- linux实验报告ALU,《linux内核分析》第一次课 实验作业
- Apple watch ,小米微信通知
- APP游戏开发十诫!第一个雏型就要搞定的事
- plc里的二进制 用计算机,PLC中常用数制及如何转换
- Vue进阶(幺贰柒):插槽详解