react+TweenMax实现圆球滚动开关效果代码-html代码-BFW代码库

代码语言：html

代码描述：react+TweenMax实现圆球滚动开关效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background-color:#FFFCF9;
      text-align:center;
    }
    
    body,
    html {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    
    svg{
      width:100%;
      height:100%;
     
    }
    #app{
      width:100%;
      height:100%;
     
    }
    
    .hit{
     cursor:pointer;
     -webkit-tap-highlight-color:transparent;
    }
    </style>
</head>

<body>

    <div id="app"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        "use strict";

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var CleanToggle = function (_React$Component) {
  _inherits(CleanToggle, _React$Component);

  function CleanToggle(props) {
    _classCallCheck(this, CleanToggle);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.toggle = function (e) {
      _this.setState({ on: !_this.state.on });
    };

    _this.componentDidUpdate = function (e) {
      var tl = new TimelineMax();

      tl.to([_this.dotLBg, _this.dotGroup], 1, {
        x: _this.state.on ? 84 : 0,
        transformOrigin: "50% 50%",
        ease: Power3.easeInOut
      }).to(_this.toggleBg, 1, {
        fill: _this.state.on ? "#43B86C" : "#BC4B51",
        ease: Sine.easeInOut
      }, "-=1").to(_this.patternColor, 1, {
        fill: _this.state.on ? "#43B86C" : "#BC4B51",
        ease: Power3.easeInOut
      }, "-=1").to(_this.starPattern, 1, {
        attr: {
          x: _this.state.on ? 210 : 0
        },
        transformOrigin: "50% 50%",
        ease: Power3.easeInOut
      }, "-=1").to(".baubleGradStopColor", 1, {
        stopColor: _this.state.on ? "#184A13" : "#491615"
      }, "-=1");
    };

    _this.state = { on: true };

    return _this;
  }

  CleanToggle.prototype.componentDidMount = function componentDidMount() {
    this.toggle();
  };

  CleanToggle.prototype.render = function render() {
    var _this2 = this;

    return React.createElement(
      "svg",
      {
        viewBox: "0 0 800 600",
        xmlns: "http://www.w3.org/2000/svg",
        xmlnsXlink: "http://www.w3.org/1999/xlink",
        preserveAspectRatio: "xMidYMid slice"
      },
      React.createElement(
        "defs",
        null,
        React.createElement(
          "radialGradient",
          {
            id: "baubleShineGrad",
            cx: "352.79",
            cy: "293.87",
            r: "26",
            gradientUnits: "userSpaceOnUse"
          },
          React.createElement("stop", { offset: "0.01", stopColor: "#fff", stopOpacity: "0.5" }),
          React.createElement("stop", { offset: "0.69", stopColor: "#fff", stopOpacity: "0" })
        ),
        React.createElement(
          "radialGradient",
          {
            id: "baubleGrad",
            cx: 358,
            cy: 298,
            r: 26,
            gradientUnits: "userSpaceOnUse"
          },
          React.createElement("stop", { offset: "0.5", stopColor: "#FABE2B", stopOpacity: 0 }),
          React.createElement("stop", {
            offset: "0.8",
            className: "baubleGradStopColor",
            stopColor: "#491615",
            stopOpacity: "0.15"
          }),
          React.createElement("stop", {
            offset: 1,
            className: "baubleGradStopColor",
            stopColor: "#491615",
            stopOpacity: "0.65"
          })
        ),
        React.createElement(
          "filter",
          {
            id: "baubleShadow",
            width: "350%",
            height: "350%",
            colorInterpolationFilters: "sRGB"
          },
          React.createElement("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
          React.createElement("feOffset", { dx: "0", dy: "23", result: "offsetblur" }),
          React.createElement("feFlood", { id: "dropShadowAlpha", floodColor: "#000", floodOpacity: "0.21" }),
          React.createElement("feComposite", { in2: "offsetblur", operator: "in" }),
          React.createElement(
            "feMerge",
            null,
            React.createElement("feMergeNode", null)
          )
        ),
        React.createElement(
          "linearGradient",
          {
            id: "baubleCapGrad",
            x1: "351.26",
            y1: "272.94",
            x2: "364.74",
            y2: "272.94",
            gradientUnits: "userSpaceOnUse"
          },
          React.createElement("stop", { offset: "0.09", stopColor: "#f5bb3b" }),
          React.createElement("stop", { offset: "0.31", stopColor: "#fff" }),
          React.createElement("stop", { offset: "0.51", stopColor: "#f5bb3b" }),
          React.createElement("stop", { offset: "0.86", stopColor: "#bd902d" }),
          React.createElement("stop", { offset: "1", stopColor: "#f5bb3b" })
        ),
        React.createElement(
          "pattern",
          {
            id: "starPattern",
            ref: function ref(starPattern) {
              _this2.starPattern = starPattern;
            },
            width: 92,
            height: 92,
            patternTransform: "translate(-10.02 -3.42) scale(0.33)",
            patternUnits: "userSpaceOnUse",
            viewBox: "0 0 92 92",
            x: 0,
            y: 0
.........完整代码请登录后点击上方下载按钮下载查看