SVG动画怎样运用在公众号里

tozero
2,054 阅读2分钟

当下黑科技排版越来越普遍，新媒体人都搞起了代码，作为一个前端开发当然不能落后，今天也来分享下怎样在公众号中嵌入SVG动画。

一、前期准备

  • Adobe Illustrator(AI软件)
  • 一个好用的代码编辑器
  • 谷歌浏览器
  • 一个公众号
  • 抛开之前的CSS/JS动画思路，由于公众号的限制，要有很麻烦的准备

二、AI画图

开始的开始：我们最好对要设计的动画有一个整体的脚本构思，这样在绘画和动效编辑时能有清楚的图层架构

1、首先，我们需要在AI中将需要显示的元素绘制成为路径

注意：

  • 一定要是路径哦，公众号导入代码不支持image，需要用<foreignObject>（之后讲）；
  • 由于公众号会过滤掉所有id，不要用渐变/模糊/滤镜效果；

image.png 如上图画了一个圆

2、点击文件——存储为，选择svg

image.png

image.png

点击存储后，可以设置SVG选项

  • 文字：转化为轮廓-文字转化为轮廓，可保留字体；SVG-保留标签，使用公众号默认字体
  • CSS属性：选择演示文稿属性

image.png

3、点击SVG代码，复制到代码编辑器，添加动画

得到如下代码：

//只保留svg标签里的就可以，多余的<g>标签可以删掉
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1125 644" enable-background="new 0 0 1125 644" xml:space="preserve">
<circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="569.5" cy="218.5" r="74"/>
</svg>

根据微信官方置顶的白名单标准，可以添加如下动画：

image.png

常用的一些：

<!-- opacity 透明度 -->
<animate attributename="opacity" begin="click" dur="2s" values="1;0;1" repeatCount="indefinite"></animate>

<!-- transform 位移 -->
<animateTransform attributename="transform" type="translate" begin="click" dur="2s" values="0 0;20 20" repeatCount="1" fill="freeze"></animateTransform>

<!-- visibility 可见性 -->
<set attributename="vilibility" begin="click" dur="0.0001s" from="visible" to="hidden" repeatCount="1" fill="freeze"></set>

<!-- scale 缩放 -->
<animateTransform attributename="transform" type="scale" begin="click" dur="2s" values="1;0.145" repeatCount="1" fill="freeze"></animateTransform>

<!-- rotate 角度 -->
<animateTransform attributename="transform" type="rotate" begin="0s" dur="0.5s" values="0 500 78.2;10 500 78.2" repeatCount="indefinite"></animateTransform>

<!-- animateMotion 轨迹运动 -->
<animateMotion path="M199,346C58,11897,52,12529,52,12529" rotate="auto" begin="click" dur="150s" repeatCount="1" fill="freeze"></animateMotion>

<!-- stroke-dashoffset 描边动画 -->
<line fill="none" stroke="#FF0000" stroke-width="8" stroke-miterlimit="10" x1="330" y1="1126" x2="447" y2="1126" stroke-dasharray="117,117" stroke-dashoffset="117">
    <animate sttributeType="CSS" attributeName="stroke-dashoffset" begin="0s" from="117" to="-117" dur="2" fill="freeze" repeatCount="indefinite"></animate>
</line>

简单来说：

  • animate：相当于 CSS 中的 transition
  • animateTransform：相当于 CSS 中的 transform

我们为小球添加动画，两个小球的半径变化（注意标签要闭合，一些生成的<path>标签没有闭合）

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1125 644" enable-background="new 0 0 1125 644" xml:space="preserve">
	<circle opacity="0.6" fill="#F2997A" cx="494.667" cy="175" r="45">
	    <animate attributename="r" begin="0s" dur="3s" values="45;40;38;55;38;40;45" repeatCount="indefinite"></animate>
	</circle>
	<circle fill="#F2997A" cx="494.667" cy="175" r="35">
		<animate attributename="r" begin="0.5s" dur="3s" values="35;40;38;35;38;40;35" repeatCount="indefinite"></animate>
	</circle>

</svg>

效果：

屏幕录制2021-10-15 10.59.39.gif

三、添加至公众号中

1、在公众号编辑页面随意输入文字，打开开发者模式，选中文字

image.png

2、右键编辑

image.png

3、将我们写好的代码替换之前的代码

image.png

4、此时可以看到，动效已导入到公众号编辑器中

屏幕录制2021-10-15 11.07.10.gif 之后进行其他的排版即可

四、思维变化

  • 在html中的动画，基本上是添加在当前dom元素上的，而公众号里嵌入的动画，由于不支持id，不支持js，css只支持一些简单的行内样式，因此在设计动画时经常需要用一些“障眼法”，即为实现效果动画不一定添加在当前元素上（所见非所得），如一个元素的消失，可以是元素透明度变化/颜色变化/位置移出画布，也可能是另一个元素的遮挡。
  • svg中没有堆叠顺序的概念，按照代码顺序，越在下面的代码层级越靠上

在之后的文章里，将就我做过的一些案例来讲解具体应用。

avatar
文章
阅读
粉丝