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(