jquery曲线波动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：jquery曲线波动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">

</head>

<body>
    <style type="text/css">
        *{margin:0;padding:0;}.headline-bg{position:absolute;width:100%;height:100%;overflow:hidden;background:-webkit-linear-gradient(top,#0076d1,#5db8ff);background:-moz-linear-gradient(top,#0076d1,#5db8ff);background:-o-linear-gradient(top,#0076d1,#5db8ff);background:-ms-linear-gradient(top,#0076d1,#5db8ff);}
    </style>
    <div class="headline-bg"><canvas id="waves" class="waves"></canvas></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script >
$(document).ready(function() {
        function b() {
            var d = $(window).width(),
                e = (768 - d) / 768 + 1,
                f = 1;
            fmhPara = $(".feature-mi").height() < 641 || $(".feature-ai").height() < 641 || $(".feature-bi").height() < 641 ? 0 : 1, 768 > d ? ($(".mi-headline-bg").css("height", $(".feature-mi").height() + 28 * e * f + "px"), $(".ai-headline-bg").css("height", $(".feature-ai").height() + 28 * e * f + "px"), $(".bi-headline-bg").css("height", $(".feature-bi").height() + 28 * e * f + "px"), $(".ee-headline-bg").css("height", $(".feature-ee").height() + parseInt($(".feature-ee").css("padding-top")) + 20 * e + "px")) : ($(".mi-headline-bg").removeAttr("style"), $(".ai-headline-bg").removeAttr("style"), $(".bi-headline-bg").removeAttr("style"), $(".ee-headline-bg").removeAttr("style"))
        }
        setTimeout(function() {
            b()
        }, 100), $(window).resize(function() {
            b()
        })
    }),
    function(c, d) {
        "function" == typeof define && "object" == typeof define.amd ? define([], function() {
            return d(c)
        }) : c.SineWaves = d(c)
    }(this, function() {
        function q(b) {
            if (this.options = y.defaults(this.options, b), this.el = this.options.el, delete this.options.el, !this.el) {
                throw "No Canvas Selected"
            }
            if (this.ctx = this.el.getContext("2d"), this.waves = this.options.waves, delete this.options.waves, !this.waves || !this.waves.length) {
                throw "No waves specified"
            }
            this.dpr = window.devicePixelRatio || 1, this.updateDimensions(), window.addEventListener("resize", this.updateDimensions.bind(this)), this.setupUserFunctions(), this.easeFn = y.getFn(D, this.options.ease, "linear"), this.rotation = y.degreesToRadians(this.options.rotate), y.isType(this.options.running, "boolean") && (this.running = this.options.running), this.setupWaveFns(), this.loop()
        }

        function r(c, d) {
            return y.isType(c, "number") ? c : (c = c.toString(), c.indexOf("%") > -1 ? (c = parseFloat(c), c > 1 && (c /= 100), d * c) : c.indexOf("px") > -1 ? parseInt(c, 10) : void 0)
        }
        Function.prototype.bind || (Function.prototype.bind = function(f) {
            if ("function" != typeof this) {
                throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")
            }
            var g = Array.prototype.slice.call(arguments, 1),
                h = this,
                i = function() {},
                j = function() {
                    return h.apply(this instanceof i && f ? this : f, g.concat(Array.prototype.slice.call(arguments)))
                };
            return i.prototype = this.prototype, j.prototype = new i, j
        });
        for (var s = ["ms", "moz", "webkit", "o"], t = 0; t < s.length && !window.requestAnimationFrame; ++t) {
            window.requestAnimationFrame = window[s[t] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[s[t] + "CancelAnimationFrame"] || window[s[t] + "CancelRequestAnimationFrame"]
        }
        if (!window.requestAnimationFrame) {
            var u = 0;
            window.requestAnimationFrame = function(e) {
                var f = (new Date).getTime(),
                    g = Math.max(0, 16 - (f - u)),
                    h = window.setTimeout(function() {
                        e(f + g)
                    }, g);
                return u = f + g, h
            }
        }
        window.cancelAnimationFrame || (window.cancelAnimationFrame = function(b) {
            clearTimeout(b)
        });
        var v = Math.PI / 180,
            w = 2 * Math.PI,
            x = Math.PI / 2,
            y = {},
            z = y.isType = function(d, e) {
                var f = {}.toString.call(d).toLowerCase();
                return f === "[object " + e.toLowerCase() + "]"
            },
            A = y.isFunction = function(b) {
                return z(b, "function")
            },
            B = y.isString = function(b) {
                return z(b, "string")
            },
            C = (y.isNumber = function(b) {
                return z(b, "number")
            }, y.shallowClone = function(d) {
                var e = {};
                for (var f in d) {
                    d.hasOwnProperty(f) && (e[f] = d[f])
                }
                return e
            }),
            D = (y.defaults = function(e, f) {
                z(f, "object") || (f = {});
                var g = C(e);
                for (var h in f) {
                    f.hasOwnProperty(h) && (g[h] = f[h])
                }
                return g
            }, y.degreesToRadians = function(b) {
                if (!z(b, "number")) {
                    throw new TypeError("Degrees is not a number")
                }
                return b * v
            }, y.getFn = function(d, e, f) {
                return A(e) ? e : B(e) && A(d[e.toLowerCase()]) ? d[e.toLowerCase()] : d[f]
            }, {});
        D.linear = function(c, d) {
            return d
        }, D.sinein = function(c, d) {
            return d * (Math.sin(c * Math.PI - x) + 1) * 0.5
        }, D.sineout = function(c, d) {
            return d * (Math.sin(c * Math.PI + x) + 1) * 0.5
        }, D.sineinout = function(c, d) {
            return d * (Math.sin(c * w - x) + 1) * 0.5
        };
        var E = {};
        E.sine = function(b) {
            return Math.sin(b)
        }, E.sin = E.sine, E.sign = function(b) {
            return b = +b, 0 === b || isNaN(b) ? b : b > 0 ? 1 : -1
        }, E.square = function(b) {
            return E.sign(Math.sin(b * w))
        }, E.sawtooth = function(b) {
            return 2 * (b - Math.floor(b + 0.5))
        }, E.triangle = function(b) {
            return Math.abs(E.sawtooth(b))
        }, q.prototype.options = {
            speed: 10,
            rotate: 0,
            ease: "Linear",
            wavesWidth: "95%"
        }, q.prototype.setupWaveFns = function() {
            for (var c = -1, d = this.waves.length; ++c < d;) {
                this.waves[c].waveFn = y.getFn(E, this.waves[c].type, "sine")
            }
        }, q.prototype.setupUserFunctions = function() {
            y.isFunction(this.options.resizeEvent) && (this.options.resizeEvent.call(this), window.addEventListener("resize", this.options.resizeEvent.bind(this))), y.isFunction(this.options.initialize) && this.options.initialize.call(this)
        };
        var F = {
            timeModifier: 1,
            amplitude: 50,
            wavelength: 50,
            segmentLength: 10,
            lineWidth: 1,
            strokeStyle: "rgba(255, 255, 255, 0.2)",
            type: "Sine"
        };
        return q.prototype.getDimension = function(b) {
            return y.isNumber(this.options[b]) ? this.options[b] : y.isFunction(this.options[b]) ? this.options[b].call(this, this.el) : "width" === b ? this.el.clientWidth : "height" === b ? this.el.clientHeight : void 0
        }, q.prototype.updateDimensions = function() {
            var b = this.getDimension("width"),
                d = this.getDimension("height");
            this.width = this.el.width = b * this.dpr, this.height = this.el.height = d * this.dpr, this.el.style.width = b + .........完整代码请登录后点击上方下载按钮下载查看