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

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

代码语言：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))).........完整代码请登录后点击上方下载按钮下载查看