JavaScript canvas实现水球加载动画

本文实例为大家分享了canvas实现水球加载动画的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现水球加载动画</title>
    <style>
        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;
        }
    </style>
</head>
<body>
<canvas id="c">当前浏览器不支持canvas 请升级！</canvas>
<input type="range" name="range" min="0" max="100" step="1">
 
<script>
    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)
    }
</script>
<hr>
 
<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助 ,希望大家继续关注我的博客
 
                                                                               --王
</pre>
 
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现预加载视频音频/视频获取截图（返回canvas截图）

    #load-media.js /** * Create by Capricorncd 2017 */ // 同域资源实现视频截图,可上传的图片数据格式 // 非同域资源实现canvas截图预览 // 提示码 const CODES = { 0: 'success', 1: 'The url is not valid', 2: 'onerror' } /** * constructor * @param opts.url 音频|视频URL * @param opts.type 'audio|vid

  • 原生JS实现首页进度加载动画

    js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

  • javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码

    New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS Canvas定时器模拟动态加载动画

    本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva

  • pace.js页面加载进度条插件

    pace.js页面加载进度条插件

    本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • javascript实现一个网页加载进度loading

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进

  • 简单实现js进度条加载效果

    本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin

  • js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv

  • JavaScript canvas实现加载图片

    JavaScript canvas实现加载图片

    本文实例为大家分享了JavaScript canvas实现加载图片的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0; */

随机推荐