TweenMax+Rx实现鲜花签名动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+Rx实现鲜花签名动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      user-select: none;
      color: #111;
      font-family: serif;
    }
    
    body {
      background-color: #f0f0f0;
      cursor: pointer;
      background-size: cover;
      background-position: center center;
      background-image: url(//repo.bfw.wiki/bfwrepo/image/636dea74def17.png);
    }
    
    #app {
      width: 100%;
      height: 100%;
    }
    
    #stage {
      backface-visibility: visible;
    }
    
    #download-button {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 10px;
      display: inline-block;
      margin: 10px;
      background-color: #f0f0f0;
      color: #303030;
      border-radius: 4px;
      cursor: pointer;
      border-bottom: solid 3px #f0f0f0;
    }
    #download-button:hover {
      border-bottom: solid 3px #d7d7d7;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="app">
        <svg id="stage" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
		<g id="branchGroup"></g>
		<g id="thornGroup"></g>
		<g id="leafGroup"></g>
		<g id="flowerGroup"></g>
	</svg>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Rx.5.0.1.js"></script>
    <script>
        "use strict";
// Tidier code with webpack and better Typescript in Github
// https://github.com/ste-vg/plant-drawer
console.clear();
var BranchState;
(function (BranchState) {
    BranchState[BranchState["ready"] = 0] = "ready";
    BranchState[BranchState["animating"] = 1] = "animating";
    BranchState[BranchState["ended"] = 2] = "ended";
})(BranchState || (BranchState = {}));
class Branch {
    constructor(stage, settings, grid, placeBehind = null, setPath = null) {
        this.branches = [];
        this.state = BranchState.ready;
        this.branchOut = new Rx.Subject();
        this.thornOut = new Rx.Subject();
        this.flowerOut = new Rx.Subject();
        this.leafOut = new Rx.Subject();
        this.grid = 50; //grid;
        this.stage = stage;
        this.placeBehind = placeBehind;
        settings.width = 2;
        settings.opacity = 1;
        this.state = BranchState.animating;
        let path = setPath ? setPath : this.createLine(settings);
        let branchCount = 2;
        for (let i = 0; i < branchCount; i++) {
            this.createSqwig(i, branchCount, path, JSON.parse(JSON.stringify(settings)));
        }
    }
    createSqwig(index, total, path, settings) {
        let branch = document.createElementNS("http://www.w3.org/2000/svg", 'path');
        branch.setAttribute('d', path);
        branch.style.fill = 'none';
        branch.style.stroke = this.getColor(index);
        branch.style.strokeLinecap = "round";
        settings.length = branch.getTotalLength();
        settings.progress = settings.length;
        branch.style.strokeDasharray = `${settings.length}, ${settings.length}`;
        branch.style.strokeDashoffset = `${settings.length}`;
        this.branches.push({ path: branch, settings: settings });
        if (!this.placeBehind)
            this.stage.appendChild(branch);
        else
            this.stage.insertBefore(branch, this.placeBehind.branches[0].path);
        let widthTarget = settings.sections * 0.8;
        TweenMax.set(branch, { x: -index * 3, y: -index * 3 });
        TweenMax.to(settings, settings.sections * 0.2, {
            progress: 0,
            width: widthTarget,
            ease: Power1.easeOut,
            delay: index * (settings.sections * 0.001),
            onUpdate: () => {
                if (index == 0 && settings.sections > 4) {
                    let choice = Math.random();
                    let length = settings.length - settings.progress;
                    let pos = branch.getPointAtLength(length);
                    let sec = Math.ceil((settings.progress / settings.length) * settings.sections) - 2;
                    if (sec < 4)
                        sec = 4;
                    let out = {
                        position: { x: pos.x, y: pos.y },
                        width: widthTarget,
                        sections: sec
                    };
                    if (choice < 0.02)
                        this.branchOut.next(out);
                    else if (choice < 0.1)
                        this.thornOut.next(out);
                    else if (choice < 0.2)
                        this.flowerOut.next(out);
                    else if (choice < 0.4)
                        this.leafOut.next(out);
                }
            },
            onComplete: () => {
                if (index = total - 1)
                    this.state = BranchState.ended;
                //branch.remove();
            }
        });
    }
    update() {
        this.branches.map((set) => {
            set.path.style.strokeDashoffset = `${set.settings.progress}`;
            set.path.style.strokeWidth = `${set.settings.width}px`;
            //set.path.style.opacity = `${set.settings.opacity}`;
        });
    }
    createLine(settings) {
        let x = settings.x;
        let y = settings.y;
        let dx = settings.directionX;
        let dy = settings.directionY;
        let path = [
            'M',
            '' + x,
            '' + y
        ];
        let steps = settings.sections;
        let step = 0;
        let getNewDirection = (direction, goAnywhere) => {
            if (!goAnywhere && settings['direction' + direction.toUpperCase()] != 0)
                return settings['direction' + direction.toUpperCase()];
            return Math.random() < 0.5 ? -1 : 1;
        };
        if (steps * 2 > step)
            path.push("Q");
        while (step < steps * 2) {
            step++;
            let stepUp = this.stepUp(step);
            x += (dx * stepUp) * this.grid;
            y += (dy * stepUp) * this.grid;
            if (step != 1)
                path.push(',');
            path.push('' + x);
            path.push('' + y);
            if (step % 2 != 0) {
                dx = dx == 0 ? getNewDirection('x', step > 8) : 0;
                dy = dy == 0 ? getNewDirection('y', step > 8) : 0;
            }
        }
        return path.join(' ');
    }
    stepUp(step) {
        let r = Math.random() * 10;
        return step / (10 + r);
    }
    clear() {
        this.branchOut.complete();
        this.thornOut.complete();
        this.leafOut.complete();
        this.flowerOut.complete();
        this.branches.map((set) => set.path.remove());
    }
    getColor(index) {
        let base = ['#0C3404'];
        let greens = ['#257502']; //, '#5DC4A8', '#4BBD9E', '#3AB795', '#A7CCBA', '#91C0A9', '#86BAA1']
        let chooseFrom = index == 0 ? base : greens;
        return chooseFrom[Math.floor(Math.random() * chooseFrom.length)];
    }
}
class Flower {
    constructor(stage, position, size, colors) {
        //outer petals
        this.petals = [];
        let petalCount = 8;
        let p = petalCount;
        let rotateAmount = 360 / petalCount;
        let growRotation = (Math.random() * 80) - 40;
        while (p > 0) {
            --p;
            let petal = document.createElementNS("http://www.w3.org/2000/svg", 'path');
            petal.setAttribute('d', this.createPetalPath({ x: 0, y: 0 }, size));
            petal.setAttribute('class', 'petal');
            petal.style.fill = colors.outer;
            petal.style.stroke = 'none';
            this.petals.push(petal);
            let rotate = (rotateAmount * p) + Math.random() * 10;
            TweenMax.set(petal, { scale: 0, x: position.x, y: position.y, rotation: rotate });
            let delay = Math.random() / 2;
            TweenMax.to(petal, 1.5, { scale: 1, delay: delay });
            TweenMax.to(petal, 3, { rotation: '+=' + growRotation, delay: delay, ease: Elastic.easeOut });
            stage.appendChild(petal);
        }
        // inner petals
        petalCount = 6;
        p = petalCount;
        rotateAmount = 360 / petalCount;
        while (p > 0) {
            --p;
            let petal = document.createElementNS(&q.........完整代码请登录后点击上方下载按钮下载查看