HTML5设置（控制）闹铃响声的动画

SVG Volume Control

svg, bell

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1099
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

$(document).ready(function() {

return {
            x: (+line.getAttribute("x1") + +line.getAttribute("x2")) / 2,
            y: (+line.getAttribute("y1") + +line.getAttribute("y2")) / 2
        };
    };
    var getScalePoint = function getScalePoint() {
        var obj = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
        var onScene = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];

if (!onScene) {
            var svgRect = obj.getBBox();
            return {
                x: svgRect.x + svgRect.width / 2,
                y: svgRect.y + svgRect.height / 2
            };
        }
        var rect = obj.getBoundingClientRect();
        return {
            x: rect.width / 2,
            y: rect.height / 2
        };
    };

var volObj = {
        speakB: qs("#speakB"),
        arcBigB: qs("#arcBigB"),
        arcSmB: qs("#arcSmB"),

speakF: qs("#speakF"),
        arcBigF: qs("#arcBigF"),
        arcSmF: qs("#arcSmF"),

crossLtRb: qs("#crossLtRb"),
        crossLbRt: qs("#crossLbRt"),

ctrlCirce: qs("#ctrlCirce"),
        ctrlLineF: qs("#ctrlLineF"),
        ctrlLineB: qs("#ctrlLineB")
    };

var pathLen = {
        arcBigLen: volObj.arcBigF.getTotalLength(),
        arcSmLen: volObj.arcSmF.getTotalLength(),
        speakLen: volObj.speakF.getTotalLength()
    };

var transforms = {
        translate3D: function translate3D() {
            var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
            var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
            var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
            var el = arguments.length <= 3 || arguments[3] === undefined ? "px" : arguments[3];

return "translate3D(" + x + el + ", " + y + el + ", " + z + el + ")";
        },

translate: function translate() {
            var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
            var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
            var el = arguments.length <= 2 || arguments[2] === undefined ? "px" : arguments[2];

return "translate(" + x + el + ", " + y + el + ")";
        },

rotate3d: function rotate3d() {
            var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
            var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
            var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
            var deg = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3];

return "rotate3d(" + x + ", " + y + ", " + z + ", " + deg + "deg)";
        },

rotate: function rotate() {
            var deg = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];

return "rotate(" + deg + "deg)";
        },

scale: function scale() {
            var x = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
            var y = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];

return "scale(" + x + ", " + y + ")";
        },

perspective: function perspective() {
            var val = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
            var el = arguments.length <= 1 || arguments[1] === undefined ? "px" : arguments[1];

return "perspective(" + val + el + ")";
        }
    };

var easing = {
        inCubic: function inCubic(t, b, c, d) {
            var ts = (t /= d) * t;
            var tc = ts * t;
            return b + c * (1.7 * tc * ts - 2.05 * ts * ts + 1.5 * tc - 0.2 * ts + 0.05 * t);
        },

outElastic: function outElastic(t, b, c, d) {
            var ts = (t /= d) * t;
            var tc = ts * t;
            return b + c * (33 * tc * ts + -106 * ts * ts + 126 * tc + -67 * ts + 15 * t);
        },

customSin: function customSin(t, b, c, d) {
            var ts = (t /= d) * t;
            var tc = ts * t;
            return b + c * (81 * tc * ts + -210 * ts * ts + 190 * tc + -70 * ts + 10 * t);
        }
    };

var play = {
        dx: 1 / 5,
        ds: 0.03,
        flag: true,
        step: 0,
        speed: 5,

curPosBig: {
            x: 0,
            y: 0,
            scale: 1
        },

curPosSm: {
            x: 0,
            y: 0,
            scale: 1
        },

curPos: 1,

off: false,
        offCurStep: 100,
        offMaxStep: 100,
        offSpeed: 2,
        offRefresh: function offRefresh() {
            this.offCurStep = this.offMaxStep;
            this.off = true;
        },

on: false,
        onCurStep: 0,
        onMaxStep: 20,
        onSpeed: 2,
        onRefresh: function onRefresh() {
            this.off = false;
            this.onCurStep = 0;
            this.on = true;
        },

pointLbRt: getCenter(volObj.crossLbRt),
        pointLtRb: getCenter(volObj.crossLtRb),

animation: function animation() {
            var _this = this;

if (this.off) {
                // animation when volume became 0
                [volObj.arcBigB, volObj.arcBigF, volObj.arcSmB, volObj.arcSmF].forEach(function(el) {
                    el.setAttribute("visibility", "hidden");
                });
                [volObj.crossLbRt, volObj.crossLtRb].forEach(function(el) {
                    el.setAttribute("visibility", "visible");
                });

var len = pathLen.speakLen;
                var step1 = 20;
                var step2 = this.offMaxStep - step1;
                var backLen = 0.7;

if (this.offCurStep >= this.offMaxStep - step1) {
                    var progress = (step1 + this.offCurStep - this.offMaxStep) / step1;
                    var progressB = fromTo(1, backLen, 1 - progress);
                    volObj.speakF.setAttribute("stroke-dasharray", len * progress + "," + len * 1.05);
                    volObj.speakF.setAttribute("stroke-dashoffset", -len * (1 - progress) / 2 + "");
                    volObj.speakB.setAttribute("stroke-dasharray", len * progressB + "," + len * 1.05);
                    volObj.speakB.setAttribute("stroke-dashoffset", -len * (1 - progressB) / 2 + "");
                }

if (this.offCurStep < step2 && this.offCurStep >= step2 - step1) {
                    var progress = 1 - (this.offCurStep - step2 + step1) / step1;
                    var progressB = fromTo(backLen, 1, progress);
                    volObj.speakB.setAttribute("stroke-dasharray", len * progressB + "," + len * 1.05);
                    volObj.speakB.setAttribute("stroke-dashoffset", -len * (1 - progressB) / 2 + "");
                }

if (this.offCurStep < step2 && this.offCurStep >= 0) {
                    (function() {
                        volObj.speakF.setAttribute("visibility", "hidden");
                        var progress = _this.offCurStep / step2;
                        [volObj.crossLbRt, volObj.crossLtRb].forEach(function(el, index) {
                            var scale = easing.outElastic(1 - progress, 0, 1, 1);
                            var dx = index == 0 ? easing.customSin(1 - progress, -3, 3, 1) : easing.customSin(1 - progress, -2, 2, 1);
                            var dy = index == 0 ? easing.customSin(1 - progress, -2, 2, 1) : easing.customSin(1 - progress, 2, -2, 1);
                            var x = -_this.pointLbRt.x * (scale - 1) + dx;
                            var y = -_this.pointLbRt.y * (scale - 1) + dy;
                            el.setAttribute("transform", transforms.translate(x, y, "") + transforms.scale(scale, scale));
                        });
                    })();
                }
                this.offCurStep += -this.offSpeed;
            } else {
                (function() {
                    if (_this.on) {
                        [volObj.speakF, volObj.arcBigB, volObj.arcSmB, volObj.arcSmF].forEach(function(el) {
                            el.setAttribute("visibility", "visible");
                        });
                        [volObj.crossLbRt, volObj.crossLtRb].forEach(function(el) {
                            el.setAttribute("visibility", "hidden");
                            el.setAttribute("transform", "scale(0)");
                        });
                        var len = pathLen.speakLen;
                        var _progress = _this.onCurStep / _this.onMaxStep;
                        volObj.speakF.setAttribute("stroke-dasharray", len * _progress + "," + len * 1.05);
                        volObj.speakF.setAttribute("stroke-dashoffset", -len * (1 - _progress) / 2 + "");
                        _this.onCurStep += _this.onSpeed;
                    }

var dxBig = undefined,
                        dxSm = undefined,
                        sclFactB = undefined,
                        sclFactSm = undefined;
                    if (_this.step >= _this.speed) {
                        _this.flag = !_this.flag;
                        _this.step = 0;
                    }
                    var progress = _this.step / _this.speed;
                    var amplitudeB = 1 - easing.inCubic(1 - _this.curPos, 0, 1, 0.5);
                    var amplitudeS = 1 - easing.inCubic(1 - _this.curPos, 0, 1, 1);

if (_this.curPos < 0.5) amplitudeB = 0;
                    if (amplitudeS <= 0 || !amplitudeS) amplitudeS = 0;

if (_this.flag) {
                        dxBig = fromTo(0, _this.dx * 3, progress);
                        dxSm = fromTo(0, -_this.dx * 2, progress);
                        sclFactB = fromTo(0, _this.ds, progress);
                        sclFactSm = fromTo(0, -_this.ds, progress);
                    } else {
                        dxBig = fromTo(_this.dx * 3, 0, progress);
                        dxSm = fromTo(-_this.dx * 2, 0, progress);
                        sclFactB = fromTo(_this.ds, 0, progress);
                        sclFactSm = fromTo(-_this.ds, 0, progress);
                    }

[volObj.arcBigF, volObj.arcBigB].forEach(function(el) {
                        var scale = _this.curPosBig.scale + sclFactB * amplitudeB;
                        var y = -drag.pointBig.y * (scale - 1) * 1.5;
                        el.setAttribute("transform", transforms.translate(_this.curPosBig.x + dxBig * amplitudeB, y, "") + transforms.scale(scale, scale));
                    });

[volObj.arcSmF, volObj.arcSmB].forEach(function(el) {
                        var scale = _this.curPosSm.scale + sclFactSm * amplitudeS;
                        var y = -drag.pointSm.y * (scale - 1) * 3;
                        el.setAttribute("transform", transforms.translate(_this.curPosSm.x + dxSm * amplitudeS, y, "") + transforms.scale(scale, scale));
                    });
                    _this.step++;
                })();
            }
            requestAnimationFrame(this.animation.bind(play));
        }
    };

requestAnimationFrame(play.animation.bind(play));

var drag = {
        dx: 0,
        maxX: +volObj.ctrlCirce.getAttribute("cx"),
        minX: +volObj.ctrlLineF.getAttribute("x1"),
        curCx: +volObj.ctrlCirce.getAttribute("cx"),

pointBig: getScalePoint(volObj.arcBigF),
        pointSm: getScalePoint(volObj.arcSmF),

interact: false,

animateDrag: function animateDrag() {
            var _this2 = this;

this.curCx += this.dx;
            var cx = this.curCx;

var smLen = pathLen.arcSmLen;
            var bgLen = pathLen.arcBigLen;

if (cx > this.maxX) {
                cx = this.maxX;
            }
            if (cx < this.minX) {
                cx = this.minX;
            }

var progress = (cx - this.minX) / (this.maxX - this.minX);
            play.curPos = progress;

volObj.ctrlCirce.setAttribute("cx", cx);
            volObj.ctrlLineF.setAttribute("x2", cx);

var scaleFactor = fromTo(1, 0.85, 1 - progress);
            var scaleDxBig = fromTo(0, -3, 1 - progress);
            var scaleDxSm = fromTo(0, -1, 1 - progress);

[volObj.arcBigF, volObj.arcBigB].forEach(function(el) {
                play.curPosBig.x = -_this2.pointBig.x * (scaleFactor - 1) + scaleDxBig;
                play.curPosBig.y = -_this2.pointBig.y * (scaleFactor - 1) * 1.5;
                play.curPosBig.scale = scaleFactor;
                el.setAttribute("transform", transforms.translate(play.curPosBig.x, play.curPosBig.y, "") + transforms.scale(scaleFactor, scaleFactor));
            });

[volObj.arcSmF, volObj.arcSmB].forEach(function(el) {
                play.curPosSm.x = -_this2.pointSm.x * (scaleFactor - 1) + scaleDxSm;
                play.curPosSm.y = -_this2.pointSm.y * (scaleFactor - 1) * 3;
                play.curPosSm.scale = scaleFactor;
                el.setAttribute("transform", transforms.translate(play.curPosSm.x, play.curPosSm.y, "") + transforms.scale(scaleFactor, scaleFactor));
            });

if (progress > 0.5) {
                if (play.off) {
                    play.onRefresh();
                }
                var prgForBig = fromTo(1, -1, 1 - progress);
                volObj.arcBigF.setAttribute("visibility", "visible");
                volObj.arcSmF.setAttribute("visibility", "visible");
                volObj.arcBigF.setAttribute("stroke-dasharray", bgLen * prgForBig + "," + bgLen * 1.05);
                volObj.arcBigF.setAttribute("stroke-dashoffset", -bgLen * (1 - prgForBig) / 2 + "");
                volObj.arcSmF.setAttribute("stroke-dasharray", smLen + "");
                volObj.arcSmF.setAttribute("stroke-dashoffset", "0");
            }

if (progress <= 0.5 && progress > 0) {
                if (play.off) {
                    play.onRefresh();
                }
                var prgForSm = fromTo(1, 0, 1 - progress * 2);
                volObj.arcBigF.setAttribute("visibility", "hidden");
                volObj.arcSmF.setAttribute("visibility", "visible");
                volObj.arcSmF.setAttribute("stroke-dasharray", smLen * prgForSm + "," + smLen * 1.05);
                volObj.arcSmF.setAttribute("stroke-dashoffset", -smLen * (1 - prgForSm) / 2 + "");
            }

if (progress <= 0) {
                volObj.arcSmF.setAttribute("visibility", "hidden");
                if (play.off == false) {
                    play.offRefresh();
                }
            }
        }
    };

$(document).on("mousedown touchstart", "#ctrlCirce, #ctrlLineB, #ctrlLineF", function(e) {
        var startX = e.pageX || e.originalEvent.touches[0].pageX;
        e.preventDefault();
        drag.interact = true;

if (this == volObj.ctrlLineB || this == volObj.ctrlLineF) {
            var rect = volObj.ctrlCirce.getBoundingClientRect();
            var center = (rect.left + rect.right) / 2.0;
            drag.dx = startX - center;
            drag.animateDrag();
        }

$(document).on("mousemove touchmove", function(e) {
            e.preventDefault();
            var curX = e.pageX || e.originalEvent.touches[0].pageX;
            drag.dx = curX - startX;
            startX = curX;
            drag.animateDrag();
        });

$(document).on("mouseup touchend", function(e) {
            if (drag.curCx < drag.minX) drag.curCx = drag.minX;
            if (drag.curCx > drag.maxX) drag.curCx = drag.maxX;
            $(document).off("mousemove touchmove mouseup touchend");
        });
    });

var memory = {
        flag: true,
        last: 0
    };

$(document).on("mousedown touchstart", ".speaker", function(e) {
        e.preventDefault();
        drag.interact = true;
        drag.dx = 0;
        if (memory.flag) {
            memory.flag = false;
            memory.last = drag.curCx;
            drag.curCx = 0;
            drag.animateDrag();
        } else {
            memory.flag = true;
            drag.curCx = memory.last;
            drag.animateDrag();
        }
    });

(function pevAnimation() {
        var _loop = function _loop(i) {
            setTimeout(function() {
                if (!drag.interact) {
                    drag.curCx = i;
                    drag.animateDrag();
                }
            }, 300 + drag.maxX - i);
        };

for (var i = drag.maxX; i > -1; i -= 5) {
            _loop(i);
        }

for (var i = 50; i <= drag.maxX; i += 3) {
            _loop2(i);
        }
    })();
});

编译

CSS

HTML

SVG Volume Control

svg, bell

编辑器支持Emmet

快捷键

SVG Volume Control

svg, bell

HTML5解释数学弧度（圆周率PI）的动画

HTML5/SVG飘带（锦旗）样式的动画菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：