好久没更了!最近在学习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 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

1866
来自专栏腾讯社交用户体验设计

为什么要用SVG?- svg与iconfont、图片多维度对比

3054
来自专栏DeveWork

分享一款带尖角浮出 公告栏 样式

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏,这个广告栏是纯用css+html打造的,没有使用图片。该代码最初来自大前端...

1815
来自专栏html5

h5仿微信聊天项目案例源码(单聊、多聊)|仿微信界面

最近由于项目需求,利用h5+css3+zepto+wcPop等技术开发了一个仿微信聊天项目(仿微信聊天界面),可以实现发送消息、表情,预览图片、视频,红包打赏、...

1K14
来自专栏专业duilib使用+业余界面开发

duilib窗体最小化与还原时有win原生标题栏闪现且无动画效果

转自我自己的csdn博客。原文:https://blog.csdn.net/u012081284/article/details/83618075

1125
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

1084
来自专栏腾讯NEXT学位

简单粗暴的移动端适配方案 - REM

36510
来自专栏九彩拼盘的叨叨叨

Web 前端菜鸟源码阅读列表

阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

621
来自专栏Blogbyme

【每日推荐】一款绿色轻快的截图软件

亲爱的读者朋友们,博主的每日推荐终于开始更新啦~~是不是很高兴呢? ? 什么?你不知道有每日推荐? ?   点我去了解一下吧。

1155
来自专栏Hongten

java画图程序_图片用字母画出来

原图:http://www.cnblogs.com/hongten/gallery/image/143365.html

512

扫码关注云+社区