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, width: '100%', height: 50,
       },
       endArea: {
         x: -200, y: '100%', width: '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),
         width: 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 {
   width: 300px;
   height: %;
   margin: auto;
   position: relative;
   background-image: url(https://gw.alipayobjects.com/zos/rmsportal/dNpuKMDHFEpMGrTxdLVR.jpg);
   background-position: top;
   background-size: % auto;
   box-shadow:   32px rgba(, , , 0.15);
 }

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

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

 .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>);
   }
 }

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