96编辑器svg动画使用教程

本次分享 svg 编辑器使用方法， svj 编辑器中给我们提供了许多黑科技素材，三大素材分类可供我们选择，第一种是基础的动态素材，第二种是组合的黑科技效果，第三种是样式类的素材效果， 我们可以通过搜索关键词和想要表达的效果的关键词来进行搜索。使用方法简单，选择需要的样式，点击他会自动放置在编辑区， 可以同时编辑多个黑科技素材。之后我们在右侧的编辑区上传图片，上传图片后做好细节的调整，调整完之后呢，我们可以点击预览查看效果，效果没有问题之后，我们可以直接点击 导出，把效果的代码粘贴到九六的编辑区内。同时我们还可以把制作好的内容保存在 svg 编辑器内，方便下次使用。也可以通过同步的功能 直接把样式同步到公众号内，大家可以自行选择保存方式。

hello， 九六的小伙伴们大家好，如内容所见，今天给大家分享如何使图片滑动。本次教程分为两期， 本期我们先来分享 svg 样式中怎么使图片滑动。首先我们把鼠标放到样式菜单的 svg， 点击趣味滑动。之后，我们选择需要的滑动图片效果。点击素材插入到编辑器，点击素材中的图片，点击换图按钮，可以选择自己的图片进行上传。如需调整图片数量， 可以点击加一个减一个按钮。图片替换完成后，可以鼠标拖动滑动条进行效果。查看图片自动滑 滑动的效果，我们需点击图片轮播，下拉菜单，可以找自己喜欢的素材，点击插入到编辑区。接下来我们点击素材中的图片， 点击 s v g 动画按钮，就跳转到 s v g 动画编辑页面了，在页面右侧可以替换我们自己的图片。除了替换图片，我们还可以把多余的图片进行删除，如果图片张数不够， 我们也可以继续添加图片。这里我们还可以调整动画的切换时间及暂停时间。设置好后，我们点击顶部的预览查看效果。效果无误， 我们点击顶部的完成修改的素材即可放到编辑区，轮播图将会自动展示图片效果。本期内容结束了，下期我们分享 svg 编辑器制作图片滑动。

hello， 九六的小伙伴们大家好，本次呢我们继续来给大家分享 svg 编辑器制作滑动图片效果。首先我们点击九六左侧的 svg 编辑，进入到 svg 编辑器 之后，我们点击顶部的滑动，在滑动菜单下方呢有各种各样的滑动类素材，我们点击一个最最基础的滑动样式，将它插入到编辑区， 在右侧上传我们提前准备好的图片，这里的图片尺寸尽量提前裁剪为统一尺寸。接下来我们点击顶部的预览按钮，就可以进行效果的预览了，拖动下方的滑动条就可以查看图片，那么下面我们再来演示自动轮 播的效果制作方法。首先我们在自动轮播菜单下找到自己需要的轮播效果，选择好后，我们点击一下这个组件，将组件插入到编辑区，同样也是需要在右侧点击上传图片进行图片的上传， 图片上传完成后，在这里轮播图多了个图片动画的设置，我们可以通过鼠标拖拽来进行调整。 设置好后，我们点击预览，可以查看轮播图的素材效果，预览无误，我们直接点击旁边的导出按钮，就可以将我们的素材插入到九六编辑器中了。以上是我们本期内容，我们下期再见了。

哈喽，大家好，我是小鱼，好久不见了。这段时间呢，有不少小伙伴向我请教公众号排版，我发现大家对公众号的动态排版很有兴趣，就是那种，比如你点击一下屏幕，页面会展开，再比如页面里的元素是在运动的，看上去像动图，但他又不是动图， 再比如左右滑动会出现不一样的画面等等，这些效果呢，都是可以利用 scg 布局来实现的。那今天呢，我就临摹紧着我遇到过的例子，亲手操作来告诉大家如何做公众号动画效果。 打开少女编辑器，找到 svg 布局模板，他有这么多的效果和模板，可以根据自己的想法来创作。具体怎么操作呢？来看第一个案例，这是我帮客户做的一个红木家具的广告，开头做了一个文字依次自动出现的效果，这效果的做法并不难，点击左 模板中的布局，选择基础布局就好。下拉找到 svg 布局，点击编辑就可以设计效果了。 svg 布局分为两块区域，上面的区域是动画层，下面的区域是内容层。如果要设置动画效果，就要在动画层操作。 这个编辑区域的大小是可以调整的，把事先做好的背景图插到编辑区，图的大小和位置也是可以自由变换的。接着把文字依次插入到编辑区里， 这里我要说明的是，秀敏自带的字体是没有这样的书法体的，大家看到的字体和排版都是我在 ps 里先设计好，再导出成 pmg 格式后导入进来的。选中文字，点击动画，在自动效果中设置想要的效果就好了。 这里的文字出场动画，我设置的都是弹入动画，时长是一到二秒，除了第一行文字以外，下面的 文字都比上一行延迟一秒出现，这样就会有文字一行一行的依次出现的效果了。点击预览来看看最后的效果吧。 这个案例就是这样了，还算简单吧，刚刚讲的是全自动出现的效果。第二个案例来讲一个手动点击后又自动出现的效果。大家看这篇推文中写着，点击爱心，查看所有头像，我点击后，所有的头像也确实依次出现了。这个做法也很简单， 我们也先写好点击爱心，查看所有头像。这样一句话我只是给大家演示方法，不会把版面做的很精美，大家就将就看，学会了方法后，再举一反三，做出更精美的排版来哈。写好文字后，插入 svg 布局，进入编辑区，我就随意在系统自带的形状中找一个爱心，拖入动画区， 调整一下大小。这里不需要设置图片的动画，只需要设置转场效果就可以了。第一页要设置点击转场，而不是自动转场，这样才会有点击后出现其他图片的效果。这里设置的是弹出效果， 然后复制一下，得到第二张页面，把头像拉进来，调整一下大小，从第二页开始，把交互转场效果删除，设置成自动弹出效果。接着再复制第三张，把第二个头像也插入进来，方法和之前一样，第四个头像也是一样的操作， 我这里就不过多演示了。要说明的是，如果最后一个头像操作完了，那么最后一页的转场效果就要删除，这样就能停止自动转场了，我们来预览一下吧。我这里就简单做了四个点击后出现的头像，大家可以用这个方法尝试 做点不一样的画面效果。在秀米的 s v g 模板中找到点击显示效果，里面的模板就利用到了转场方法， 大家可以研究研究。我们再来看个有意思的案例。这篇推文的背景图片是一个地图的样式，点击地图上的路牌，就会弹出路牌名称，对应的地点介绍排版，非常有创意。这种效果用秀米的 spg 的点击弹出就可以做到。如果要做到这样有背景图片， 并且每个路牌都放在指定的位置上的效果，就需要线套布局，还要调整布局定位了，我这就来操作。 我们还是新建一个 scg 布局，因为路牌是产生动画的，而风景图片是动画发生后显现的内容，所以我们把路牌图片放在动画层，风景图片放在内容层，点击显示内容，就会出现内容框，把风景图片拖入 进来，再点击外面一层的 svg 动画层，点击图片，把路牌图片放进来，背景色改成透明，打开，点击穿透，把动画删除。现在内容图很大，我们就需要点击图片，在出现的菜单栏中选择适应，点击放大，缩小数值，这样图的高度就缩小了， 但是这张图片的长度还是有点超出了路牌图片没有被完全遮住，那我们就选中图片调整大小到路牌图片可以遮盖住风景图片就可以了。在手机上预览一下，这个效果就完成啦。 像这种点击一张图片，出现另一张图片的效果，大家还可以去左侧菜单栏中点击 svg 找到点击弹出。这里有一些模板供大家选择，比如这个日历模板，点击标红的日期就会出现其他图片，记得要在 手机上遇了，电脑上是看不出效果的哦。接下来就要做地图的布局了，点击左侧菜单栏中的布局中的基础布局，选择第一个就好。 把这个 svg 布局一整个拖到刚建好的布局里，这样路牌的大小和位置都方便调整了。然后再新建一个基础布局，把背景设置成地图图片， 背景图不重复。接着再把路牌布局拖进来，现在地图没有全部显示出来，可以向下插入空行地图会慢慢显示出来的。复制一遍路牌，再拖入进来，放在合适的位置，这样地图上就有路牌啦。 不过路牌的大小和位置还不是很合适，那就慢慢调整。在调整路牌的过程中，风景图可能又会显露一点出来，那就通过设置组前距和组后距调整他的位置，直到 它被遮住为止。第二块路牌可以移到右边，改变距离参数来调整它的位置。差不多就是这样了，在手机上预览一下。嗯，完成啦， 来看下一个案例。有些公众号的开头都会有自己的 logo 或者标语的动画，如果长按能完整地保存到手机，就说明这是一个 gif。 如果像这样看起来是在运动的，但是长按只有一张背景图，就说明其他元素是设置了 svg 动画。 我们可以用 sfg 图集来实现这个效果。先在 ps 里面画了和案例相似的图片，每个部分分别导出成 pmg， 在基础布局中下拉，找到 sfg 图集， 点击图集设置，把类型改成切换，后面的循环要记得周选上，想让图片切换的快一点就改一下，单张时长我改成了零点三秒， 然后把图片依次添加进来，动画效果都是可以改的，这样操作完后就可以预览了，看这是不是也不难。 暂时呢，就先分享以上四个 s c g 效果的制作方法，大家如果遇到其他的效果也可以来问我，不能保证所有的问题我都能回答的上来，但是我知道的一定会告诉你们，尽我最大的努力，让大家的排版不再难，那就先这样啦，拜拜！

使用这个素材时查找音乐代码会比较的麻烦，首先我们要在公众号文章中插入一个音乐， 之后我们保存文章，打开文章的预览页面，在文章的预览处鼠标右键点击审查元素。打开代码页面后，我们在键盘按 ctrl f 键查找我们所需要的这个代码， 找到后呢，我们可以鼠标右键选择复制这段代码，我们把复制好的代码粘贴到九六 svg 编辑器的 qq 音乐代码中。 整体操作演示，首先我们打开 svj 编辑器，在素材里面搜索音乐，点击音乐海报素材，之后在右侧的编辑区点击 替换图片，上传封面图，之后把找到的音乐代码粘贴到代码处，之后我们设置触发音乐的位置，设置好后点击右上角的预览，预览好后我们点击导出，选择插入到编辑器或者复制代码，粘贴到公众号 之后我们发送到手机预览，点击图片即可播放音乐了。

本期我们来分享视频无缝素材的使用方法，首先我们打开九六的首页，点击左侧的 svj 编辑器，进入到 svj 页面， 本次我们需要无缝图和无缝拼接视频两个素材，插入顺序为无缝图无缝拼接视频，再一个无缝图的素材效果。 插入样式后，我们先把无缝图片全部上传完成。接下来我们要在腾讯视频获取一下我们需要的腾讯视频链接， 复制腾讯视频链接后，我们在公众号的草稿栏中新建图文，把视频链接粘贴到视频地址处，接下来我们点击保存文章，保存好后，我们返回到公众号的草稿箱中，打开文章的预览模式 是打开预览页面后，我们鼠标右键点击页面的空白处，点击审查元素，打开审查元素后，我们就可以跳转到页面的代码区域， 在代码的空白页面处鼠标点击一下。接下来我们按键盘的 ctrl f 键，调出查找的工具栏，把我们教程中的视频代码元素粘贴到搜索栏中， 按下回车键，系统将快速的帮我们获取到视频的代码区域，之后我们点击页面的右上角有三个点 复制这个元素，然后我们返回到 svj 编辑区，粘贴视频地址，之后我们把代码粘贴到公众号就完成了。下一期我们来分享本地视频如何无缝。

本期来分享 svj 黑科技之人民日报，点亮武汉同款。首先我们需要提前准备好两张图片，一张黑白，一张彩色。之后我们在九六编辑器左侧样式栏搜索点亮，找到点亮素材， 把素材插入到编辑区，点击 svj 动画，打开 svj 编辑页面后，我们把提前准备好的两张图片进行上传，注意图片顺序，不要上传错误。 图片上传好后，我们可以点击预览查看效果，预览无误，我们可以点击完成，素材将会直接导入到编辑区内。以上就是我们点亮素材的操作教程，你学会了吗？下期来分享，自动展开黑科技效果！

好，学前的同学看一下这个底部的 tabar， 它的切换，这个切换呢，其实倒是比较简单啊，包括这些图标的放大缩小，对吧？包括背景的变化，包括这个弧形的玩意儿，左右移动，这里边有意思的在哪呢？在这个图标，它有一个描边绘制的动画，你看 这个图标，那么这个类似于啥呢？就类似于这个站点，你看这个站点的 logo 部分，当我刷新页面的时候呢，他也会有这么一个描边的效果，看到没？然后呢，他也类似于像这个文字，他也有一个描边的效果，其实这三个东西呢，他们的描边用的都是完全一样的，其实就是用 svg。 这里呢，来用一个简单的例子啊，来了解他的实现原理。呃，这里边呢，我设置了这么一个 svg 啊，像 svg 这个玩意呢，作为开发者啊，你不太需要去自己去画，一般是设计师给弄好了过后，会导出一些 svg 的图像，那么这些图像拿到你手里边呢，你不用再画了，但是呢，你要对他做一些动画呀，或者是一些 样式的控制，这是你要会的哈。那么这个 svg 里边呢，他是有一条线，这个线为什么目前看不见呢？因为我没有让他描边啊，所以呢，我找到这个线啊，他的样式呢，给他设置了一个 class， 然后找到他，给他设置一下 stock， 好说把它设置为红色保存，你看一下页面上是不是有条线的，那么这个线呢，比较细啊，我可以通过 stroke 来调整一下它的宽度， 调整为十吧。哎，有这么个意思了。好，有了这个线之后呢，如何来进行描边呢？这个时候呢，我们会需要借助两个属性，一个呢叫做 stock doctor， 那么这是一个数字啊，把它设置为，比方说十，你看一下，那么 这样子呢，他就变成了一个虚线的，这个虚线间隔为十，懂这意思吧？那么这个直可以想象，他越大的话，他的间隔就越大，就实线部分和空心部分就越长。然后除了这个属性之外呢，我们还有一个属性啊，叫做 stroke dosh offset， 表示这个实线虚线的偏移量。这是个啥玩意呢？我们通过 过来调整它就明白了，比方说把它设为零，设为零的话没有什么变化，然后那么到页面上去啊，好，然后找到这个 line， 它不是有一个大使 office 吗？对吧？我把它直的呢，给它调小，变成负数，你看一下页面上的变化，除了往右边移动，对吧？然后呢变成正数，哎，是不是往左边移动，他就是设置个偏以亮的， 什么意思？哎，那么这两个东西加起来就可以玩一些好玩的。比方说哈，我把这个 dashiri 呢设置为整条线的宽度， 整条线目前的宽度呢是两百啊，那么这里呢，我们设置为两百，哎，设置为两百之后呢，你会看到他又变成一条实线了，为什么呢？ 因为他实的部分和空的部分都为两百，那也就意味着啥呢？意味着这是实的部分，后边这一部分是空的部分，但是空的部分呢，目前看不见，同时呢，左边的一部分也是空的部分，懂这意思吧？然后我怎么样呢？然后我把整个线呢往左边移动，移动多少呢？移动一个身位也就是两百，所以呢，我们 把这个大喜 offset 成了设置为负的两百，那么这样子以来，你想一想他会怎么样呢？这样子一移动过后，他是不是跑不见了？然后他是不是过来了，就变成了空白了，就看不见了？你什么试一下啊，保存，你看，看不见了，那我怎么让他出现呢？那我们就可以使用一个动画，给他取名为 stock， 动画结束的时候呢，你再给我回来设置这个大喜 it， 把它设置为零，对吧？是，一开始是不是往左边跑了，然后设置为零是不是又回来了？好，我们把这个动画的应用进去啊，哎，你们写名字做，比方说两秒钟，然后呢，动画结束停留在目标位置保存， 哦，我这里好像是反的，是吧，这里应该是正数啊，走，你看是不是这个效果就出来了，再来，走啊，这个效果就出来了，那么这个代码呢，我们还可以稍微的去做一些处理啊，比方说像这个 两百这个数值是不是到处要用到这个数值，它对应到哪呢？对应到你这条线的长度，因为目前这个线的长度呢，是从起点 x 零到终点 x 为百分之百，它刚好等于这个 x 是微细的长度，所以呢，目前是两百，那万一我花成百分之五十呢？哎，这个事呢，就有点不太对劲了，要么就动画不太对劲，要么就是那个虚线不太对劲，反正就是不太对劲了，那么也就意味着啥呢？意味着我这边的这个数值啊，要始终跟随着这里这个线的长度而变化， 因此呢，我们最好呢在这里不要写死啊，而要动态的去读取这个线的长度，线有多长，那么我这里的值是有多少？因此呢，我们把这个玩意呢使用一个变量，比方说，哎呦啊，表示线的长度，这里也是使用一个 cs 的变量，然后呢，我们通过去设置这个变量，那么是不是就同时设置了这两个了？那么接下来的问题就是，我如何来得到它里边这些线的长度呢？ 这个时候呢，我们需要一个 g s 代码啊，比方说我们找到这个烂在控制台里面可以使用多少零来得到你选中的元素，然后呢，他有个方法叫 get total lens， 通过这个方法呢，就可以拿到他目前线的长度，因此呢，我们可以斜断 g s 啊，这个介绍做什么呢？非常简单，拿到这个 s v 里边的所有的路径，其实先的话也是一个路径 passes。 拿到这个 svg 啊，这 svg 的类样式呢？为 icon 下边的所有的路径啊，用 purpose like 哦，因为目前呢只有一条路径，是吧？将来呢可能有多条，你像这个图标它里边就有多条路径，是吧？像这个图标也是有多条路径， 说要拿到他所有的路径，然后呢循环这些路径，所以每一条路径呢，调用这个 get total nance， 是不是就可以拿到这个路径的长度，对吧？拿到这个长度过后呢，把这个长度呢设置为 cs 变量 cs l 为什么呢？为这个线的长度好保存，咱们试一下啊，效果不变。然后我们看一下这个元素结构呢，元素里边，你看一下这个 i i 里面是不是多了一个 c， c 是变量了，对吧？ l 为什么为一百 这样子呢？他就会影响后边的这些样式，这是便于我们后续的处理，那么这样子一来，对这个线是如此，那么如果说把这个线变成圆呢，也是一样的，咱们来试一下啊，不要这个线呢，把它注视掉，把它变成一个 c 口的样式，不变。然， 到时候呢，我们要需要去设置他的圆心啊，圆心的 x 呢，为百分之五十在中间吧，圆心的 y 呢，也是百分之五十在中间吧，然后圆的半径呢？半径的话为百分之三十吧，好，保存，你看一下是不是也描绘出来一个圆，那么这里呢，这个圆为什么中间有个黑色呢？是因为圆呢？他有个填充啊，这是个封闭图形，所以呢，你如果说不希望他填充的话，你给他设置一个费用为难啊，他就不再填充了，对吧？ 然后做出来之后呢，你会发现这里有条缝，那这个缝是怎么回事呢？咱们来看一下这个元素，这个元素里边呢，你会看到这个算出来啊，这个线的长度呢，他可能是不精确的啊，因为他的一些小数就导致了他可能会有个缝隙，那这个事情太简单了，我给他加个一不就完了吗？对吧，让他线变长一点啊，加个一呢，影响不大，所以呢，给他加上一个一保存， 哎，是不是就非常完美了？好，如果说你觉得他那个线头，如果说把它做成一个圆的话，那么也很简单啊，你去设置一下这个做 like 把设为 row 就完事了，保存，你看 箭头就变成圆了，对吧？就做出来一颗加载中的动画，如果说你中间放一个文字的话，是不是就是加载中的动画了？然后你知道了这些过后，你再回过头来看这个图标是不是就非常简单了，对吧？好，咱们来试一下呗，我们随便找一个图标啊，把这个图标的 svg 复制过来好，然后粘贴过来啊。 嗯，把内样式给它加上每一个 pass 呢，再加上一个 t 啊，其实呢，圆的也好还是这个线也好？它都是路径的一种特殊写法而已，只是用这个 lan 啊，或者是十二口啊，写写比较方便一点啊， 了解一些比较自由的路径的话呢，肯定要用 pass， 而且道理都是一样的，好保存好。为什么变成这个样子了呢？你看他有没有描边，他肯定有描边，对吧？他在动，那么为什么会变成这个样子了呢？是因为这个图形里边呢？我 错，可要太多了啊，他只需要一就可以了。好，还是有点大啊，我们去设置一下他的宽高，宽度的话为六十，好刷新，你看一下这个秒变效果是不是就出来了，对吧？都是一样的道理，就是控制这个虚线，你直线的话是这样的一个虚线，对吧？你圆的话那就是 这样的一个虚线啊，我画的不是很好啊，懂这个意思就行了。你其他奇奇怪怪的图形的话，咱也就是沿着这个路径去走，这个虚线就这个意思啊，你把虚线设长了，然后去设置一下虚线的偏移，就能够出现这个秒变动画，无论是这个图标还是这个字体啊，道理都是一样的。

hello， 九六的小伙伴们，大家好，今天我们来学习一下如何使用轮波图跳转超链接的 s v g 组件效果，像是苹果等一些大 v 的公众号都会运用这样的交互效果， 操作非常简单。首先点击九六左侧的 s v j 编辑器，进入到 s v j 编辑器的页面， 之后呢，我们在编辑器里面找到轮播图，设置超链接五角标这个组件，点击一下组件就可以插入到我们的编辑区域。那么需要注意的是，使用这个素材呢会有两个提示，提示一，只有开通微信支付的服务号才可以添加外链。 提示二，图片的上传数量为四的倍数，并且图片的高宽尺寸需要一致了， 了解这两点后呢，我们就可以直接上传我们准备好的图片，然后再将我们的文章链接复制粘贴到跳转网页处即可。那么如果你想要设置更多的张数的话，可以再继续的进行上传，一定要注意张数是四的倍数。 可以看到，如果我们上传三张图的话，我们点击预览是没有动画效果的，所以呢我们需要上传四张、八张、十二张依次类推的这个张数，但是建议大家最好一次性不要设置太多张。 设置好后呢，我们可以点击顶部的这个预览，看一下效果是不是完整的能实现， 如果是可以实现，我们可以点击导出按钮，将我们制作好的内容点击插入到编辑器，或者直接复制代码插入到公众号。以上是我们本期的分享，我们下期视频再见了。

苏牌小蚂蚁编辑器，高颜值图文排版神器！除了一些常规的排版样式，编辑器里还有许多特殊样式，比如说点击查看动画效果的 svg 图文互动样式、 上下左右滑动样式、多张图片无缝拼接的无缝样式等，使用这些特殊样式可以给整篇文章增添互动性、趣味性。所以本节课我就带着大家一起来认识一下这些特殊样式， 了解怎样查找这些样式，以及如何修改使用样式。第一种是 svg 交互样式， 在左侧样式展示区顶部选择组件分类，点击 svg 交互，这里我先选择 样式，写入到编辑区，给大家看一下互动效果，比如说这个样式， 点击这个光标可以查看动画效果，再写入这个样式， 点击彩蛋可以查看文字。对于 svg 交互样式的修改，主要有两种方式， 第一种方式，点击 svg 按钮修改，这里以五六五五六这个样式为例，在样式搜索框中输入样式 id， 五六五五六，点击搜， 先清空一下宾利区，然后写入这个样式， 按照提示文字点击查看一下效果，点击之后，图片由黑白虚化变为彩色明亮，点击该样式， 在样式工具条中点击 svg 按钮，这里需要提前准备好一张黑牌图片和一张彩色图片，然后点击上传图片， 将光标移动到图片上方，可进行删除操作。拖拽可调整图片的位置，点击下方预览查看效果。 接下来说一下相关参数的设置。模板尺寸这里默认为一百比一百，当然你也可以自定义设置 图片区，选择包含，整张图片会包含在模板尺寸内，然后保持原图片尺寸大小，比如说原图片 是一张长方形的图片，图片区域选择包含的话会保持长方形，如果选 选择铺满的话，图片会自适应铺满模板尺寸，就是这样的效果，变成方形。动画触发动作有两个，分别是点 机和自动，这里选择点击动画时长修改为零点五，点击预览查看效果。这里给大家一个建议， 如果想要给用户留有一种悬念感，可以设置点击播放，而像一些轮播图式的效果就可以设置自动播放。我们再来调整一下这个样式的相关参数。 图片区域选择包含动画触发动作，选择点击就是这样的效果，点击确定写入到编辑区。接着我们再来选择一个轮拨图式的效， 在样式搜索框中直接输入样式 id， 四二二八九，点击搜索就是这个样式。 写入到编辑区，点击该样式，在样式工具条中点击 svg 按钮，动画触发动作，选择自动， 动画时长保持默认为一秒，然后点击确定，写入到编辑区，就是这样的效果。自动播放，点击上方这个样式就是这样的效果，需要点击才能查看下一张图。 如果想要再次查看变异区的动画效果，在顶部工具栏中点击 ht ml 按钮，再次点击，一共点两下就可以查看效果。而对于 带有文字的 sbg 交互样式，其实这页面又不一样，我们先来写入一个样式，在样式搜索框中输入样式 id， 四五二七八，点击搜索就是这个样式。 先清空一下定义区，然后写入这个样式，就是这个效果，文字主行显示，点击该样式， 在钥匙工具条中点击 svg 按钮，这里可以修改文字的内容。先选择文字函数，也就是动画中文字显示的函数，这里以六行为例， 并在左侧区域进行预览，一共是六号。接着来修改文字的内容，字号加粗、颜色以及动画时长等设置之后 依然是在左侧区域进行预览。需要提醒一下，页面下方的重置按钮是重新播放动画效果的作用，设置完成后，点击确定，就可以写入到宾利区了。

哈喽，大家好，这里是陈哥硕设计，好玩又有趣，今天为大家带来 svg 格式制作和运行运用。首先我们这里拿飞个马，作业是制作过程快进的， 制作完后我们选择导出 svg 格式， 同时 sv 机格是可以在 a a 中打开进行再次编辑，然后打开阿里 icon front， 点击上传图标之项目。这里需要注意 svg 格式原文件上传的要求， 因为我们制作的图标，这里选择上传图标， 上场完后会有相关的信息，填写标签，按自己的图标属性来选择就好了。这里我选择去除颜色提交，后期也可以进行修改。上场完以后你可以暂时编辑大小、颜色等等， 如果想要替换原来的就点击保存，想要新建就点保存为副本。好了，这里就做完了，如果觉得不错就帮陈哥点赞，下期再见！

哈喽哈喽，我是玉清，我们今天讲一下展开和点击暂停的要素。一切 我们在基础布局里找到要去为之布局。 选中要送一句布局并拖入图文里。把文本内容删掉，把需要录出来。触动展开动画的内容放在这个框里，点击最外层的框，点击动画 设置宽高，彼时出发区完全露出来。 设置动画为展开实传为四 s， 点击固定归位全关。 在出发之后插入需要展开的内容， 点击展开滑动到最后展开动画需要反复预览，确定展开的内容能够完全展开， 不能够完全展开，就在展开的内容后方添加空格， 最好可以预览一下。 安利这些图片背景色是透明底色。教程结束了，下次见。

哈喽，编辑小伙伴们大家好，本期视频我们来制作一个，点击播放动图，随后展开图文的效果。以好奇按钮为例，我们需要先准备一张动图和 gpg 格式的图片，并将 图片上传到我的图库。向变异区添加一个 svg 布局，选中 svg 布局内的单列布局，点击背景按钮，将背景颜色更改为蓝色。把需要展开的内容包括图片、文 字、视频、滑动等一股脑的放在 svg 布局中。选中图片，点击定位按钮，取消图片的段前后距，选中 svg 布局，点击动画按钮，选择图片面板到图库。单击动图，添加到 svg 动画中。纵向坐标更改为零，动画 背景颜色更改为透明色。动画类别选择，弹入动画时长更改为零点二秒。点击下方绿色的添加动画按钮，添加一个动画。二、动画类型选择，展开动画时长更改为四秒即可。最后点击导航栏上的预览按钮，可以直接预览效果，你学会了吗？

保姆级教程来了，手把手带你玩转 s v g 编辑器 s v g 编辑器入口在编辑器界面的左侧菜单栏，选择 s v g 编辑器，跳转到 s v g 编辑器界面后，点击进入 s v g 编辑器即可打开。 二、 svg 编辑器界面介绍三来大家认识我们的 svg 编辑器界面我们的编辑区域大致可以分为四个板块，功能区、效果选择区、效果编辑区域、导航栏、工具区。 如何搜索 svg 组件在我们 svg 编辑器中有两类 svg 效果，第一个叫做 svg 组件，另一个则是 svg 样式模板。 svg 组件在 svg 编辑器界面的互动效果板块中， s v g 组件相当于一个预设好的框架，里面的内容需要你自己添加，如图片、动画、时间设置等，可发挥空间大。 s v g 样式模板 s v g 样式模板是一个完整的作品，包含了很多类型的效果，大家只需要对里面的字体、 图片等进行微调，就可以直接使用这类型的 s v g 效果。除了在 s v g 编辑器的样式模板板块中可以找到，在编辑器界面的样式 s v g 中也能进行选择使用搜索 s v g 组件和 s v g 样式模板有两种方， 第一种是在搜索框输入关键词或 id 号码，第二种是通过点击标签来筛选 id 查看方法，当你将鼠标放在某个效果上时， 右侧弹出的面板上就可以查看 id 号码。互动效果和样式模板板块下的 s v g 效果。查看 id 号码的方法相同，塞在。

今天来给大家分享这个情人节的 s v j 交互制作方法。首先点击九六编辑器的 s v j 编辑器，找到点击切换多张图片这个素材。之后，将我们制作好的图片素材按照密码点击顺序上传到编辑器中。上传好图片后，我们设置图片的触发区域， 触发区域的大小和位置都可以自定义进行调节。触发范围建议大家稍微放大一点，以防有时点击触发不了的效果发生。 以上都设置完成，我们就可以查看预览效果了。那么视频没看懂的别担心，后面还有文字图片教程，大家记得点赞收藏去试试看哦。