“我这个图这样转一圈，再这样弹一下，最后咻的一下消失…”，为了阐明设计效果，即使手脚并用自带口技BGM，也只能收获一大堆的问号脸。想要丰满的展现你的设计方案，只靠静态的图形表达还是远远不够。所以很多设计师都喜欢用动态的的表达形式呈现设计效果，简单快捷不啰嗦，一口气说完不费劲儿。

       俗话说天下武功唯快不破，产品迭代快，deadline催的紧，能快速“交活”才是王道。本期青柠就要裂墙推荐一个小清新的动效设计工具——keynote！线框、动画、小视频，N个问题，一个对策全部搞定。

为什么选择keynote？

1. Flash、AE学习难度较大，制作周期较长，不易上手

2. keynote将每个动效的前、中、后动作拆分，日常可见的交互动作大都可以实现

3. 可以同步到iPhone、ipad设备上查看效果，通过添加超链接，轻松实现点按跳转操作，效果逼真（只要不乱点）

4. 可以直接生成mov视频格式导出，方便到没朋友

5. 画布尺寸可以自定义

#一共三期哦#

《如何用keynote做可操作App原型（一）——keynote动画功能怎么用》

制作动效前应如何思考、如何添加单一或多个动作、如何使用转场效果

《如何用keynote做可操作App原型（二）——keynote动效实例》

如何设置画布尺寸、如何设置热区实现手机端的点按操作、案例实践

《如何用keynote做可操作App原型（三）——综合运用制作可操作App原型》

可操作原型制作流程、如何导出

#第一期开课#

制作动效前应如何思考、如何添加单一或多个动作、如何使用转场效果

视频教程地址：

https://v.qq.com/x/page/i0369e3i9ji.html

1、制作动效前不得不说的秘密 

正式开讲之前，我们先来了解一下keynote动效功能面板

keynote操作页面

keynote动画效果的基本原理就是将每一个元素的动态分解为“构件出现”、“动作”、“构件消失”三个环节（上图红框区域）。

现在你心里要对两件事情非常清楚：#敲黑板 划重点#

A. 大致想象出你想要的动态效果是怎么样的，然后将每一个动作拆解为元素如何出现、出现后有什么动作、如何消失三个步骤（对应keynote添加动作的逻辑）。

B. 脑海中对这一组动效的前后关系有一个清晰的时间轴，最烧脑的环节就是就是不断调整“构件顺序”、“起始时间”、“延迟速度”。

把握这两点，依次按照元素出现的先后顺序，为元素添加动画效果，就是制作成功的关键！

2、如何添加单一或多个动作 

举几个小例子：

eg.1执行一个动作

需求：方块从A点出现后移动到B点消失

方法：绘制方形——点击“构件出现”选择一种动效——点击“动作”选择移到——调整移动路径——点击“构件消失”选择一种消失效果——调整构件顺序

添加“移到”动作

eg.2添加动作

需求：方块从A点弹出后弧形路径移动到B点弹跳4下

方法：绘制方形——点击“构件出现”选择“弹入弹出”——点击“动作”选择“移到”——调整移动路径——点击添加动效（红色菱形加号）选择“弹跳”——调整构件顺序

添加第二个动作

eg.3两个动作同时进行

需求：方块从A点边旋转边移动到B点

方法：绘制方形——点击“动作”选择“移到”——点击添加动效（红色菱形加号）选择“旋转”——调节参数——调整构件顺序“与构件1一起”

调整构件顺序

通过三个小例子基本就能跟大家说清楚keynote动画制作的基本原理了。其实原理非常简单，大家能添加的动作都是一样的，是否能制作出细腻的动态效果主要在于耐心的反复调试各种动作的细节参数（持续时间、角度、构件顺序…)，做动效是个体力话啊～

3、Amazing的转场效果 

 keynote页面之间的过渡效果也非常神奇，合理的选择一款动画效果，就能让你的App原型更佳细腻逼真。本期青柠就着重介绍一个“神奇移动”效果，就是把第一张中的对象动态移动到下一张幻灯片中，超炫酷！

方法：选择第一张幻灯片——点击“动画效果”——点击“添加效果”——选择”瞬间移动“

添加“神奇移动”效果

“神奇移动”效果有哪些实际的应用呢？

应用1:位移

应用2:变形

应用3:变色

是不是看似高端实则很简单呀，keynote的转场效果和动态效果还有很多，大家多多尝试，通过调节参数细节，制作完美的可操作原型。下课！

更多内容可以关注青柠的公众号#青柠乌冬#

预告：

《如何用keynote做可操作App原型（二）——keynote动效实例》

如何设置画布尺寸、如何设置热区实现手机端的点按操作、案例实践

《如何用keynote做可操作App原型（三）——综合运用制作可操作App原型》

可操作原型制作流程、如何导出

更多内容欢迎关注青柠的公众号：Hello_qingning