React + webpack + redux 后台系统 Demo 代码阅读 （二） keywords: 图片文字粒子效果、鼠标enter、leave事件、过渡动画

Post 2 Logo.js

这个组件是进入界面的Logo效果，具体效果是

• 鼠标离开Logo区域，点都分散
• 鼠标移动到Logo区域，点聚集成React（或者任意形状）

文件头部分

import React, {
    Component } from 'react'
// import ReactDOM from 'react-dom'
import {
    connect } from 'react-redux'
import TweenOne from 'rc-tween-one'
import ticker from 'rc-tween-one/lib/ticker'
import PropTypes from 'prop-types'
import logo from '@images/login.png'
import './logo.css'

rc-tween-one是Ant Motion在react框架中的单元素动画库
Tween-one即单元素动画

下面先介绍一下单元素动画

单元素动画 参考岩_424f@简书

• 效果： 单元素动画可以改变指定元素css样式的形状和运动轨迹，并且是以动画的形式进行变化
• 使用时机： 当页面需要某个元素需要变形或者移动时使用。如“进度条”，“降下金币”的效果

使用方式

• 安装：npm install rc-tween-one --save
• 使用：

import TweenOne from 'rc-tween-one';
function Demo(props) {
   
  return (
    <TweenOne
      animation={
   {
    
        x: 80, //让code-box-shape向右移动80
        scale: 0.5, //缩小50%
        rotate: 120, //旋转120度
        yoyo: true, // 动画执行完后返回
        repeat: -1, // 循环播放
        duration: 1000//动画开始到结束用1秒
      }}
      paused={
   props.paused}
      style={
   {
    transform: 'translateX(-80px)' }}
      className="code-box-shape"
    />
  );
}
ReactDOM.render(<Demo/>, mountNode);

以上代码表示为code-box-shape这个动画，动画效果在animation属性中制定。
动画的暂停和启动通过TweenOne的paused属性确定。
详细的TweenOne的api文档

接下来继续看代码，

@connect((state, props) => ({
   
  config: state.config,
}))

@connect接受一个函数作为参数，将这个函数的返回值对象展开传给组件，即作为组件的props
这边将state里的config作为props里的config

static propTypes = {
   
    image: PropTypes.string,
    w: PropTypes.number,
    h: PropTypes.number,
    pixSize: PropTypes.number,
    pointSizeMin: PropTypes.number,
  };

这边规定了一些变量的类型，propType的介绍见阅读代码（一）
redux的核心思想

将图片中的文字变成粒子效果

componentDidMount加载函数：

this.dom = this.componentDom
    this.createPointData();
    
  createPointData = () => {
   
    const {
    w, h } = this.props;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(