【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照

目录

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作 【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务 【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作 【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作

高分提升请查看专栏： iVX入门到精通 大话 IVX 实战到精通

一、画布和图片序列

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

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

1.1 图片序列

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

二、动画和时间轴

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

三、我和iVX的合照

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

3.1 页面绘制

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

在这里插入图片描述

在这里插入图片描述

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

3.2 功能制作

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

在这里插入图片描述

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

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

在这里插入图片描述

最后预览如下：

在这里插入图片描述