使用React.js和D3.js实现的彩虹游蛇交互动画

鼠标在点阵上移动，生成彩色蛇形游走的动画。

react, d3, snake, grid

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2047
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const Component = React.Component;

class Dot extends Component {
  constructor(props) {
    super(props);
    
    this.state = Object.assign({}, 
                               props,
                               {r: 5});
  }
  
  flash() {
    let node = d3.select(this.refs.circle);
    
    this.setState({colorize: true});

node.transition()
        .attr('r', 20)
        .duration(250)
        .ease(d3.easeCubicOut)
        .transition()
        .attr('r', 5)
        .duration(250)
        .ease(d3.easeCubicOut)
        .on('end', () => this.setState({colorize: false}));
  }
  
  get color() {
    const { x, y, maxPos } = this.state;
    
    const t = d3.scaleLinear()
                .domain([0, 1.2*maxPos**2])
                .range([0, 1]);
    
    return d3.interpolateWarm(t(x**2 + y**2));
  }
  
  render() {
    const { x, y, r, colorize } = this.state;
    
    return <circle cx={x} cy={y} r={r} 
             ref="circle" onMouseOver={this.flash.bind(this)}
             style={{fill: colorize ? this.color : 'black'}} />
  }
}

class App extends Component {  
  render() {
    const width = 600,
          N = 50,
          pos = d3.scalePoint()
                  .domain(d3.range(N))
                  .range([0, width])
                  .padding(5)
                  .round(true);
    
    return (
      <svg width="600" height="600">
        {d3.range(N).map(x => 
           d3.range(N).map(y =>
             <Dot x={pos(x)} y={pos(y)} key={`${x}-${y}`} 
                  maxPos={width} />
        ))}
      </svg>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

编译

CSS

HTML

鼠标在点阵上移动，生成彩色蛇形游走的动画。

react, d3, snake, grid

编辑器支持Emmet

快捷键

鼠标在点阵上移动，生成彩色蛇形游走的动画。

react, d3, snake, grid

使用React.js实现的生命游戏算法演示动画

使用ReactJS和Mo.js实现的甩热狗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：