gsap实现小树发芽生长绿叶动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现小树发芽生长绿叶动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
.animation {
  height: 100vh;
}

.scene {
  height: 100%;
  width: 100%;
}

.btn {
  position: fixed;
  top: 15px;
  right: 30px;
  padding: 0;
  background: transparent;
  border: none;
  color: #2d3436;
  font-family: "Sacramento";
  font-size: 2rem;
}
.btn:active, .btn:focus {
  text-decoration: underline;
  border: none;
  outline: none;
}
</style>




</head>

<body>
  <div class="animation"></div>
 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script  >
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const settings = {
  colors: {
    background: "#9ab3f5",
    fill: "#a3d8f4",
    stroke: "#2d3436" },

  animation: {
    height: window.innerHeight,
    width: window.innerWidth,
    maxPlantCount: 6,
    minPlantCount: 1 },

  plant: {
    maxHeight: 0.75, // relative to the animation size
    minHeight: 0.45,
    minNodes: 3,
    maxNodes: 6,
    strokeWidth: 2 },

  durations: {
    leaf: 0.035, // relative to the element size
    stem: 0.008 },

  isAnimationOk: window.matchMedia('(prefers-reduced-motion: no-preference)').matches };


const utils = {
  getRandFromRange: function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  } };


class Scene extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "setAnimationVars",









    () => {
      this.plantCount = utils.getRandFromRange(settings.animation.minPlantCount, settings.animation.maxPlantCount);
      this.margin = this.height * settings.plant.maxHeight / settings.plant.maxNodes;
      this.plantSection = (this.width - 2 * this.margin) / this.plantCount;
      this.timeline = gsap.timeline();
    });_defineProperty(this, "update",

    () => {
      this.setState({ key: Math.random() });
      this.setAnimationVars();
    });this.state = { key: Math.random() };this.height = settings.animation.height;this.width = settings.animation.width;this.setAnimationVars();}

  render() {
    return /*#__PURE__*/(
      React.createElement(React.Fragment, null, /*#__PURE__*/
      React.createElement("svg", { className: "scene",
        key: this.state.key,
        stroke: settings.colors.stroke,
        strokeWidth: settings.plant.strokeWidth,
        strokeLinecap: "round",
        viewBox: `0 0 ${this.width} ${this.height}`,
        xmlns: "http://www.w3.org/2000/svg",
        preserveAspectRatio: "xMidYMax slice" }, /*#__PURE__*/
      React.createElement("rect", { x: 0, y: 0, height: this.height, width: this.width, fill: settings.colors.background,
        stroke: "none" }),
      [...Array(this.plantCount)].map((e, i) => {
        return /*#__PURE__*/(
          React.createElement(Plant, { key: "plant-" + i, id: i,
            x: this.margin + (i + 0.5) * this.plantSection,
            y: this.height,
            parentTimeline: this.timeline,
            maxHeight: this.height * settings.plant.maxHeight,
            minHeight: this.height * settings.plant.minHeight }));

      })), /*#__PURE__*/

      React.createElement("button", { class: "btn", onClick: this.update, type: "button" }, "again")));


  }}


class Plant extends React.Component {
  constructor(props) {
    super(props);

    this.id = props.id;
    this.x = props.x;
    this.y = props.y;
    this.minHeight = props.minHeight;
    this.maxHeight = props.maxHeight;
    this.parentTimeline = props.parentTimeline;

    this.height = utils.getRandFromRange(this.minHeight, this.maxHeight);
    this.nodes = utils.getRandFromRange(settings.plant.minNodes, settings.plant.maxNodes);
    this.stemDuration = this.height * settings.durations.stem;
    this.plantDelay = Math.random() * 2;
    this.step = this.height / this.nodes;

    this.stem = null;

    this.timeline = gsap.timeline();
  }

  componentDidMount() {
    if (settings.isAnimationOk) {
      this.timeline.fromTo(
      this.stem,
      {
        drawSVG: "0% 0%" },

      {
        duration: this.stemDuration,
        ease: "linear",
        drawSVG: "0% 100%" },

      `<+${this.plantDelay}`);


      this.parentTimeline.add(this.timeline, "<");
    }
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("g", { className: "plant" }, /*#__PURE__*/
      React.createElement("path", { className: "stem", d: `M ${this.x} ${this.y} L ${this.x} ${this.y - this.height}`,
        ref: path => this.stem = path }),
      [...Array(this.nodes)].map((e, i) => {
        let y = .........完整代码请登录后点击上方下载按钮下载查看