使用React-Konva.js实现的爆炸动画

常见于卡通动画中的爆炸/爆破动画。

react, konva

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const {Layer, Star, Stage, Group} = ReactKonva;

class LilStar extends React.Component {
    constructor() {
      super();
      this.state = {
        color: '#111'
      };
      this.handleHover = this.handleHover.bind(this);
    }
    handleHover() {
      this.setState({
        color: Konva.Util.getRandomColor()
      });
      this.refs.star.to({
          scaleX: Math.random() + 1.5,
          scaleY: Math.random() + 1.5,
          easing: Konva.Easings.EaseInOut,
          duration: 0.1
      });
    }
    render() {
      return (
          <Star
              x={this.props.placeW}
              y={this.props.placeH} 
              ref="star"
              numPoints={8}
              innerRadius={15}
              outerRadius={40}
              fill={this.state.color}
              onMouseEnter={this.handleHover}
              onTouchStart={this.handleHover}
          />
      );
    }
}

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

编译

CSS

HTML

常见于卡通动画中的爆炸/爆破动画。

react, konva

编辑器支持Emmet

快捷键

常见于卡通动画中的爆炸/爆破动画。

react, konva

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

使用React.js实现的几何图形运动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：