基于html5 svg网球风格开关按钮动画特效



93 368 123



特效描述:基于html5 svg网球风格 开关按钮动画,开关切换动画特效

代码结构

1. 引入JS

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/TweenMax.min.js"></script>

2. HTML代码

<div id="app"></div>
<script>
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
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 DribbbleToggle = function (_React$Component) {
  _inherits(DribbbleToggle, _React$Component);
  function DribbbleToggle(props) {
    _classCallCheck(this, DribbbleToggle);
    var _this = _possibleConstructorReturn(this, (DribbbleToggle.__proto__ || Object.getPrototypeOf(DribbbleToggle)).call(this, props));
    _this.toggle = function (e) {
      if (_this._tl.isActive()) {
        return;
      }
      _this.setState({ on: !_this.state.on });
    };
    _this.componentDidUpdate = function (e) {
      _this._tl = new TimelineMax().timeScale(1.62);
      var _xSpin = _this.state.on ? '+=' + Math.random() * 50 : '-=' + Math.random() * 50;
      var _ySpin = _this.state.on ? '+=' + (Math.random() * 25 + 15) : '-=' + (Math.random() * 25 - 15);
      _this._tl.set('.ballHitRing', {
        x: _this.state.on ? 23 : -23
      }).to([_this.mainBall, _this.ballShadow], 1, {
        x: _this.state.on ? 84 : 0,
        ease: Power1.easeOut
      }).to(_this.toggleBg, 1, {
        ease: Power2.easeInOut
      }, "-=1").to(_this.mainBall, 0.5, {
        scale: 0.4,
        ease: Power2.easeIn,
        transformOrigin: "50% 50%"
      }, '-=1').to(_this.ballShadow, 0.5, {
        scale: 0.3,
        ease: Power2.easeIn,
        transformOrigin: "50% 0%"
      }, '-=1').to('#dribbbleShadowAmount', 0.5, {
        attr: {
          stdDeviation: 0
        },
        ease: Power2.easeIn
      }, '-=1').staggerFromTo('.ballHitRing', 0.8, {
        strokeWidth: 10,
        attr: {
          r: 0
        },
        alpha: 0.5
      }, {
        strokeWidth: 0,
        attr: {
          r: 32
        },
        alpha: 0,
        ease: Power2.easeOut
      }, 0.1, 0.45).to(_this.mainBall, 0.5, {
        scale: 1,
        ease: Power2.easeOut
      }, 0.5).to(_this.ballShadow, 0.5, {
        scale: 1,
        ease: Power2.easeOut,
        transformOrigin: "50% 0%"
      }, 0.5).to('#dribbbleShadowAmount', 0.5, {
        attr: {
          stdDeviation: 4
        },
        ease: Power2.easeOut
      }, 0.5).to(_this.dribbbleBallPattern, 1.1, {
        attr: {
          x: _xSpin,
          y: _ySpin
        },
        ease: Power2.easeInOut,
        transformOrigin: "50% 0%"
      }, 0);
    };
    _this.state = { on: false };
    _this._tl = new TimelineMax();
    return _this;
  }
  _createClass(DribbbleToggle, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.toggle();
    }
  }, {
    key: 'render',
    value: 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: 'dribbbleShineGrad',
              cx: 350,
              cy: 290,
              r: 30,
              gradientUnits: 'userSpaceOnUse'
            },
            React.createElement('stop', { offset: '0.01', stopColor: '#fff', stopOpacity: '0.25' }),
            React.createElement('stop', { className: 'ballShineTint', offset: '0.5', stopColor: '#FFF', stopOpacity: '0' })
          ),
          React.createElement(
            'radialGradient',
            {
              id: 'dribbbleGrad',
              cx: 358,
              cy: 298,
              r: 30,
              gradientUnits: 'userSpaceOnUse'
            },
            React.createElement('stop', { offset: '0.5',
              stopColor: '#FABE2B',
              stopOpacity: 0
            }),
            React.createElement('stop', { offset: '0.8',
              className: 'dribbbleGradStopColor',
              stopColor: '#CCE256',
              stopOpacity: '0.15'
            }),
            React.createElement('stop', {
              offset: 1,
              className: 'dribbbleGradStopColor',
              stopColor: '#9BB522',
              stopOpacity: '0.65'
            })
          ),
          React.createElement(
            'filter',
            {
              id: 'dribbbleShadow',
              width: '350%',
              height: '350%',
              colorInterpolationFilters: 'sRGB'
            },
            React.createElement('feGaussianBlur', { id: 'dribbbleShadowAmount', 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(
            'pattern',
            {
              id: 'dribbbleBallPattern',
              ref: function ref(dribbbleBallPattern) {
                _this2.dribbbleBallPattern = dribbbleBallPattern;
              },
              width: '92',
              height: '92',
              patternTransform: 'translate(38 -16)',
              patternUnits: 'userSpaceOnUse',
              viewBox: '0 0 92 92',
              x: 0,
              y: 0
            },
            React.createElement('rect', { width: '92', height: '92', fill: 'none' }),
            React.createElement(
              'g',
              null,
              React.createElement('path', { className: 'ballLine', d: 'M0,6.9C24.84,6.9,36.21,25.35,36.21,46S23.61,85.1,0,85.1', fill: 'none', stroke: '#C6D4CF', strokeMiterlimit: '10', strokeWidth: '3.4' }),
              React.createElement('path', { className: 'ballLine', d: 'M92,85.1C69.72,85.1,55.79,66.65,55.79,46S71.93,6.9,92,6.9', fill: 'none', stroke: '#C6D4CF', strokeMiterlimit: '10', strokeWidth: '3.4' })
            )
          ),
          React.createElement(
            'filter',
            { id: 'insetShadow' },
            React.createElement('feOffset', { dx: '0', dy: '-4' }),
            React.createElement('feGaussianBlur', { stdDeviation: '2.5', result: 'offset-blur' }),
            React.createElement('feComposite', {
              operator: 'out',
              'in': 'SourceGraphic',
              in2: 'offset-blur',
              result: 'inverse'
            }),
            React.createElement('feFlood', { floodColor: 'black', floodOpacity: '0.5', result: 'color' }),
            React.createElement('feComposite', { operator: 'in', 'in': 'color', in2: 'inverse', result: 'shadow' }),
            React.createElement('feComposite', { operator: 'over', 'in': 'shadow', in2: 'SourceGraphic' })
          ),
          React.createElement(
            'filter',
            {
              id: 'dropShadow',
              width: '350%',
              height: '350%',
              colorInterpolationFilters: 'sRGB'
            },
            React.createElement('feGaussianBlur', { stdDeviation: '4', result: 'coloredBlur' }),
            React.createElement('feOffset', { dx: '0', dy: '3', result: 'offsetblur' }),
            React.createElement('feFlood', { id: 'dropShadowAlpha', floodColor: '#000', floodOpacity: '0.4' }),
            React.createElement('feComposite', { in2: 'offsetblur', operator: 'in' }),
            React.createElement(
              'feMerge',
              null,
              React.createElement('feMergeNode', null),
              React.createElement('feMergeNode', { 'in': 'SourceGraphic' })
            )
          ),
          React.createElement('rect', { id: 'court',
            x: 320,
            y: 260,
            width: 160,
            height: 80,
            rx: 40,
            ry: 40,
            stroke: '#FFF'
          }),
          React.createElement(
            'clipPath',
            { id: 'courtMask' },
            React.createElement('use', {
              xlinkHref: '#court',
              fill: '#186735'
            })
          ),
          React.createElement('path', { id: 'heart', d: 'M12.32,0A4.67,4.67,0,0,0,8.5,2,4.67,4.67,0,0,0,0,4.67C0,11.05,6.63,17,8.5,17S17,11.05,17,4.67A4.67,4.67,0,0,0,12.32,0Z', fill: '#FFF', stroke: '#FFF', strokeWidth: '0' }),
          React.createElement(
            'g',
            { id: 'tennisNet' },
            React.createElement('line', { x1: 2, y1: 2, x2: 2, y2: 102, fill: 'none', stroke: '#FFF', strokeDasharray: '10 5', strokeWidth: '1' }),
            React.createElement('circle', { cx: 2, cy: 2, r: 2, fill: '#fbb03b' }),
            React.createElement('circle', { cx: 2, cy: 102, r: 2, fill: '#fbb03b' })
          ),
          React.createElement('path', { id: 'fifteen', d: 'M2.81,2.85.58,3.39,0,1.09,3.67,0H5.58V12.86H2.81ZM8,11.16l1.7-2a4.48,4.48,0,0,0,3,1.38c1.31,0,2.13-.63,2.13-1.77v0C14.92,7.62,14,7,12.66,7a5.47,5.47,0,0,0-2.14.47L8.9,6.38,9.27.09h7.84V2.55H11.67l-.14,2.21a6.09,6.09,0,0,1,1.67-.22c2.49,0,4.47,1.21,4.47,4.09v0c0,2.7-1.91,4.42-4.85,4.42A6.56,6.56,0,0,1,8,11.16Z' })
        ),
        React.createElement('use', { id: 'courtFill',
          xlinkHref: '#court',
          fill: '#186839',
          strokeWidth: 0
        }),
        React.createElement(
          'g',
          { clipPath: 'url(#courtMask)' },
          React.createElement(
            'g',
            { filter: 'url(#insetShadow)',
              opacity: 0.23,
              ref: function ref(toggleBg) {
                _this2.toggleBg = toggleBg;
              }
            },
            React.createElement('line', { x1: 400,
              x2: 400,
              y1: 260,
              y2: 340,
              stroke: '#FFF'
            }),
            React.createElement('line', { x1: 360,
              x2: 360,
              y1: '275',
              y2: '325',
              stroke: '#FFF'
            }),
            React.createElement('line', { x1: 440,
              x2: 440,
              y1: '275',
              y2: '325',
              stroke: '#FFF'
            }),
            React.createElement('line', { x1: 360,
              x2: 440,
              y1: 300,
              y2: 300,
              stroke: '#FFF'
            }),
            React.createElement('line', { x1: 320,
              x2: '480',
              y1: '275',
              y2: '275',
              stroke: '#FFF'
            }),
            React.createElement('line', { x1: 320,
              x2: '480',
              y1: '325',
              y2: '325',
              stroke: '#FFF'
            }),
            React.createElement('rect', {
              x: 373,
              y: 273,
              width: 54,
              height: 54,
              rx: 80,
              ry: 80,
              fill: 'none'
            })
          )
        ),
        React.createElement('use', { id: 'courtOutline',
          xlinkHref: '#court',
          fill: 'none',
          strokeWidth: 3
        }),
        React.createElement('use', {
          xlinkHref: '#tennisNet',
          x: 398,
          y: 248
        }),
        React.createElement('circle', {
          filter: 'url(#dribbbleShadow)',
          ref: function ref(ballShadow) {
            _this2.ballShadow = ballShadow;
          },
          cx: 358,
          cy: 314,
          r: 30,
          fill: '#000',
          opacity: 1
        }),
        React.createElement('use', {
          xlinkHref: '#fifteen',
          fill: '#FFF',
          x: 332,
          y: 293
        }),
        React.createElement('use', { xlinkHref: '#heart',
          x: 450,
          y: 290,
          fill: '#FFF'
        }),
        React.createElement('circle', { className: 'ballHitRing',
          cx: 400,
          cy: 300,
          r: 0,
          fill: 'none',
          stroke: '#FFF',
          strokeWidth: 30,
          opacity: 1
        }),
        React.createElement('circle', { className: 'ballHitRing',
          cx: 400,
          cy: 300,
          r: 0,
          fill: 'none',
          stroke: '#FFF',
          strokeWidth: 30,
          opacity: 1
        }),
        React.createElement(
          'g',
          null,
          React.createElement(
            'g',
            {
              ref: function ref(wholeBall) {
                _this2.wholeBall = wholeBall;
              } },
            React.createElement(
              'g',
              {
                ref: function ref(mainBall) {
                  _this2.mainBall = mainBall;
                }
              },
              React.createElement('circle', { ref: function ref(ballBg) {
                  _this2.ballBg = ballBg;
                },
                cx: 358, cy: 300, r: 30, fill: '#DDED56' }),
              React.createElement('circle', { cx: 358, cy: 300, r: 30, fill: 'url(#dribbbleBallPattern)', strokeMiterlimit: '10', strokeWidth: '4.98' }),
              React.createElement('circle', { cx: 358, cy: 300, r: 30, fill: 'url(#dribbbleGrad)' }),
              React.createElement('circle', {
                cx: 358,
                cy: 300,
                r: 30,
                fill: 'url(#dribbbleShineGrad)'
                /*       ref={dotGrad => {
                this.dotGrad = dotGrad;
                }} */
              })
            )
          )
        ),
        React.createElement('rect', {
          onClick: this.toggle,
          ref: function ref(hit) {
            _this2.hit = hit;
          },
          className: 'hit',
          x: '321',
          y: '263',
          width: '158',
          height: '74',
          rx: '37',
          ry: '37',
          fill: 'transparent'
        })
      );
    }
  }]);
  return DribbbleToggle;
}(React.Component);
ReactDOM.render(React.createElement(DribbbleToggle, null), document.querySelector("#app"));
//TweenMax.globalTimeScale(0.2)</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 切换按钮 h5按钮动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到