Appearance
功能详解
图片
图片组件是 ezDrop 的基本模块，使用图片组件可以轻松完成无缝图的排版、超链接和小程序链接的添加、长按保存和识别二维码等基础的 SVG 排版操作。
1.链接/小程序链接
1.1 添加链接/小程序链接
第一步：将图片导入编辑区列表后，点击组件右侧「专业交互」按钮，点击添加链接按钮。
第二步：输入超链接或点击「小程序链接」选项后输入小程序 appid 和小程序路径，输入完成后点击添加，即可完成链接添加。
如需在同一张图片上添加更多链接，可以再次点击组件右侧「专业交互」按钮，点击添加链接按钮，重复上述操作即可。
Tips：订阅号文章内容不支持插入外链，仅有已开通微信支付功能的服务号支持插入外链。
1.2 编辑链接/小程序链接
添加链接后，点击组件右侧编辑链接按钮，在弹出的已添加链接弹窗中，双击链接文本可以编辑链接，点击删除按钮可以删除链接。
1.3 编辑热区
添加链接或小程序链接后，组件右侧会出现热区编辑按钮，点击进入热区编辑界面，拖动热区轮廓边缘可以调整热区大小，拖动热区可以调整位置。
2.锁定/解锁
2.1 锁定图片
导入图片后，点击组件右侧「专业交互」按钮，点击锁定图片按钮，锁定图片后，在手机预览中，图片将无法长按保存、长按识别二维码。
2.2 解锁图片
图片锁定后，点击组件右侧「专业交互」按钮，点击解锁按钮，图片解锁将恢复长按保存、长按识别二维码能力。
3.替换图片
插入图片后，按住 Ctrl/Command，用鼠标左键选中图片组件，将鼠标移至素材库中要替换的图片上方，会出现「替换图片」按钮，点击即可替换编辑区中选中的图片。
Tips：使用快捷键时，Windows 系统使用 Ctrl 键，macOS 系统使用 Command 键。
视频、音频和卡片组件
ezDrop 支持导入视频、音频、音乐、视频号、红包封面、公众号卡片、视频号直播预约卡片、地图组件等组件模块，并根据组件特性，支持对组件进行美化操作。
1.组件和卡片的导入方法
使用 ezBox 提取组件功能，可快速导入各种组件。
第一步：进入公众号后台-草稿箱页面，点击「新的创作」新建草稿。
第二步：在草稿正文中插入已经上传好的视频、音频、视频号卡片等需要提取到 ezDrop 的组件。
第三步：点击正文上方工具栏右侧 ezBox 按钮，选择「提取组件」，点击后正文中的视频、音频、视频号卡片等组件将被添加到 ezDrop 编辑区列表中。
Tips：使用 ezBox 提取组件导入的组件，默认呈现公众号原生组件样式。原生组件样式，就是将组件直接导入文章草稿时呈现的样式。
2.组件美化功能
第一步：导入组件后，点击右侧开启美化开关，可开启组件美化功能。
第二步：开启美化功能后，组件将变成文件夹，可拖入图片、序列帧等组件作为美化图层，拖入的组件不可添加专业交互。
Tips：用户点击美化封面后，将触发不同组件效果。如视频组件，点击后封面消失同时视频播放；音频组件，点击后播放音频；视频号组件，点击后跳转视频号页面等。
3.视频组件的旋转功能
导入视频后，点击组件右侧视频旋转按钮，视频将顺时针 90° 旋转，以适配横版设计的图文。需要注意的是，仅有 16:9 和 4:3 比例的视频可以开启旋转功能。旋转功能开启后，再次点击旋转按钮可关闭旋转功能。
交互文件夹
1.图片轮播
图片轮播组件可将多张图片按设定的播放时长、动画方式从头到尾循环展示。与图片、SVG画布等组件相结合，可呈现多种图片展示、广告轮播效果。
使用手机微信扫描下方二维码，查看效果预览。
1.1 如何使用图片轮播组件？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「图片轮播」将其添加到列表中。
第二步：点击组件右侧「专业交互」按钮，可选择多种轮播动画形式：渐变轮播、滚动轮播和缩放轮播。
Tips：更多轮播动画形式将在后续版本中更新。
第三步：在「图片轮播」文件夹中拖入「图片」等组件可实现多张图片的自动轮播效果，建议轮播图片的尺寸保持一致。
专业版用户在组件右侧的时间调整区域，可设置单张图片的停留时长。
Tips：图片越多，完成全部图片的单次时长越长，用户的「完读率」将会越低，请注意图片数量及播放时长。
2.左右滑动
左右滑动组件可导入多张图片，并由用户自主左右滑动随意查看。根据滑动特性，左右滑动组件可选流畅滑动或吸附滑动，以呈现不同尺寸的图片素材。
使用手机微信扫描下方二维码，查看效果预览。
2.1 如何使用左右滑动组件？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「左右滑动」将其添加到列表中。
第二步：点击组件右侧「专业交互」按钮，可选择两种滑动特性：流畅滑动和吸附滑动。初次添加左右滑动组件后，默认选择吸附滑动效果。
第三步：在「左右滑动」文件夹中拖入「图片」等组件，可实现左右滑动效果。
3.点击切换
点击切换组件可以实现在用户点击后，以设定动画形式、动画时长切换图片，用户多次点击可切换多张图片。与下拉展开、音频、视频等组件结合可实现更多点击后切换的交互玩法。
使用手机微信扫描下方二维码，查看效果预览。
3.1 如何使用点击切换组件？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「点击切换」将其添加到列表中。
第二步：点击组件右侧「专业交互」按钮，可选择多种切换动画：渐变切换、卡牌切换和播放GIF。
「点击切换」文件夹默认带有「点击前」和「点击后」两个子文件夹，点击组件右侧的加号按钮
，可新增「过渡页」文件夹。
Tips：「点击前」和「过渡页」文件夹中只能放入「图片」、「图片轮播」和「序列帧」，此时组件的链接功能不可用，图片锁定自动开启，不可长按识别二维码。专业版用户可在组件右侧的时间调整区域，设置过渡时间。
「点击后」文件夹中可放入大多数组件，组件原有交互功能无限制。
3.2 播放 GIF
在点击切换的动画方式中选择「播放 GIF」后，在组件的每个文件夹中拖入GIF图，即可实现点击后切换并播放下一张 GIF 图。
点击新增文件夹后可增加切换的 GIF 数量。
GIF 文件夹中支持放入「图片」、「图片轮播」和序列帧，此时组件的链接功能不可用，图片锁定自动开启，不可长按识别二维码。
4.下拉展开
下拉展开组件可使长图文内容隐藏，在用户点击或设定的其他触发方式触发后，长图文完整内容展开。
4.1 如何使用下拉展开组件？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「下拉展开」组件将其添加到列表中。
第二步：点击模块右侧「专业交互」按钮，可选择其他动画方式：点击展开、自动展开和收缩展开。
第三步：在展开前、展开后文件夹中拖入组件。展开前文件夹中仅限拖入一个任意组件，展开后文件夹可拖入多个任意组件。
第四步：在「下拉展开」文件夹右侧调整时间，可调整展开动画时长，单位是秒。
4.2 点击展开
添加下拉展开组件后，默认效果即点击展开。点击展开的动画效果是在用户点击首屏后，展开后续画面内容。
使用手机微信扫描下方二维码，查看效果预览。
4.3 自动展开
自动展开的效果是在图文加载完成后，在延迟时长后自动展开画面。修改展开前文件夹右侧的时间，可调整展开动画延迟开始的时长，单位是秒。
使用手机微信扫描下方二维码，查看效果预览。
4.4 收缩展开
收缩展开的效果是在用户点击后，展开前的画面向上收缩至顶部，随后切换为新图片并向下展开后续画面内容。
使用手机微信扫描下方二维码，查看效果预览。
5.序列帧动画
序列帧动画是通过将若干帧图片以设定速度连续播放，实现高清、高帧率动画的播放效果。
使用手机微信扫描下方二维码，查看效果预览。
5.1 如何使用序列帧动画？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「序列帧动画」组件将其添加到列表中。
第二步：点击模块右侧「专业交互」按钮，可选择其他动画方式：自动播放、点击播放和点击停止。
第三步：将图片组件导入序列帧文件夹，此处可参照 导入图片 教程。
第四步：修改组件右侧时间可调整序列帧动画的整体时长，单位是秒。
Tips：使用 Adobe Effect 可以将视频导出 PNG 序列帧。
5.2 自动播放
选择自动播放，序列帧将自动按设置的动画时长循环播放。
Tips：尝试调整序列帧内部图片的锁定/解锁状态、动画持续时间，可以得到不同的交互效果。
5.3 点击播放
选择点击播放，序列帧将在用户点击后播放一次。
5.4 点击停止
选择点击停止，序列帧将自动循环播放，并在用户点击后停止。
6.布局文件夹
布局文件夹提供了三种布局方式，可使文件夹中的组件按顺序上下、层叠或左右分栏排列。
使用手机微信扫描下方二维码，查看效果预览。
6.1 如何使用布局文件夹？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「布局文件夹」将其添加到列表中。
第二步：点击组件右侧「专业交互」按钮，可选择多种布局方式：普通布局、重叠布局和分栏布局。
第三步：在布局文件夹中拖入组件即可。
布局文件夹可互相嵌套，点击「置顶」按钮，可将此「布局文件夹」的显示优先级提高，再次点击可取消置顶。
6.2 普通布局
在普通布局中，各组件将按顺序由上至下依次排列，文件夹中可拖入任意内容。修改组件右侧百分比，可调整「布局文件夹」的宽度，宽度不可超过100%。
6.3 重叠布局
开启「重叠布局」后，将出现「顶层」和「底层」子文件夹，专业版用户可点击组件右侧添加文件夹按钮，添加「中间层」子文件夹。
在「重叠布局」中，各文件夹层层重叠排列，文件夹中可拖入任意内容，文件夹的宽度和高度与「顶层」文件夹中图片的宽度和高度一致，若「底层」和「中间层」的图片高度超过「顶层」，超过部分则无法显示。
建议「重叠布局」中各图片的宽度高度保持一致。
6.4 分栏布局
开启「分栏布局」布局后，将默认出现「第一栏」和「第二栏」子文件夹，宽度各为 50%。
点击右侧添加文件夹按钮，添加更多分栏文件夹，每一栏默认将 100% 的屏幕宽度平均分配。可改变分栏文件夹右侧的百分比，调整每一栏的宽度比例。
7.SVG 画布
SVG 画布是一个简单的图片叠加和动画编辑器，你可以使用 SVG 画布在一张背景图上叠加图片并给叠加的元素设置简单动画，如闪烁、缩放等，可用于制作动态的交互提示，如点击提示、滑动提示、弹出海报等效果。
使用手机微信扫描下方二维码，查看效果预览。
7.1 如何使用 SVG 画布组件？
第一步：在 ezDrop 主界面点击「添加交互」按钮，选择「SVG 画布」组件将其添加到列表中。
第二步：在背景层和元素层中拖入图片组件。在背景层文件夹中仅可拖入一个组件，在元素层中可拖入若干组件。
第三步：背景层和元素层文件夹中均有内容时，可点击 SVG 画布组件右侧热区按钮设置元素的大小和位置，调整结束后，点击右上角关闭按钮，即可保存并回到主界面。
第四步：可点击图片右侧动画按钮，设置元素动画效果。
Tips：SVG画布很适合用来给图片添加点击提示、滑动提示等动画，然后代替图片放置在滑动、点击切换、下拉展开等组件中，可以实现精美的动态提示效果。
7.2 元素的动画效果
ezDrop 的 SVG 画布组件预置了 6 种元素动画效果，分别是闪烁、晃动、缩放、弹跳、摇摆和翻转。
扫描下方二维码可预览动画效果。
8.代码盒子
ezDrop 中的代码盒子组件，可以让你将更多内容导入 ezDrop 中进行编辑。 将第三方编辑器内容代码复制到 ezDrop 的代码盒子中，填写内容宽度和高度，就可以拖入到左右滑动等组件中一起排版了！不管是其他编辑器的代码还是自己写的代码，都可以在代码盒子中粘贴、编辑。
8.1 添加和编辑代码
第一步：进入公众号后台-草稿编辑页面。
第二步：打开 ezDrop 主界面，点击「添加交互+」按钮，选择「代码盒子」组件。
第三步：点击列表中代码盒子组件右侧的编辑按钮，将自己编辑好的代码粘贴在代码盒子中。
8.2 设置代码盒子宽高
代码盒子的编辑界面中，可选自定义输入代码盒子的宽度和高度，单位是px。输入宽高之后，可将代码盒子拖入其他交互文件夹中。如宽高留空，代码盒子将不可拖入其他交互文件夹。
宽度的计算方法：代码中的图片宽度；
高度的计算方法：代码中不重叠图片的高度之和，即图片的实际占用高度。