我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript canvas实现水球加载动画

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript canvas实现水球加载动画

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript canvas怎么实现水球加载动画

这篇文章主要讲解了“JavaScript canvas怎么实现水球加载动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript canvas怎么实现水球加载动画”吧!效果展示:
2023-06-30

Android实现跳动的小球加载动画效果

先来看看效果图跳动的小球做这个动画,需掌握: 1、属性动画 2、Path类、Canvas类 3、贝塞尔曲线 4、SurfaceView用法 5、自定义attr属性 6 、架构: 状态模式,控制
2022-06-06

怎么在JavaScript中利用canvas实现一个圆形流水动画

这篇文章将为大家详细讲解有关怎么在JavaScript中利用canvas实现一个圆形流水动画,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript的特点1.JavaScript主
2023-06-14

JavaScript+canvas怎么实现框内跳动小球

本篇内容主要讲解“JavaScript+canvas怎么实现框内跳动小球”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript+canvas怎么实现框内跳动小球”吧!效果如下:思路:
2023-06-30

JavaScript+Canvas实现带跳动效果的粒子动画

这篇文章主要为大家详细介绍了如何通过JavaScript和Canvas实现带跳动效果的粒子动画,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
2023-03-14

android加载动画怎么实现

在Android中,可以使用Animation类来实现加载动画。以下是使用Animation类实现加载动画的步骤:1. 创建动画资源文件:在res目录下的anim文件夹中创建一个XML文件,定义你想要的动画效果。例如,你可以使用透明度动画、
2023-08-18

JavaScript利用Canvas实现粒子动画倒计时

粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体。本文将利用canvas实现酷炫的粒子动画倒计时,感兴趣的小伙伴可以尝试一下
2022-12-09

Android加载Gif动画实现代码

Android加载Gif动画如何实现?相信大家都很好奇,本文就为大家揭晓,内容如下 2022-06-06

android怎么实现加载动画效果

Android中实现加载动画效果可以通过以下几种方式:1. 使用ProgressBar:ProgressBar是Android系统提供的一种加载动画控件,可以在布局文件中直接添加,并通过设置其属性来实现不同的加载动画效果。例如,在布局文件中
2023-08-08

Android自定义加载控件实现数据加载动画

本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下package
2022-06-06

编程热搜

目录