越来越多的公众号在自己的图文消息中加入了SVG交互动画,近来一些小伙伴也在问我这些动画交互效果是如何实现的。

有的小伙伴在看了一些文章教程后,对于一些细节处理还是无从下手。

一些问题经常会被问到,例如:SVG中的矢量文字和图形是用什么软件制作的,这些矢量软件如何使用;做好的代码是如何插入到公众号图文消息中;animate和animateTransform标签的区别是什么等等。

针对这些问题,我利用空闲时间录制了一段视频教程,上面的一系列问题在视频中都能找到答案,带领你轻松入门公众号SVG动画交互开发。

教程主要在四个方面介绍了SVG动画开发的基本要点:

  • 代码结构
  • 在AI软件中制作矢量内容
  • 动画交互代码原理
  • 将代码插入到公众号图文消息中

腾讯课堂播放地址:

https://ke.qq.com/course/2770841?taid=9877028919199641&tuin=3440ba8e

该教程附带的源代码:

https://dev.xingway.com/tutorials/svg/svg-final.zip