地图找房（七）01——动画控制-three.js-d3-echarts & react-spring动画组件的基本使用

动画控制——three.js-d3-echarts & react-spring动画组件的基本使用

• 关于动画

  • 基于JavaScript的动画
  • 基于css的动画
  • 数据可视化：数据报表
    • canvas 画布 （flash）
    • svg
    • webgl（three.js/d3/echarts）

• react-spring

• react-spring-github

Spring组件介绍

• 作用：实现动画效果，能从状态A 变到 状态B.
• from 属性是可选的，仅在组件第一次被渲染的时候生效。
• to 属性用来更新 spring ，也就是实现新的动画效果。
• 组件第一次渲染： from --> to
• 以后的每一次： 旧to —> 新to （ 一般就是通过 React 组件的状态来动态设置 ）

<Spring
  from={{opacity: 0}}
  to={{opacity: 1}}
  {props => <div style={props}>动画内容</div>}
</Spring>

Spring组件基本使用

• 基于Hooks API

• Render-props API (推荐使用)

  • 先安装，再导入

  yarn add react-spring
  

  import {Spring} from 'react-spring/renderprops'
  

• 基于Render-props案例-类似于渐变色

  • 需要将props应用到动画元素的style中
  • props参数其实就是发送动画的属性

// 使用 Spring 组件包裹要实现动画效果的元素
// 动画效果通过 render-props 模式的参数 props，暴露出来
<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
  {props => {
    console.log('Spring：', props)
    return (
      <div
        style={props}
        className={styles.mask}
        onClick={() => this.onCancel(openType)}
      />
    )
  }}
</Spring>

Spring动画组件控制自定义组件

function Test (props) {
  return (
    <React.Fragment>
      <div style={props.attrs} className='test'>测试组件动画</div>
    </React.Fragment>
  )
}

<Spring 
  from={{opacity: 0, width: 300, height: 300}}
  to={{opacity:1, width: 100, height: 100}}
  >
  {(props) => {
    console.log(props)
    return (
      <Test attrs={props}/>
    )
  }}
</Spring>

动画示例效果