React之动画实现

React之动画实现

一,介绍与需求

1.1,介绍

1,Ant Motion

Ant Motion能够快速在 React 框架中使用动画。在 React 框架下，只需要一段简单的代码就可以实现动画效果

2,SVG 

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

1.2,需求

提高网站的交互效果,提高用户体验。界面动效能加强用户认知且增加活力。

二,基于Ant Motion的react动画

2.1,动画效果

1,snow掉落效果

2,聚集与散开

 2.2,动画实现方式

以掉落效果为例：

import React from 'react';
import Snow from './Snow';
import './index.less';
class App extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      show: true,
    };
  }
  onEnd = () => {
    this.setState({
      show: false,
    });
  }
  render() {
    const children = Array(5).fill(1).map((c, i) => (
      <div key={i} className="addMoneyAnim" style={{ animationDelay: `${-Math.random() * 0.6}s` }} />
    ));
    return (
      <div className="snow-demo-wrapper" >
      <div className="snow-demo">
       
          <Snow onEnd={this.onEnd} >
            {children}
          </Snow>
        
      </div>
    </div>
    );
  }
}

export default App;

组件snow代码：

  import React from 'react';
  import TweenOne from 'rc-tween-one';
  import BezierPlugin from 'rc-tween-one/lib/plugin/BezierPlugin';
  import PropTypes from 'prop-types';
  
  import './index.less';
  
  TweenOne.plugins.push(BezierPlugin);
  
  class Snow extends React.Component {
    static propTypes = {
      children: PropTypes.any,
      className: PropTypes.string,
      prefixCls: PropTypes.string,
      amount: PropTypes.number,
      repeat: PropTypes.number,
      ease: PropTypes.string,
      startArea: PropTypes.object,
      endArea: PropTypes.object,
      startDelayRandom: PropTypes.number,
      basicToDuration: PropTypes.number,
      randomToDuration: PropTypes.number,
      rotateRandom: PropTypes.number,
      bezierSegmentation: PropTypes.number,
      onEnd: PropTypes.func,
    }
    static defaultProps = {
      prefixCls: 'snow',
      amount: 10,
      repeat: 0,
      ease: 'linear',
      startArea: {
        x: 0, y: -200,  '100%', height: 50,
      },
      endArea: {
        x: -200, y: '100%',  '120%', height: 100,
      },
      basicToDuration: 1200,
      randomToDuration: 800,
      startDelayRandom: 800,
      rotateRandom: 180,
      bezierSegmentation: 2,
      onEnd: () => { },
    };
  
    constructor(props) {
      super(props);
      this.state = {
        children: null,
      };
    }
    componentDidMount() {
      this.setChilrenToState();
    }
  
    onAnimEnd = () => {
      this.animEnd += 1;
      if (this.animEnd >= this.props.amount) {
        this.animEnd = 0;
        if (this.props.onEnd) {
          this.props.onEnd();
        }
      }
    }
  
    setChilrenToState() {
      const children = this.getChildrenToRender();
      this.setState({
        children,
      });
    }
  
    getChildrenToRender = () => {
      const {
        bezierSegmentation, basicToDuration, randomToDuration,
        amount, ease, startDelayRandom, repeat, rotateRandom,
      } = this.props;
      const children = React.Children.toArray(this.props.children);
      const rect = this.wrapperDom.getBoundingClientRect();
      const startArea = this.dataToNumber(this.props.startArea, rect);
      const endArea = this.dataToNumber(this.props.endArea, rect);
      return Array(amount).fill(1).map((k, i) => {
        const item = children[Math.floor(Math.random() * children.length)];
        const vars = Array(bezierSegmentation).fill(1).map((c, j) => {
          const hegiht = endArea.y - startArea.y - startArea.height;
          const y = (hegiht / bezierSegmentation) * (j + 1);
          const x = Math.random() * (Math.max(startArea.width, endArea.width)
            + Math.min(startArea.x, endArea.x));
          // console.log(hegiht, startArea, endArea, y);
          return {
            y,
            x,
          };
        });
        const delay = Math.random() * startDelayRandom;
        const animation = {
          bezier: {
            type: 'soft',
            autRotate: true,
            vars,
          },
          ease,
          repeat,
          repeatDelay: delay,
          delay,
          duration: basicToDuration + Math.random() * randomToDuration,
          onComplete: this.onAnimEnd,
        };
        const style = {
          transform: `translate(${Math.random() * (startArea.width) + startArea.x}px, ${
            Math.random() * (startArea.height) + startArea.y
          }px)`,
        };
        const child = rotateRandom ? (
          <TweenOne
            className="snowRotate"
            style={{ transform: `rotate(${Math.random() * rotateRandom}deg)` }}
            animation={{
              rotate: 0,
              duration: animation.duration * 4 / 5,
              delay: animation.delay,
              repeat: animation.repeat,
            }}
          >
            {item}
          </TweenOne>
        ) : item;
        return (
          <TweenOne
            animation={animation}
            style={style}
            key={`${item}-${i.toString()}`}
            className="snowChild"
          >
            {child}
          </TweenOne>
        );
      });
    }
    dataToNumber = (obj, rect) => {
      const toNumber = (v, full) => {
        if (typeof v === 'number') {
          return v;
        }
        const unit = v.replace(/[0-9|.]/g, '');
        switch (unit) {
          case '%':
            return parseFloat(v) * full / 100;
          case 'em':
            return parseFloat(v) * 16;
          default:
            return null;
        }
      };
      return {
        x: toNumber(obj.x, rect.width),
        y: toNumber(obj.y, rect.height),
         toNumber(obj.width, rect.width),
        height: toNumber(obj.height, rect.height),
      };
    }
    animEnd = 0;
    render() {
      const { prefixCls, ...props } = this.props;
      const { children } = this.state;
      [
        'amount',
        'repeat',
        'ease',
        'startArea',
        'endArea',
        'basicToDuration',
        'randomToDuration',
        'startDelayRandom',
        'bezierSegmentation',
        'rotateRandom',
        'onEnd',
      ].forEach(k => delete props[k]);
      const className = `${prefixCls}${props.className ? ` ${props.className}` : ''}`;
      return (
        <div
          {...props}
          ref={(c) => {
            this.wrapperDom = c;
          }}
          className={className}
        >
          {children}
        </div>
      );
    }
  }
  export default Snow
  

样式代码：

.snow-demo-wrapper {
  background: #DFEAFF;
  overflow: hidden;
  height: 500px;
  display: flex;
  align-items: center;
  position: relative;
}

.snow-demo {
   300px;
  height: 90%;
  margin: auto;
  position: relative;
  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/dNpuKMDHFEpMGrTxdLVR.jpg);
  background-position: top;
  background-size: 100% auto;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
}

.snow {
   100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.snowChild {
  position: absolute;
  top: 0;
  left: 0;
}

.snowRotate {
  transform-origin: center center;
} 

 2.3,动画分类

1,单元素动画rc-tween-one

cnpm install rc-tween-one --save

2,css样式动画rc-animate

cnpm install rc-animate --save

3,QueueAnim进出场动画

cnpm install rc-queue-anim --save

4,TextyAnim文字动画

cnpm install rc-texty --save

5,ScrollAnim页面滚动动画

cnpm install rc-scroll-anim --save

6,Banner动画

cnpm install rc-banner-anim --save

详细动画实例可查看官网

三,基于svg的react动画

3.1,动画效果

鼠标移入动画执行,鼠标移出动画停止

1,纵队动画

2,俄罗斯方块

3,坐标动画

3.2,动画实现方式

以纵队动画为例如下代码:

import React from 'react';
import Column from '../technology/Column';//实现动画的svg组件

export default class ReactAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hover: null,//是否有鼠标的移入
    };
  }

  onMouseEnter = (hover) => {//鼠标移入
    this.setState({
      hover,
    });
  };
  onMouseLeave = () => {//鼠标移出
    this.setState({
      hover: null,
    });
  };
  render() {

    return (
      <div>
         <div
            onMouseEnter={() => { this.onMouseEnter(1); }}
            onMouseLeave={this.onMouseLeave}
          >
         <div>
              {Column && React.createElement(Column, {
                hover:this.state.hover === 1,
              })}
            </div>
            </div>
      </div>
    );
  }
}

React.createElement()： 根据指定的第一个参数创建一个React元素。

React.createElement(
  type,
  [props],
  [...children]
)

第一个参数是必填，传入的是似HTML标签名称，如: ul, li 
第二个参数是选填，表示的是属性，如: className 
第三个参数是选填, 子节点，如: 要显示的文本内容

SVG配置组件Column.jsx:

import React from 'react';
import TweenOne from 'rc-tween-one';//引入动画插件

function TweenOneG(props) {
  function getAnimation() {
    return props.animation.map((item, i) => {
      return { ...item, duration: 400 };
    });
  }
  return (
    <TweenOne
      component="g"
      {...props}
      animation={
        props.animation ?
          getAnimation() :
          null
      }
    />);
}

export default class Column extends React.PureComponent {
  render() {
    const { hover } = this.props;
    return (
      <svg width="328px" height="150px" viewBox="0 0 328 150">
        <defs>
          <linearGradient x1="50%" y1="3.05125957%" x2="50%" y2="157.404891%" id="linearGradient-1">
            <stop stopColor="#2898FF" offset="0%" />
          </linearGradient>
        </defs>
        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          <TweenOneG animation={hover ? [{ y: -20 }, { y: -10 }, { y: -30 }] : this.default1Anim}>
            <g id="Group-33" transform="translate(0.000000, 116.000000)">
              <rect id="Rectangle-15" fill="#1890FF" opacity="0.03" x="0" y="2" width="20" height="145" />
            </g>
          </TweenOneG>
        </g>
      </svg>);
  }
}

 上面展示的只是部分代码,如需完整的代码,请先留言评论加关注