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

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

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