交互组件

cellz管理员 2015-11-30
交互组件是cellz为你设计的复合容器类组件。该类组件具备一定的基础交互特性,也具备容器的特征。你可以通过多个交互组件的关联与嵌套实现丰富交互方式。

开关

开关在cellz中是最基础的交互组件。开关主要可以用来控制交互的触发事件,为“开”和“关”设置不同的触发行为,可以展现出不同的交互效果。

移动设备上的开关有两种状态,“普通”和“按下”。当我们新建一个开关,在左侧的结构列表中,就会出现这2个状态。


创建开关

在工具栏选“开关”,拖动鼠标绘出一个开关选区,将图层直接拖拽到结构列表中“普通”或“按下”的状态里。

拖动对象到设计区 ,选中它们,选择右键菜单中的“创建为”>“开关”,那么这2个对象分别被设定为“普通”和“按下”状态。



网页

cellz中的“网页”组件除了可以将网页连接到电子刊物内部显示,还能嵌入HTML文件。

网页的创建:单击工具栏中的“网页”,拖动绘制一个选区,按照需求选择嵌入网页的形式。

本地:首先需要你先选择好要键入的web,右键“将页面存储为”,在存储位置找到文件,并将文件集中到同一个文件夹,“选择本地文件”上传该文件夹中的默认文件即可。
嵌入式HTML:自行输入HTML 。对其修改,请先选择“清除”再进行操作。

说明:在存储网页资源时,有的网页只会出现一个文件,而有的会出现2个,上传时你只需选择默认的那个文件即可。

网页.png

 


滚动 

创建滚动

创建滚动有两种方式:
点击交互工具栏中的“滚动”,设计区出现创建滚动的选区,直接拖拽对象到这个选区内(只适用于图片和图形),调整属性>尺寸>高来控制滚动的显示范围。
拉动对象到设计区,按选中图层的方法将这些对象选中,右键>创建为>滚动。

滑动方式

•    连续滚动
•    均匀分页
•    吸附点分页

这里我们主要来说下吸附点分页的设置。

按上步骤添加滚动,选择“吸附点分页”的滚动方式,双击对象,出现蓝色竖条区域,在你想要重点展示的区域单击添加点,那么在滚动显示时,会自动停放在这些点上,以达到重点显示的效果。删除这些点,单击当它变大时,删除即可。

滚动.png

 

状态集

状态集以状态数为单位,一个状态集下可以存在多个状态,并且在这些状态里还可以嵌入状态集,每个状态可以呈现当前状态下的所有内容,并在编辑栏下的状态列表中依次显示。


创建状态集

同滚动的添加相同,你可以点击交互组件栏中的“状态集”,拖动鼠标添加一个空白的状态集,然后在将对象拉进状态集选区,或先将图片拉到设计区后,右键“创建为”状态集。


状态数的相关设置

双击对象,弹出状态数的编辑,状态数是依次排列的,你可以通过直接键入具体数字来添加状态数,也可以直接点击“+”来添加,改变某个状态的位置,长按并拖动鼠标。

状态集1.png

状态集的交互效果


״̬



״̬



关于状态集的交互方式,下面我们罗列出一些基本的应用场景,更多的应用你可以在设计的过程中慢慢发现它的各种功用。

渐变
应用场景:
•    状态间的渐变切换,图片轮播
•    触发事件,可以通过两个幻灯片状态,来触发一组内容切换,比如点击图标,出现详细内文
•    淡入淡出动画,可以快速的实现元素的淡入淡出

纵向吸附:沿垂直方向,由下向上切换图片。
应用场景:
•    状态间的切换
•    配合状态集关联的一种方式

横向吸附:沿水平方向,由右至左切换图片
应用场景:
•    状态间的切换
•    配合状态集关联的一种方式

3D翻转X:沿X轴,按正方向进行翻转
应用场景:
•    状态间的3D翻转效果

3D翻转Y:沿Y轴从右往左进行翻转
应用场景:
•    状态间的3D翻转效果
•    配合某触发事件

缩放
应用场景:
•    状态间的弹出切换,缩放效果
•    触发方式
•    缩放动画的快速实现

弹出
应用场景:
•    状态间的弹出切换,重点展示
•    触发事件
•    关联对象
•    弹出动画的快速实现

飞驰:首个状态呈现切换时,第二个状态迅速弹出
应用场景:
•    图片间的呈现状态

交换:首个状态向下淡出,第二个状态垂直方向移出

覆盖:图片切换时,第二个状态迅速覆盖首个状态



动画

创建动画

在cellz中创建动画的方式也有两种,首先你可以在交互组件中选择动画,拖拽鼠标,出现动画的空白选区,将对象拉到选区内;另一种你可以先将对象拉到设计区内,选中对象,选择右键菜单栏中“创建为”>“动画”。

两种创建方式都是双击进行编辑,点击右侧下角“+”添加多个新的路径,拖动路径帧可以设置曲线路径,调整每一帧的位置、旋转、锚点等,来改变路径的运动方向,创建出丰富的效果。

动画里可以嵌套动画,同时可以嵌套状态集、视频、音频等其他组件,便于制作更深层次的动画和交互。


动画设置

通过对动画/动画帧的设置,不仅可以改变动画播放的时间、播放控制,同时可以设置交互组件之前的关联、触发,还可以在“交互设置”中利用 “自动播放”、“点击”、“悬停”来控制动画的播放。







需注意的是,在动画中有3个较为特殊的属性。动画中的旋转值可以设置负数;添加关键帧时,位置与前一帧重叠,且会延续上个对象的属性,如旋转值、锚点等;动画中可以更改锚点的位置来改变动画运动的路径。
 
分享到微博 分享到微信
×
请打开微信"扫一扫",可将文章分享到朋友圈