SVG 草本植物生长的动画

SVG Procedural Grass Source: http://hyperandroid.github.io/CAAT/documentation/demos/demo10/garden_org.html

svg, grass

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

console.clear();
var log = console.log.bind(console);

var Grass = (function() {
    function Grass(path, offset, width, height, minHeight, maxHeight, maxAngle, startAngle) {
        _classCallCheck(this, Grass);

this.path = path;

// Start position
        var sx = offset / 2 + random(width - offset);
        var sy = height;

var offsetX = 1.5;

this.maxAngle = random(10, maxAngle);
        this.angle = Math.random() * randomSign() * startAngle * Math.PI / 180;
        this.height = random(minHeight, maxHeight);

// Curvature
        var csx = sx - offsetX;
        var csy = sy - this.height / (Math.random() < 0.5 ? 1 : 2);

// Parallel point
        var psx = csx;
        var psy = csy;

this.offsetBase = 6;

var dx = sx + this.offsetBase;
        var dy = sy;

this.coords = [sx, sy, csx, csy, psx, psy, dx, dy];

this._height = this.height;
        this.height = random(150, Math.min(350, this.height));

this.growing = false;
        this.morphed = false;

this.start = 0;
        this.elapsed = 0;

var ambient = 0.85;

var color = [Math.floor(random(16, 48) * ambient), Math.floor(random(100, 255) * ambient), Math.floor(random(16, 48) * ambient)];

var hx = this.offsetBase / 2;
        var d = "M" + sx + "," + (sy + 2) + ",h" + hx + ",h" + hx + "z";

TweenLite.set(path, {
            fill: "rgb(" + color + ")",
            attr: {
                d: d
            }
        });
    }

Grass.prototype.rise = function rise() {

this.morphed = true;
        this.growing = false;
        this.elapsed = now() - this.start;

TweenLite.to(this, random(2.5, 3.5), {
            height: this._height
        });
    };

Grass.prototype.morph = function morph(morphSVG) {
        var _this = this;

var time = random(1.5, 3.5);
        var delay = random(0.5, 4.5);

this.growing = true;

TweenLite.to(this.path, time, {
            morphSVG: morphSVG,
            delay: delay,
            onComplete: function onComplete() {
                return _this.rise();
            }
        });
    };

Grass.prototype.update = function update(time) {

if (this.growing) return;

time -= this.elapsed;

var coords = this.coords;
        var tip = Math.sin(time * 0.0007);

var th = this.angle + Math.PI / 2 + tip * Math.PI / 180 * (this.maxAngle * Math.cos(time * 0.0002));
        var px = coords[0] + this.offsetBase + this.height * Math.cos(th);
        var py = coords[1] - this.height * Math.sin(th);

var d = "M" + coords[0] + "," + coords[1];
        d += "C" + coords[0] + "," + coords[1] + "," + coords[2] + "," + coords[3] + "," + px + "," + py;
        d += "C" + px + "," + py + "," + coords[4] + "," + coords[5] + "," + coords[6] + "," + coords[7] + "z";

if (!this.morphed) {
            this.morph(d);
            this.start = now();
        } else {
            this.path.setAttribute("d", d);
        }
    };

Grass.prototype.destroy = function destroy() {

TweenLite.killTweensOf(this);
        TweenLite.killTweensOf(this.path);

this.path.parentElement.removeChild(this.path);
    };

return Grass;
})();

var xmlns = "http://www.w3.org/2000/svg";

var perf = window.performance;
var now = perf ? perf.now.bind(perf) : Date.now;

var stage = document.querySelector("#stage");
var riseUp = document.querySelector("#rise");

var start = now();
var blades = [];

var offset = 400;
var width = 1200;
var height = 600;
var total = 40;

var minHeight = 125;
var maxHeight = height * 0.8;
var maxAngle = 20;
var startAngle = 40;

TweenLite.set(stage, {
    width: width,
    height: height
});

riseUp.addEventListener("click", init);
TweenLite.ticker.addEventListener("tick", render);

init();

function init() {

blades.forEach(function(blade) {
        return blade.destroy();
    });

blades = [];

for (var i = 0; i < total; i++) {
        var path = createSVG("path", stage);
        blades[i] = new Grass(path, offset, width, height, minHeight, maxHeight, maxAngle, startAngle);
    }
}

function render() {

var elapsed = now() - start;

if (!blades.length) return;

for (var i = 0; i < total; i++) {
        blades[i].update(elapsed);
    }
}

function createSVG(type, parent) {
    var node = document.createElementNS(xmlns, type);
    parent && parent.appendChild(node);
    return node;
}

function random(min, max) {
    if (max == null) {
        max = min;
        min = 0;
    }
    return min + Math.random() * (max - min);
}

function randomSign() {
    return Math.random() < 0.5 ? 1 : -1;
}

编译

CSS

HTML

SVG Procedural Grass Source: http://hyperandroid.github.io/CAAT/documentation/demos/demo10/garden_org.html

svg, grass

编辑器支持Emmet

快捷键

SVG Procedural Grass Source: http://hyperandroid.github.io/CAAT/documentation/demos/demo10/garden_org.html

svg, grass

TweenMax.js + lodash.js SVG 植物（藤曼/树叶）生长动画

使用GSAP SVG制作的办公室盆景植物动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：