TweenMax.js+Canvas 美丽的贴纸分形动画

Source: http://qph.is.quoracdn.net/main-qimg-6df117595cf830a60d2bb75c227cd5ac

canvas，gsap

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2552
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("c");
var $ = canvas.getContext("2d");
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;

var right = Math.PI / 2;
var backgroundColor = "rgb(249, 241, 230)";
var blue = "#23567b";

function reset(x, y) {
    $.setTransform(1, 0, 0, 1, 0, 0); // reset
    $.translate(x, y);
    $.rotate(-1 * Math.PI / 2);
}

function background() {
    $.setTransform(1, 0, 0, 1, 0, 0); // reset
    $.fillStyle = backgroundColor;
    $.fillRect(0, 0, W, H);
}

function rotate(rotation) {
    $.rotate(rotation);
}

function line(x, y, rotation, length) {
    reset(W / 2 + x, H / 2 + y);
    rotation *= right;
    $.rotate(rotation);
    $.beginPath();
    $.moveTo(0, 0);
    $.lineTo(0, length);
    $.stroke();
}

drawPart(0, 0, 0, length, iterations);
    drawPart(0, 0, 1, length, iterations);
    drawPart(0, 0, 2, length, iterations);
    drawPart(0, 0, 3, length, iterations);
}

var now = 0 // recursion level

var length = Math.min(W / 2.5, H / 2.5) // base length
var vars = {
    where: 0.5, // where to put new iteration (0=begin, 1=end)
    scaleLength: 0.5 // scale every line with
}

// animate from one recursion level to another
function drawTo(to, stay, cb) {
    var reverse = false;
    if (to < now) {
        reverse = true
    }

function d() {
        function update() {
            background();
            reset(W / 2, H / 2);
            $.strokeStyle = blue;
            drawFractal(now, args.finalLength);
        }

if (now == to) {
            var args = {
                finalLength: reverse ? 1 : 0
            }
            TweenLite.to(args, stay, {
                finalLength: reverse ? 0 : 1,
                onUpdate: update,
                ease: Power3.easeOut,
                onComplete: function() {
                    cb && cb()
                }
            });
        } else if (now < to) {
            var args = {
                finalLength: 0
            };
            TweenLite.to(args, stay, {
                finalLength: 1,
                onUpdate: update,
                ease: Power3.easeOut,
                onComplete: function() {
                    now += 1
                    console.log("now", now)
                    d(now)
                }
            });
        } else {
            var args = {
                finalLength: 1
            }
            TweenLite.to(args, stay, {
                finalLength: 0,
                onUpdate: update,
                ease: Power3.easeOut,
                onComplete: function() {
                    now -= 1
                    console.log("now", now)
                    d(now)
                }
            });
        }
    }
    d();
}

// animate width-var + scaleLength var
function sequence(arrayW, arrayS, cb) {
    function updateDrawing() {
        background()
        reset(W / 2, H / 2)
        $.strokeStyle = blue
        drawFractal(now, 1)
    }

if (arrayW.length == 0) {
        cb && cb()
        return
    }
    var w = arrayW.shift()
    var s = arrayS.shift()

TweenLite.to(vars, 5, {
        where: w,
        scaleLength: s,
        onUpdate: updateDrawing,
        ease: Power2.easeInOut,
        onComplete: function() {
            sequence(arrayW, arrayS, cb)
        }
    })
}

function playAnimation() {
    drawTo(6, 1.2, function() { // animate to 6
        sequence( // breathing (:
            [0.6, 0.35, 0.5], // where-var
            [0.5, 0.4, 0.5], // scaleLength-var
            function() {
                drawTo(0, 1.2, playAnimation)
            }
        )
    })
}

setTimeout(playAnimation, 2000)

编译

CSS

HTML

Source: http://qph.is.quoracdn.net/main-qimg-6df117595cf830a60d2bb75c227cd5ac

canvas，gsap

编辑器支持Emmet

快捷键

Source: http://qph.is.quoracdn.net/main-qimg-6df117595cf830a60d2bb75c227cd5ac

canvas，gsap

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：