Make interesting things with react!

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/53887587，未经博主允许不得转载。
前一段时间用React实现了一些很好玩的功能，写成博客，与大家一起分享。在这一篇博客里，我将会介绍如何使用React实现小球移动、在与屏幕边缘发生碰撞后弹开的效果。

利用CSS简单绘制小球

ColorBall.js:

import React, { Component } from 'react';

class ColorBall extends Component {
  render () {
    const style = {
      width: '50px',
      borderWidth: '10px',
      borderColor: '#0094FF'
    }
    return (
      <div className="color-ball" style={style}>
      </div>
    )
  }
}

export default ColorBall;

index.css:

html, body {
  background-color: #333;
}
.color-ball {
  border-radius: 50%;
  border-style: solid;
}
.color-ball:after {
  content: '';
  display: block;
  padding-top: 100%;
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import CreateBall from './conponents/ColorBall';

ReactDOM.render(
  <ColorBall />,
  document.getElementById('root')
);

绘制效果图：

实现小球的运动效果

以下列举主要的组件：
ColorBall.js:

import React, { PropTypes } from 'react';

class ColorBall extends React.Component {
  render () {
    const {point, color, size} = this.props;
    const {x, y} = point;
    const style = {
      width: size + 'px',
      borderColor: color,
      borderWidth: '10px',
      transform: `translate(${x}px, ${y}px)`
    };
    return (
      <div className="color-ball" style={style}></div>
    );
  }
}

ColorBall.propTypes = {
  point: PropTypes.object.isRequired,
  color: PropTypes.string,
  size: PropTypes.number
};

ColorBall.defaultProps = {
  color: '#0094ff',
  size: 100
};

export default ColorBall;

App.js:

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import ColorBall from './components/ColorBall';
import './App.css';

import { createBall } from './utils';

class App extends Component {
  constructor () {
    super();

    this.state = createBall();
  }

  /*
   * 检测球是否需要转向
   * 如果球撞墙了，根据碰撞的墙面（上、下、左、右）对球的direction属性进行修改
   * 最终返回一个新的球对象
   */
  checkIfNeedChangeDirection (ball) {
    if (!this.container) {
      return;
    }

    // 获取小球父节点的宽度和高度
    const {offsetWidth, offsetHeight} = this.container;
    const {point, size, direction, ...other} = ball;

    const newDirection = {...direction};

    if (point.x < 0 || point.x + size > offsetWidth) {
      // 撞到了左侧或右侧的墙，改变direction中的x为其负数
      newDirection.x *= -1;
    }
    if (point.y < 0 || point.y + size > offsetHeight) {
      // 撞到了上侧或下侧的墙，改变direction中的y为其负数
      newDirection.y *= -1;
    }

    return {
      point,
      size,
      ...other,
      direction: newDirection
    };
  }

  /*
   * 移动小球方法，参数为一个小球对象
   * 返回移动后的小球
   */
  moveBall (ball) {
    let newBall = this.checkIfNeedChangeDirection(ball);
    // 根据小球的原始位置和方向以及速度，计算出新的小球位置
    newBall.point.x += newBall.direction.x * newBall.speed;
    newBall.point.y += newBall.direction.y * newBall.speed;
    return newBall;
  }

  /*
   * 移动小球，并将新的小球设置到state里
   */
  updateBall () {
    const ball = this.state;
    const newBall = this.moveBall(ball);
    this.setState(newBall);

    // 使用requestAnimationFrame方法，实现每秒调用60次updateBall方法
    // 具体介绍请谷歌
    window.requestAnimationFrame(() => this.updateBall());
  }

  componentDidMount () {
    // 获取小球父节点的Element对象
    // 在检测小球碰撞的时候会用到
    this.container = findDOMNode(this.refs.container);
    // 开始移动小球
    this.updateBall();
  }

  render () {
    const {point, color, size} = this.state;
    return (
      <div className="app" ref="container">
        <ColorBall point={point} size={size} color={color}/>
      </div>
    );
  }
}

export default App;

在App.css中，关于padding-top的值为百分比的使用问题，不了解的可以参考：CSS自适应占位。
App.css:

body, html, .app {
  background-color: #333;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.color-ball {
  position: absolute;
  left: 0;
  top: 0;
  border-style: solid;
  border-radius: 50%;
  transition: all ease-out .3s;
}
.color-ball:after {
  content: '';
  display: block;
  padding-top: 100%;
}

utils.js:

const colors = [
  '#F44336',
  '#FFCDD2',
  '#E91E63',
  '#F06292',
  '#D81B60',
  '#AD1457',
  '#9C27B0',
  '#CE93D8',
  '#7B1FA2',
  '#673AB7',
  '#B39DDB',
  '#7E57C2',
  '#3F51B5',
  '#9FA8DA',
  '#5C6BC0',
  '#2196F3',
  '#90CAF9',
  '#64B5F6',
  '#00BCD4',
  '#80DEEA',
  '#009688',
  '#B2DFDB',
  '#4CAF50',
  '#A5D6A7',
  '#8BC34A',
  '#C5E1A5',
  '#CDDC39',
  '#E6EE9C',
  '#FFEB3B',
  '#FFF176',
  '#FFC107',
  '#FFD54F',
  '#FF9800',
  '#FFCC80',
  '#795548',
  '#9E9E9E',
  '#607D8B'
];

export function createBall () {
  return {
    point: {x: 0, y: 0},
    direction: {x: Math.random(), y: Math.random()},
    color: colors[Math.floor(Math.random() * (colors.length - 1))],
    size: 50 + Math.random() * 100,
    speed: 5 + Math.random() * 10
  };
}

运动时的小球某一时刻截图：

全文完。