帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 很流行的水球加载动画
很流行的水球加载动画
浏览:768次
-
评论:1次
-
发布时间:2017-06-11
Html
Css
Js
当前浏览器不支持canvas 请升级!
body { display:flex; flex-flow:column wrap; justify-content:center; align-items:center; } #c { margin-top:20px; } input[type=range]::before { content:attr(min); color:#000; padding-right:5px; } input[type=range]::after { content:attr(max); color:#000; padding-left:5px; }
canvas = document.getElementById("c"); ctx = canvas.getContext("2d"); oRange = document.getElementsByName("range")[0]; M = Math; Sin = M.sin; Cos = M.cos; Sqrt = M.sqrt; Pow = M.pow; PI = M.PI; Round = M.round; oW = canvas.width = 300; oH = canvas.height = 300; // 线宽 lineWidth = 2 // 大半径 r = (oW / 2); cR = r - 8 * lineWidth; ctx.beginPath(); ctx.lineWidth = lineWidth; // 水波动画初始参数 axisLength = 2 * r - 16 * lineWidth; // Sin 图形长度 unit = axisLength / 8; // 波浪宽 range = .2 // 浪幅 nowrange = range; xoffset = 8 * lineWidth; // x 轴偏移量 data = ~~ (oRange.value) / 100; // 数据量 sp = 0; // 周期偏移量 nowdata = 0; waveupsp = 0.002; // 水波上涨速度 // 圆动画初始参数 arcStack = []; // 圆栈 bR = r - 8 * lineWidth; soffset = -(PI / 2); // 圆动画起始位置 circleLock = true; // 起始动画锁 // 获取圆动画轨迹点集 for (var i = soffset; i < soffset + 2 * PI; i += 1 / (8 * PI)) { arcStack.push([ r + bR * Cos(i), r + bR * Sin(i)]) } cStartPoint = arcStack.shift(); // 圆起始点 ctx.strokeStyle = "#1c86d1"; ctx.moveTo(cStartPoint[0], cStartPoint[1]) render(); // 开始渲染 function drawSine() { ctx.beginPath(); ctx.save(); var Stack = []; // 记录起始点和终点坐标 for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) { var x = sp + (xoffset + i) / unit; var y = Sin(x) * nowrange; var dx = i; var dy = 2 * cR * (1 - nowdata) + (r - cR) - (unit * y); ctx.lineTo(dx, dy); Stack.push([dx, dy]) } // 获取初始点和结束点 var startP = Stack[0] var endP = Stack[Stack.length - 1] ctx.lineTo(xoffset + axisLength, oW); ctx.lineTo(xoffset, oW); ctx.lineTo(startP[0], startP[1]) ctx.fillStyle = "#1c86d1"; ctx.fill() ctx.restore(); } function drawText() { ctx.globalCompositeOperation = 'source-over'; var size = 0.4 * cR; ctx.font = 'bold ' + size + 'px Microsoft Yahei'; txt = (nowdata.toFixed(2) * 100).toFixed(0) + '%'; var fonty = r + size / 2; var fontx = r - size * 0.8; ctx.fillStyle = "rgba(06, 85, 128, 0.8)"; ctx.fillText(txt, fontx, fonty) } function render() { ctx.clearRect(0, 0, oW, oH); if (circleLock) { if (arcStack.length) { var temp = arcStack.shift(); ctx.lineTo(temp[0], temp[1]) ctx.stroke(); } else { circleLock = false; ctx.lineTo(cStartPoint[0], cStartPoint[1]) ctx.stroke(); arcStack = null; ctx.globalCompositeOperation = 'destination-over'; ctx.beginPath(); ctx.lineWidth = lineWidth; ctx.arc(r, r, bR, 0, 2 * PI, 1); ctx.beginPath(); ctx.save(); ctx.arc(r, r, r - 16 * lineWidth, 0, 2 * PI, 1); ctx.restore() ctx.clip(); ctx.fillStyle = "#1c86d1"; // 初始拖拽控件 oRange.addEventListener("change", function() { data = ~~ (oRange.value) / 100; console.log("data=" + data) }, 0); } } else { // 开始水波动画 // 控制波幅 if (data >= 0.85) { if (nowrange > range / 4) { var t = range * 0.01; nowrange -= t; } } else if (data <= 0.1) { if (nowrange < range * 1.5) { var t = range * 0.01; nowrange += t; } } else { if (nowrange <= range) { var t = range * 0.01; nowrange += t; } if (nowrange >= range) { var t = range * 0.01; nowrange -= t; } } if ((data - nowdata) > 0) { nowdata += waveupsp; } if ((data - nowdata) < 0) { nowdata -= waveupsp } sp += 0.07; drawSine(); drawText(); } requestAnimationFrame(render) }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>很流行的水球加载动画-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:如何制作水球动画图?
获取复选框的值
CSS3 loading动画
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv4 码徒
何***从
2018年07月05日
效果很赞
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
768
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值