交互组件
cellz管理员
2015-11-30
开关
开关在cellz中是最基础的交互组件。开关主要可以用来控制交互的触发事件,为“开”和“关”设置不同的触发行为,可以展现出不同的交互效果。
移动设备上的开关有两种状态,“普通”和“按下”。当我们新建一个开关,在左侧的结构列表中,就会出现这2个状态。
创建开关
在工具栏选“开关”,拖动鼠标绘出一个开关选区,将图层直接拖拽到结构列表中“普通”或“按下”的状态里。
拖动对象到设计区 ,选中它们,选择右键菜单中的“创建为”>“开关”,那么这2个对象分别被设定为“普通”和“按下”状态。
网页
cellz中的“网页”组件除了可以将网页连接到电子刊物内部显示,还能嵌入HTML文件。
网页的创建:单击工具栏中的“网页”,拖动绘制一个选区,按照需求选择嵌入网页的形式。
本地:首先需要你先选择好要键入的web,右键“将页面存储为”,在存储位置找到文件,并将文件集中到同一个文件夹,“选择本地文件”上传该文件夹中的默认文件即可。
嵌入式HTML:自行输入HTML 。对其修改,请先选择“清除”再进行操作。
说明:在存储网页资源时,有的网页只会出现一个文件,而有的会出现2个,上传时你只需选择默认的那个文件即可。
滚动
创建滚动
创建滚动有两种方式:
点击交互工具栏中的“滚动”,设计区出现创建滚动的选区,直接拖拽对象到这个选区内(只适用于图片和图形),调整属性>尺寸>高来控制滚动的显示范围。
拉动对象到设计区,按选中图层的方法将这些对象选中,右键>创建为>滚动。
滑动方式
• 连续滚动
• 均匀分页
• 吸附点分页
这里我们主要来说下吸附点分页的设置。
按上步骤添加滚动,选择“吸附点分页”的滚动方式,双击对象,出现蓝色竖条区域,在你想要重点展示的区域单击添加点,那么在滚动显示时,会自动停放在这些点上,以达到重点显示的效果。删除这些点,单击当它变大时,删除即可。
状态集
状态集以状态数为单位,一个状态集下可以存在多个状态,并且在这些状态里还可以嵌入状态集,每个状态可以呈现当前状态下的所有内容,并在编辑栏下的状态列表中依次显示。
创建状态集
同滚动的添加相同,你可以点击交互组件栏中的“状态集”,拖动鼠标添加一个空白的状态集,然后在将对象拉进状态集选区,或先将图片拉到设计区后,右键“创建为”状态集。
状态数的相关设置
双击对象,弹出状态数的编辑,状态数是依次排列的,你可以通过直接键入具体数字来添加状态数,也可以直接点击“+”来添加,改变某个状态的位置,长按并拖动鼠标。
状态集的交互效果
关于状态集的交互方式,下面我们罗列出一些基本的应用场景,更多的应用你可以在设计的过程中慢慢发现它的各种功用。
渐变
应用场景:
• 状态间的渐变切换,图片轮播
• 触发事件,可以通过两个幻灯片状态,来触发一组内容切换,比如点击图标,出现详细内文
• 淡入淡出动画,可以快速的实现元素的淡入淡出
纵向吸附:沿垂直方向,由下向上切换图片。
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
横向吸附:沿水平方向,由右至左切换图片
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
3D翻转X:沿X轴,按正方向进行翻转
应用场景:
• 状态间的3D翻转效果
3D翻转Y:沿Y轴从右往左进行翻转
应用场景:
• 状态间的3D翻转效果
• 配合某触发事件
缩放
应用场景:
• 状态间的弹出切换,缩放效果
• 触发方式
• 缩放动画的快速实现
弹出
应用场景:
• 状态间的弹出切换,重点展示
• 触发事件
• 关联对象
• 弹出动画的快速实现
飞驰:首个状态呈现切换时,第二个状态迅速弹出
应用场景:
• 图片间的呈现状态
交换:首个状态向下淡出,第二个状态垂直方向移出
覆盖:图片切换时,第二个状态迅速覆盖首个状态
动画
创建动画
在cellz中创建动画的方式也有两种,首先你可以在交互组件中选择动画,拖拽鼠标,出现动画的空白选区,将对象拉到选区内;另一种你可以先将对象拉到设计区内,选中对象,选择右键菜单栏中“创建为”>“动画”。
两种创建方式都是双击进行编辑,点击右侧下角“+”添加多个新的路径,拖动路径帧可以设置曲线路径,调整每一帧的位置、旋转、锚点等,来改变路径的运动方向,创建出丰富的效果。
动画里可以嵌套动画,同时可以嵌套状态集、视频、音频等其他组件,便于制作更深层次的动画和交互。
动画设置
通过对动画/动画帧的设置,不仅可以改变动画播放的时间、播放控制,同时可以设置交互组件之前的关联、触发,还可以在“交互设置”中利用 “自动播放”、“点击”、“悬停”来控制动画的播放。
需注意的是,在动画中有3个较为特殊的属性。动画中的旋转值可以设置负数;添加关键帧时,位置与前一帧重叠,且会延续上个对象的属性,如旋转值、锚点等;动画中可以更改锚点的位置来改变动画运动的路径。