职贝云数AI新零售门户

标题: 微信公众号排版svg样式教学——点击展开 [打印本页]

作者: 不用你感动 时间: 2023-2-5 08:24
标题: 微信公众号排版svg样式教学——点击展开
我们常常在一些优秀的微信公众号文章中看到一些风趣又神奇的排版黑科技，例如图片弹幕、左右滑动、点击展开等等，这些互动效果除了可以经过套用135编辑器中的SVG样式来完成，还可以在SVG动画设置中自定义生成，满足大家不同的运用需求和设计想法。
这里我们以抢手的点击展开图片的效果为例，给大家引见一下在动画设置中，如何自定义生成相似的SVG互动效果。

(, 下载次数: 0)
1、预备工作

末尾编辑之前，我们需求：
1、预备好点击后展开的文章内容，并将文章内容保存在【我的文章】里。
2、点击【更多功能】-【换专业版】，将菜单栏切换成专业版。

(, 下载次数: 0)
2、操作步骤

在样式区上方选择【规划】-【基础规划】，找到SVG规划并点击放置在编辑区内。

(, 下载次数: 0)

(, 下载次数: 0)
在编辑区内点击样式，然后在弹出的菜单栏中选择【SVG规划】-【动画】，打开SVG动画设置面板。

(, 下载次数: 0)
SVG动画设置面板中，有三个次要的功能区：左侧的页面点击+号即可添加页数，中间的画布可以实时查看效果，右侧的编辑区则可以停止参数和动画效果的调整。

(, 下载次数: 0)
在面板上方可以设置画布的尺寸比例。

(, 下载次数: 0)
看法设置面板之后，我们把第一页的类型设置为图片，动画类型为【无动画】，并在画布中点击上传图片。（这里的图片就是我们点击展开之前所呈现的封面图）

(, 下载次数: 0)

(, 下载次数: 0)
在第二页的动画中设置动画效果【展开】。

(, 下载次数: 0)

点击【预览/编辑图文】-【编辑图文】，调出系统编辑器页面。

(, 下载次数: 0)

(, 下载次数: 0)
在【我的文章】中将预备好的文章打开，并选择【完成编辑】。

(, 下载次数: 0)

(, 下载次数: 0)
设置好动画时长、延迟工夫等参数，点击【完成】就可以生成我们制造的点击展开SVG效果了。

(, 下载次数: 0)

除了示例中点击展开的效果，在动画设置中还有以下动画类型，大家可以尝试为本人的文字或图片自在添加想要的动画效果：
无动画：无任何效果
字幕：相似弹幕效果可以设置上下左右四个方向
快闪：疾速切换闪烁
淡入：逐渐显示
淡出：逐渐消逝
移入移出：当前画面向上下左右四个方向移出或者移入
展开：只允许最后一屏设置展开效果，画面向下展开

留意：将SVG效果复制到公众号时需求授权同步功能，将编辑好的文章同步到公众号后台（点击查看授权公众号教程）
这次的教程分享就到这里了，这个新手小白进阶排版大神的排版技巧，大家都学会了吗？
<hr/>留意：将SVG效果复制到公众号时需求授权同步功能，将编辑好的文章同步到公众号后台（点击查看授权公众号教程）
这次的教程分享就到这里了，这个新手小白进阶排版大神的排版技巧，大家都学会了吗？
更多排版技巧&公众号运营知识&课程引荐&涨粉服务，请关注 @135编辑器
，约请好友注册即可获得7天编辑器会员~

欢迎光临职贝云数AI新零售门户 (https://www.taojin168.com/cloud/)