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,聚集与散开
以掉落效果为例：
1 import React from 'react'; 2 import Snow from './Snow'; 3 import './index.less'; 4 class App extends React.Component { 5 constructor() { 6 super(...arguments); 7 this.state = { 8 show: true, 9 }; 10 } 11 onEnd = () => { 12 this.setState({ 13 show: false, 14 }); 15 } 16 render() { 17 const children = Array(5).fill(1).map((c, i) => ( 18 <div key={i} className="addMoneyAnim" style={{ animationDelay: `${-Math.random() * 0.6}s` }} /> 19 )); 20 return ( 21 <div className="snow-demo-wrapper" > 22 <div className="snow-demo"> 23 24 <Snow onEnd={this.onEnd} > 25 {children} 26 </Snow> 27 28 </div> 29 </div> 30 ); 31 } 32 } 33 34 export default App;