好久没更了!最近在学习svg动画

杭州前端工程师

发布于 2018-06-15 11:53:36

5040

发布于 2018-06-15 11:53:36

最近在学习svg,原来svg这么好用,完全就是只有想不到,只有做不到的动画!

在react中使用svg也是非常方便的,可以直接调用,用react的state来控制动画也很方便,至少比jquery或者原生方便太多了.

<svg
  width='1000'
  height='400'
  xmlns="http://www.w3.org/2000/svg"
>
  <text style={{fontSize:10}} ref={ref => this.textaaa = ref} id="textexa" x="100" y="100" dx={this.state.dx} dy={this.state.dy}>
    ABCDEFGHIGKLMN
  </text>
</svg>
<div>
  <Button onClick={this.click.bind(this)}>点击运动</Button>
  
</div>

以上是我在react使用svg的动画,实现一个小小的动画.

componentDidMount() {
 this.run(0);
}

run(t){
  let array = [];
  let n = 16;
  let j = n;
  while (n--) {
    array.push(10)
  }
  let arrayY = [];
  let ly = 0;
  for (let i = 0; i < j; i++) {
    let cy = -100 * Math.sin(0.02 * i * 20 + t);
    arrayY.push(cy - ly);
    ly = cy;
  }
  this.setState({
    dx:array.join(' '),
    dy:arrayY.join(' ')
  })
  // while (this.state.n--) this.state.y.push(10);
  // this.textaaa.setAttribute('dx', array.join(' '));
  // this.textaaa.setAttribute('dy', arrayY.join(' '))
}
click() {
  let self = this;
  let t = self.state.t;
  t+=0.02;
  this.setState({
    t
  });
  this.run(t);
  requestAnimationFrame(self.click.bind(this))
}