基于HTML5 Canvas 实现的 Loading 效果

Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像。更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Loading)加载动画效果。

在线预览   源码下载

实现的代码。

html代码:

 var loaders = [

    {

        width: 100,
        height: 50,
        padding: 10,

        stepsPerFrame: 2,
        trailLength: 1,
        pointDistance: .03,

        strokeColor: ‘#FF7B24‘,

        step: ‘fader‘,

        multiplier: 2,

        setup: function () {
            this._.lineWidth = 5;
        },

        path: [

            [‘arc‘, 10, 10, 10, -270, -90],
            [‘bezier‘, 10, 0, 40, 20, 20, 0, 30, 20],
            [‘arc‘, 40, 10, 10, 90, -90],
            [‘bezier‘, 40, 0, 10, 20, 30, 0, 20, 20]
        ]
    },

    {

        width: 30,
        height: 30,

        stepsPerFrame: 2,
        trailLength: .3,
        pointDistance: .1,
        padding: 10,

        fillColor: ‘#D4FF00‘,
        strokeColor: ‘#FFF‘,

        setup: function () {
            this._.lineWidth = 20;
        },

        path: [
            [‘line‘, 0, 0, 30, 0],
            [‘line‘, 30, 0, 30, 30],
            [‘line‘, 30, 30, 0, 30],
            [‘line‘, 0, 30, 0, 0]
        ]
    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 1,
        trailLength: 1,
        pointDistance: .025,

        strokeColor: ‘#05E2FF‘,

        fps: 20,

        setup: function () {
            this._.lineWidth = 2;
        },
        step: function (point, index) {

            var cx = this.padding + 50,
                cy = this.padding + 50,
                _ = this._,
                angle = (Math.PI / 180) * (point.progress * 360);

            this._.globalAlpha = Math.max(.5, this.alpha);

            _.beginPath();
            _.moveTo(point.x, point.y);
            _.lineTo(
                (Math.cos(angle) * 35) + cx,
                (Math.sin(angle) * 35) + cy
            );
            _.closePath();
            _.stroke();

            _.beginPath();
            _.moveTo(
                (Math.cos(-angle) * 32) + cx,
                (Math.sin(-angle) * 32) + cy
            );
            _.lineTo(
                (Math.cos(-angle) * 27) + cx,
                (Math.sin(-angle) * 27) + cy
            );
            _.closePath();
            _.stroke();

        },
        path: [
            [‘arc‘, 50, 50, 40, 0, 360]
        ]
    },

    {

        width: 100,
        height: 50,

        stepsPerFrame: 1,
        trailLength: 1,
        pointDistance: .1,
        fps: 15,
        padding: 10,
        //step: ‘fader‘,

        fillColor: ‘#FF2E82‘,

        setup: function () {
            this._.lineWidth = 20;
        },

        path: [
            [‘line‘, 0, 20, 100, 20],
            [‘line‘, 100, 20, 0, 20]
        ]
    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 7,
        trailLength: .7,
        pointDistance: .01,
        fps: 30,

        setup: function () {
            this._.lineWidth = 10;
        },

        path: [
            [‘line‘, 20, 70, 50, 20],
            [‘line‘, 50, 20, 80, 70],
            [‘line‘, 80, 70, 20, 70]
        ]
    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 4,
        trailLength: 1,
        pointDistance: .01,
        fps: 25,

        fillColor: ‘#FF7B24‘,

        setup: function () {
            this._.lineWidth = 10;
        },

        step: function (point, i, f) {

            var progress = point.progress,
                degAngle = 360 * progress,
                angle = Math.PI / 180 * degAngle,
                angleB = Math.PI / 180 * (degAngle - 180),
                size = i * 5;

            this._.fillRect(
                Math.cos(angle) * 25 + (50 - size / 2),
                Math.sin(angle) * 15 + (50 - size / 2),
                size,
                size
            );

            this._.fillStyle = ‘#63D3FF‘;

            this._.fillRect(
                Math.cos(angleB) * 15 + (50 - size / 2),
                Math.sin(angleB) * 25 + (50 - size / 2),
                size,
                size
            );

            if (point.progress == 1) {

                this._.globalAlpha = f < .5 ? 1 - f : f;

                this._.fillStyle = ‘#EEE‘;

                this._.beginPath();
                this._.arc(50, 50, 5, 0, 360, 0);
                this._.closePath();
                this._.fill();

            }

        },

        path: [
            [‘line‘, 40, 10, 60, 90]
        ]
    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 3,
        trailLength: 1,
        pointDistance: .01,
        fps: 30,
        step: ‘fader‘,

        strokeColor: ‘#D4FF00‘,

        setup: function () {
            this._.lineWidth = 6;
        },

        path: [
            [‘arc‘, 50, 50, 20, 360, 0]
        ]
    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 1,
        trailLength: 1,
        pointDistance: .02,
        fps: 30,

        fillColor: ‘#05E2FF‘,

        step: function (point, index) {

            this._.beginPath();
            this._.moveTo(point.x, point.y);
            this._.arc(point.x, point.y, index * 7, 0, Math.PI * 2, false);
            this._.closePath();
            this._.fill();

        },

        path: [
            [‘arc‘, 50, 50, 30, 0, 360]
        ]

    },

    {

        width: 100,
        height: 100,

        stepsPerFrame: 1,
        trailLength: 1,
        pointDistance: .05,

        strokeColor: ‘#FF2E82‘,

        fps: 20,

        setup: function () {
            this._.lineWidth = 4;
        },
        step: function (point, index) {

            var cx = this.padding + 50,
                cy = this.padding + 50,
                _ = this._,
                angle = (Math.PI / 180) * (point.progress * 360),
                innerRadius = index === 1 ? 10 : 25;

            _.beginPath();
            _.moveTo(point.x, point.y);
            _.lineTo(
                (Math.cos(angle) * innerRadius) + cx,
                (Math.sin(angle) * innerRadius) + cy
            );
            _.closePath();
            _.stroke();

        },
        path: [
            [‘arc‘, 50, 50, 40, 0, 360]
        ]
    }

];

        var d, a, container = document.getElementById(‘in‘);

        for (var i = -1, l = loaders.length; ++i < l; ) {

            d = document.createElement(‘div‘);
            d.className = ‘l‘;

            a = new Sonic(loaders[i]);

            d.appendChild(a.canvas);
            container.appendChild(d);

            a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + ‘px‘;
            a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + ‘px‘;

            a.play();

        }

via:http://www.w2bc.com/Article/26212

时间: 2024-10-11 03:45:48

基于HTML5 Canvas 实现的 Loading 效果的相关文章

基于HTML5 Canvas可撕裂布料效果

分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线预览   源码下载 实现的代码. html代码: <canvas id="c"></canvas> <div id="info"> <p> <br> - 使用鼠标可以拉扯 <br> <br> - 右键可以切断布料 <

基于HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

基于HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷. 在线预览   源码下载 HTML代码如下 <p class="center">Change pixel resolution <input type="r

基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape

基于html5 canvas和js实现的水果忍者网页版

今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Raphael,效果很赞,赶紧来膜拜一下.效果图如下: 在线预览   源码下载 实现的代码. html代码: <canvas id="view" width="640" height=&q

基于HTML5 Canvas的饼状图表实现教程

昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表是饼状图,并且我们可以点击右侧的表格来选中激活当前的图表数据,具体效果可以看DEMO演示. 你也可以在这里查看在线演示 下面是实现的过程及源码,一起分享给大家. HTML代码: <div id="container"> <canvas id="chart&quo

基于HTML5 Canvas和jQuery 的画图工具的实现

简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品: 该应用是遵循所见即所得(WYSIWYG, What you see is what you get)原则设计的,它具有以下功能: 1. 可以绘制自由曲线.直线.矩形框和文字: 2. 可以根据需要定义线段和矩形框的颜色和宽度: 3. 你可以需要字体的大小.颜色.字体: 4. 支持undo.redo

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力,逐渐发展到应用于电力.冶金.化工.自动化群控等等大部分工控场景中,本文是将传统安防结合 SCADA 系统,制作的智能安防中的巡逻监控模块,主要采用 HT for Web 作为开发环境. 代码实现 绘制背景色