使用DoodleSVG.js实现的骷髅头素描加载动画

Skull loading with gsap and doodlesvg

svg, skull

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var doodleSVG = function() {}
    doodleSVG.prototype.normalizeArray = function(x1, y1, x2, y2) {
        var a = x1 - x2
        var b = y1 - y2
        return Math.sqrt(a * a + b * b)
    }

doodleSVG.prototype.normalize = function(el) {
        if (!el) return 0
        var pathLength
        var points
        var normPoints
        var i
        var j
        var k
        var l
        var check = el.tagName.toLowerCase()

if (check === 'path') {
            i = el.style.strokeDasharray
            el.style.strokeDasharray = 'none'
            pathLength = el.getTotalLength() || 0
            el.style.strokeDasharray = i
        } else if (check === 'rect') {
            pathLength = 2 * el.getAttribute('width') + 2 * el.getAttribute('height')
        } else if (check === 'circle') {
            pathLength = 2 * Math.PI * parseFloat(el.getAttribute('r'))
        } else if (check === 'line') {
            pathLength = this.normalizeArray(el.getAttribute('x1'), el.getAttribute('y1'), el.getAttribute('x2'), el.getAttribute('y2'))
        } else if (check === 'polyline' || check === 'polygon') {
            for (
                points = el
                .getAttribute('points')
                .split(', ')
                .join(',')
                .split(' '),
                pathLength = 0,
                i = points[0].split(','),
                points[points.length - 1] === '' && points.pop(),
                check === 'polygon' &&
                (points.push(points[0]),
                    points[0].indexOf(',') === -1 && points.push(points[1])),
                j = 1; j < points.length; j++
            ) {
                normPoints = points[j].split(',')
                normPoints.length === 1 && (normPoints[1] = points[j++])
                normPoints.length === 2 &&
                    ((pathLength +=
                        this.normalizeArray(i[0], i[1], normPoints[0], normPoints[1]) || 0), (i = normPoints))
            }
        } else {
            check === 'ellipse' &&
                ((k = parseFloat(el.getAttribute('rx'))), (l = parseFloat(el.getAttribute('ry'))), (pathLength =
                    Math.PI * (3 * (k + l) - Math.sqrt((3 * k + l) * (k + 3 * l)))))
        }

return new doodleSVG.PathNormalized(el, pathLength)
    }
    doodleSVG.prototype.normalizeGroup = function(domList) {
        if (!domList) return 0
        else if (typeof domList !== 'object') return 0

var normalizedArray = [];
        [].forEach.call(domList, function(item, key) {
            var attemptNormalize = this.normalize(item)
            if (item) {
                normalizedArray.push(attemptNormalize)
            }
        }.bind(this))
        return normalizedArray.length > 0 ? normalizedArray : 0
    }

doodleSVG.PathNormalized = function(el, pathLength) {
        this.dom = el
        this.pathLength = pathLength
        this.end = 0
        this.origin = 0
        this.path = this.pathLength + 'px, ' + this.pathLength + 'px'
        this.dom.style.strokeDasharray = this.path
        this.dom.style.strokeDashoffset = '0px'
    }

doodleSVG.PathNormalized.prototype.drawOrigin = function(origin) {
        this.dom.style.strokeDashoffset = -(origin * this.pathLength) + 'px'
    }
    doodleSVG.PathNormalized.prototype.drawEnd = function(end) {
        var dWidth = this.pathLength * end - this.origin * this.pathLength
        var d = dWidth + 'px, ' + this.pathLength + 'px'
        this.dom.style.strokeOpacity = dWidth < 1e-9 ? 0 : 1
        this.dom.style.strokeDasharray = d
        this.path = d
    }

Object.defineProperty(doodleSVG.PathNormalized.prototype, 'origin', {
        set: function(newVal) {
            this._origin = newVal
            requestAnimationFrame(function() {
                this.drawOrigin(newVal)
            }.bind(this))
        },
        get: function() {
            return this._origin
        }
    })
    Object.defineProperty(doodleSVG.PathNormalized.prototype, 'end', {
        set: function(newVal) {
            this._end = newVal
            requestAnimationFrame(function() {
                this.drawEnd(newVal)
            }.bind(this))
        },
        get: function() {
            return this._end
        }
    })

var doodle = new doodleSVG()

var list = document.querySelectorAll("path, line")

TweenMax.set(list, {
        "fill-opacity": 0,
        opacity: 0,
        force3D: true
    });
    var myDoodles = doodle.normalizeGroup(list)
    var tl = new TimelineMax({
        repeat: -1,
        yoyo: true,
        repeatDelay: .5
    })
    tl
        .staggerTo(list, .3, {
            "fill-opacity": 1,

onStart: function() {
                TweenMax.set(this.target, {
                    opacity: 1
                });
            },
            onReverseComplete: function() {
                TweenMax.set(this.target, {
                    opacity: 0
                });
            }
        }, .15, 'b')
        .staggerTo(myDoodles, 1.25, {
            end: 1,
            ease: Quint.easeInOut
        }, .15, 'b')
})()

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: #1c1c1c;
    font-family: 'Press Start 2P', cursive;
    overflow: hidden;
}
.bg-svg-container {
    position: absolute;
    width: 100vh;
}
.bg-svg-container path,
.bg-svg-container line {
    fill: rgba(0, 0, 0, 0);
    stroke: #ffffff;
    stroke-width: 4px;
}
.svg-container {
    width: 160px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.svg-container path,
.svg-container line {
    fill: rgba(0, 0, 0, 0);
    stroke: #ffffff;
    stroke-width: 2px;
}
svg {
    display: block;
}
p {
    padding-top: 1em;
    color: white;
    text-align: center;
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.mer {
    animation: blink 1s infinite;
}
.ocean {
    animation: blink 1s infinite 0.25s;
}

HTML

<div class="svg-container">
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 168.8 214.1" xml:space="preserve" width="100%" height="100%">
        <path d="M12.6,68.1c0,0-4,1-8,8c0,0-4,29-2,43c0,0,1,9,18,17c0,0,8.5,4.5,7.5,24.5c0,0,0.5,27.5-1.5,39.5 c0,0,51,39,99-24c0,0-7-20-6-51" class="st0"></path>
        <path d="M119.7,140.1c0,0,21.9-6,32.9-20c0,0,55-89-51-117c0,0-94.2-15.8-95.1,70.1" class="st0"></path>
        <path d="M99.6,182.1c0,0-11-22-3-46c0,0,9-6,19-8c0,0,13-3,8-24c0,0-7-25-8-28c0,0,13-31,32-19" class="st0"></path>
        <path d="M7.6,94.1c0,0,6-15,17-13c0,0,17,0,18,21c0,0,4,15-18,16c0,0-14-4-15-16" class="st0"></path>
        <path d="M62.6,91.1c0,0,13-27,39-10c0,0,14,11,11,27c0,0-8,17-30,10c0,0-9,0-20-16" class="st0"></path>
        <path d="M20.9,116.7c0,0-12.4-17.5,3.6-35.5" class="st0"></path>
        <path d="M82.6,118.1c0,0-22.8-21.2,4.1-42.6" class="st0"></path>
        <path d="M27.6,173.1c0,0,20.1,11.1,68-4.5" class="st0"></path>
        <path d="M99.8,134.2c0,0,10.9,14.2-4.1,38.6" class="st0"></path>
        <path d="M40.6,142.1c0,0-2-16,0-22c0,0,3-7,9-1c0,0,14,11,14,21c0,0,2,6-7,4l-7-2C49.6,142.1,40.6,145.1,40.6,142.1z" class="st0"></path>
        <line x1="37.6" y1="162.1" x2="37.6" y2="186.1" class="st0"></line>
        <line x1="46.6" y1="162.1" x2="46.6" y2="189.1" class="st0"></line>
        <line x1="58.6" y1="160.1" x2="58.6" y2="189.1" class="st0"></line>
        <line x1="70.6" y1="160.1" x2="70.6" y2="185.1" class="st0"></line>
        <line x1="82.6" y1="155.1" x2="82.6" y2="182.1" class="st0"></line>
    </svg>
    <p>Loading<span class="mer">.</span><span class="ocean">.</span>
    </p>
</div>

Skull loading with gsap and doodlesvg

svg, skull

编辑器支持Emmet

快捷键

Skull loading with gsap and doodlesvg

svg, skull

使用Anime.js和SVG实现的Mozilla混合图标变形动画

使用anime.js SVG实现的人体变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：