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

相关文章

来自专栏老马寒门IT

03-Vue入门系列之Vue列表渲染及条件渲染实战

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显...

2468
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

4524
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(中)

React Native之React速学教程(中) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

3078
来自专栏陈纪庚

手把手教你实现一个引导动画

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

931
来自专栏十月梦想

一天带你入门到放弃vue.js(二)

至此在vue中提供了计算属性,computed,在main.js指定computed对象中指定计算

1332
来自专栏一个会写诗的程序员的博客

《React极简教程》第一章 Hello,World!React 第一个实例:Hello,World!react.min.jsreact-dom.min.jsbabel.min.jsReact.ren

React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 Rea...

912
来自专栏MasiMaro 的技术博文

windows编程学习笔记(三)ListBox的使用方法

ListBox是Windows中的一种控件,一般被当做子窗口使用,Windows中所有子窗口都是通过发送一个通知码到父窗口父窗口通过WM_COMMAND消息接收...

1022
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1232
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

1752
来自专栏影子

jQuery中的常用内容总结(二)

转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html

993

扫码关注云+社区