编辑器地址:https://editor.ivx.cn/
一、准备工作
进入编辑页后,选择其中一种应用类型创建应用,在此以相对应用作为示例:
创建好应用后在此选择对应的屏幕作为示例演示,在此选择电脑屏幕作为对应的大小:
接着选择整个项目的根,在其添加一个行作为内容的容器:
在对象树(右侧)“行”组件中右键可进行重命名:
在此重命名为容器后,选择容器行,在左侧的对应组件的属性中更改行的高度为撑开,此时该行将会撑开整个页面:
撑开的页面如下:
为了整个页面能够更美观,在此在属性中将该行的背景色设置为白色:
接着设置行的水平与垂直属性为居中:
二、按钮的基本设置
在此点击行,在行中可添加对应的组件,选择左侧组件栏中对应的按钮组件,点击添加后将会在对象树中添加按钮组件,并且也会在页面中添加按钮元素:
此时我们可以更改当前按钮的基本属性,点击按钮更改其背景颜色以及按钮按钮文字颜色:
觉得字号太大可以更改其文字字号大小:
接着我们在按钮的属性面板中往下拉,可以看到可以设置对应的边框宽度已经边框颜色:
设置完成后开始设置按钮的鼠标悬浮动效。
三、按钮动效设置
在组件面板(最左侧)中找到动效,选择需要添加动效的组件,点击即可添加动效:
接着我们可以更改动效命名方便区分,设置动效名称为“鼠标悬浮动效”:
接着我们点击动效,在动效的属性中选择自定义动效:
此时将会弹出一个特效编辑框:
若没有弹出可以点击编辑动效进入:
进入动效编辑页后,需要了解如图两个对应的动效内容:
接着我们在最终结束时添加对应的关键帧,鼠标移动至末尾即可添加:
接着我们点击最开始的关键帧,将原本按钮的大小输入其中:
此时我们要注意,原本的按钮宽高是 150px * 50px,不要输入错误:
接着在最后的关键帧,点击关键帧后,输入对应需要改变的大小值:
最后点击保存即可:
确定后,点击对应动效,选择触发时机为手动触发,该触发将会使动效的使用更加灵活: