iVX入门到精通大话 IVX 实战到精通

一、画布和图片序列

在 iVX 中，画布是用于对图像进行灵活编辑的组件，若你需要对图片进行融合，那么使用画布是你最优的选择。

图片序列在 iVX 中可以当做是跟轮播图类似的组件，不过和轮播图有很大差别；轮播图可以更加灵活的对图片文本进行操作，而图片序列只能对多张图片进行播放。

1.1 图片序列

图片序列位于组件面板中图片右侧：

以相对定位应用为例，创建相对定位应用，在应用中添加一个页面，在页面中点击图片序列即可添加；当点击图片序列后将会弹出资源选择窗口，只需要选择多张图片即可创建一个图片序列，当然也可以选择一张 gif 动图：

选择多张图片后点击确定即可：

此时在对象树中点击该图片序列，在属性中点击图片列表可以更改图片位置：

在图片位置中可以更改器播放时长等：

二、动画和时间轴

动画在iVX中是比较有特色的，支持用户自己定义动画路径以及动画样式。现在以一个绝对定位的文本为例：

点击文本，可以在文本左侧看到一个组件——轨迹，轨迹可以让我们为该组件创建帧动画：

为该文本添加轨迹属性后，在底部可以看到有一个时间轴，咱们可以对这个时间轴在对应的时间秒数打上关键帧，在这些关键帧中为其制作动画：

接着可拖动时间轴为其添加关键帧：

在不同的时间点打上关键帧后，如下图所示：

接着点击那些打上的关键帧改动其文本的位置或其他属性，以位置为例：

接下来在多个时间轴改变其文本位置：

最后点击轨迹，在属性中打开自动播放即可：

预览后文本将会根据关键帧信息播放动画。

三、我和iVX的合照

在第一点中介绍了画布的作用，接下来咱们使用画布合成一张图片，并且下载到本地。

3.1 页面绘制

以下是页面绘制示例，其中需要注意，在画布中绘制图片是绝对定位环境，若想要一张图片覆盖于另外一张图片之上，需要一张图片在对象树中位于另外一张图片之上。

以上对象树中我们发现有一个文件接口组件，文件接口组件是用于图片资源获取及上传。

3.2 功能制作

需要自由的对图片进行合成，咱们对画布添加点击事件，点击画布即可选择本地支资源图片，咱们首先对画布添加事件：

以上事件中，回调是指“某动作做完之后”需要做的事情，在以上示例中，读取完图片后，指定画布中的一个对象更改图片为选择的图片。

接着对合成按钮添加事件，点击按钮后使用画布对图片进行输出，输出到画布外图片即可：

最后预览如下：