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

最近在学习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))
}

首先在componentDidMount中初始化一个上下的小波动,run(0),这个参数是用来控制上下波动的,这个函数里有几处逗比的写法,请见谅.

然后在点击按钮中,通过requestAnimationFrame的方法,来重复调用click事件,这里需要注意的是this,可能会找不到上下文,注意BInd一下,这样就可以绑定了.

非常简单的一个小动画,也充分说明了svg的强大之处.不行,我要好好学这个东西.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨龙飞前端

scrollto 到指定位置

2514
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4728
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6848
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868

扫码关注云+社区