Ant Design
Ant Design：服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
我们主要配合着React去研发产品：Antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
Antd主要特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建，提供完整的类型定义文件。
- 全链路开发和设计工具体系。
Antd的安装使用
使用npm或者yarn安装
我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
在你的React项目中，打开终端
npm install antd --saveyarn add antdAntd已经安装好了，接下来看我们如何去使用
引入样式
import 'antd/dist/antd.css'; 使用样式
import React, { Component } from 'react'
import 'antd/dist/antd.css';
import { Button } from 'antd';
export default class TodoList extends Component {
render() {
return (
<div>
<Button type="primary">Primary</Button>
</div>
)
}BizCharts
基于商业场景下的数据可视化解决方案
特性
- 是基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表
- 集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等
- 性能稳定且具有强大的扩展能力和高度自定义能力
安装
npm install bizcharts --save绘制图表
**在 BizCharts 引入页面后，我们就已经做好了创建第一个图表的准备了。
下面是以一个基础的柱状图为例开始我们的第一个图表创建。
- 创建容器
在页面的 _body_ 部分创建一个节点，指定一个 id
<div id="mountNode"></div>使用组件生成图表
- 引入图表需要的组件
- 用组件组装成需要的图表
- 把图表渲染到 mountNode 节点上
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';
// 数据源
const data = [
{ genre: 'Sports', sold: 275, income: 2300 },
{ genre: 'Strategy', sold: 115, income: 667 },
{ genre: 'Action', sold: 120, income: 982 },
{ genre: 'Shooter', sold: 350, income: 5271 },
{ genre: 'Other', sold: 150, income: 3710 }
];
// 定义度量
const cols = {
sold: { alias: '销售量' },
genre: { alias: '游戏种类' }
};
// 渲染图表
ReactDOM.render((
<Chart width={600} height={400} data={data} scale={cols}>
<Axis name="genre" title/>
<Axis name="sold" title/>
<Legend position="top" dy={-20} />
<Tooltip />
<Geom type="interval" position="genre*sold" color="genre" />
</Chart>
), document.getElementById('mountNode'));这个图表就成功了
一些深度的图表应用可以根据自己的需要去官网文档查找使用
Ant Motion
Antd Design的动效规范与组件
Motion动效：界面动效能够加强用户认知且增强活力
动效价值
- 增加体验舒适度： 让用户认知过程更为自然。
- 增加界面活力：第一时间吸引注意力，突出重点。
- 描述层级关系：体现元素之间的层级与空间关系。
- 提供反馈、明确意向：助力交互体验。
衡量动效意义
衡量一个动效是否有意义，我们可以通过以下几个标准来考核：
- 一个动效的存在是否合理：是否带有明确的目的性，助力交互体验，没有多余的动效。
- 动效与性能：不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的，并且不影响产品的性能。
动效原则
自然：自然规律的运动，保证视觉连贯性，让用户感到动作是自然的，是能够引起共鸣的。
高效：企业级应用追求的是高效的用户体验，与之对应的动效设计也应如此，尽量节省过渡的时间，快速完成过渡的动画效果。举个例子，在出场与进场的动效里，出场不用大张旗鼓的去吸引用户的注意力，而是做到简单清晰即可。所以我们的出场时间采用了更快的速度,
克制：尽量避免夸张的动效，做有意义的事情，不去做太多的修饰而干扰用户，如我们的Menu，在展开的时候，注重的是菜单的内容，而右侧的Icon切换并不是主要元素，不需要过渡强调去分散用户的注意，所以只需要在不经意间切换，明确指示变化即可。
Ant Motion的使用方法
安装依赖->引入依赖->使用依赖
TextyAnim文字动画使用方法
安装依赖
cnpm i --save rc-texty引入依赖
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';使用动效
<div className="texty-demo" style={{ marginTop: 64 }}>
<Texty>Ant Motion</Texty>
</div>这样带动效的文字动画就写好了。
在项目的开发中动效的应用可以根据自己的需要去官网文档查找使用