之前按照站酷中作者谢尔鱼的教程：用Axure实现类iOS单选按钮交互效果 做了一下，刚好同时有接触Pixate这个软件，就用Pixate也一并实现了同样的效果。

本文内容包括：页面动画的分析 / 用Axure制作简略步骤 / 用Pixate制作简略步骤 / 制作过程中的思考

先上最终效果图（Pixate制作）

一、页面动画的分析

用图来说明就是如下：

图是方便理解后面才画的，事实上这一步在纸上构思也无妨。

二、用Axure制作的简略步骤（谢尔鱼教程的概括）

1.制作并排布好所有元素；

2.btn-green转化为动态面板panel-control，重命名状态1为open，增加状态2 close；

3.open与close两状态内容中，分别改为开关打开与未打开的按钮图形；

5.下方组组合转化成动态面板：panel-result；

6.增加 点击 交互事件1：若为panel-control为open状态点击，则：

· panel-result 增加隐藏动作：向上滑动并隐藏；

· btn 增加移动动作：向左滑动；

· panel-control 增加面板状态改变：由open转化为close；

7.增加 点击 交互事件2：若为panel-control为open状态点击，则：

· panel-result 增加显示动作：向下滑动并隐藏；

· btn 增加移动动作：向右滑动；

· panel-control 增加面板状态改变：由close转化为open；

步骤基本到此就完了。

三、用Axure制作的改善与思考

步骤很好理解，相当于用btn-green的动态面板作为判断条件，实现了对点击后不同事件的激活。

Q1：这个原型有一个问题：只能在点击绿色区域时才能激活动作。怎么改善这个问题？

A1：给圆形的按钮也添加相同的交互。

Q2：怎么添加相同的交互？

A2：直接把panel-control的两个点击交互直接复制到按钮上，同时将此按钮的判断条件改为panel-control的面板状态。

Q3：我走了怎样的弯路？

A3：因为是直接复制交互事件的缘故，没有注意到复制过去的默认判断条件为本图形的状态，并且没有意识到可以以别的图形作为判断条件。我深陷于两个解法中：把按钮转化为动态面板后内容如何放置/不转化为动态面板时如何使其自行判断执行两个用例。

Q4：弯路里得到了什么？

A4：1.动态面板中的状态直接表现于当前页面中，包括样式和位置，故动态面板中不宜改变元件的位置，或者说需要改变位置的元件不适宜转化为动态面板；

2.不转化为动态面板时如何使其自行判断执行两个用例：好像没门：）

Q5：我还做了什么？

A5：在panel-result的动态面板中加入了两个按钮，只保留按钮开启关闭的效果，出现了一个问题：无论如何增删动作，点击该按钮时都会激活panel-control的动作。后来发现根本的原因在于我是直接把按钮复制过去，元件名称是相同的，所以动作的判断会出现问题，元件都改为不相同的命名自然就解决问题了。在这个项目里遇到的两个卡得比较严重的问题，都是在于直接复制别的元件而导致的。

四、用Pixate制作的简要步骤

1.用Photoshop画好所有元件，图层重命名，分组栅格化；

2.按照PxCook规范命名后，用其直接输出切图；

3.把切图全部导入Pixate中，并按照静态图排布；

4.btn添加tap动作；

5.btn添加move动画两个，激活条件均为btn的tap动作。具体如下：

move1：left 240 其他默认

move：left btnpng.x = = 240（condition） 265 其他默认

6.btn-bg-green添加fade动画，参考如上设置；

7.bottom添加move动画，同样参考以上；

8.手机端观看输出效果；

五、使用Pixate制作的思考

Pixate没有画布缩放和辅助线对齐的功能令我很郁闷，但是切图自动适应画布倒是挺好的。用Pixate制作的步骤其实比较简单，但是这次并没有教程的指导，因此也遇到了一些问题。

Q1：Axure中使用px作为移动的距离单位，Pixate中使用pt；

A1:自行计算或手动修改数值调整。计算方法另说，我是后者。

Q2：在添加动画后产生一种情况，无论怎么点击，按钮都只是往左移动；

A2：这是我在刚使用完Axure后使用Pixate带来的一个先入为主的疏忽。Axure中动作是输入移动的距离，而Pixate的输入提示则是move to，意为移动至。至此，此问题终结。

Q3：怎么使同一元件点击后根据不同情况激活不同动画?

A3：本来使用两个透明的tap图层来实现，但是总觉得不太合理（当然效果还是一样的），故思考在Axure中没有完成的问题，而后发现了动画激活选项中中除了动作以外还有一项条件（condition）可以使用，支持对位置和透明度等的判断来执行动画，故在动画中加上btnpng.x = = 240类似语句后可以完美实现预想的效果，问题终结。

以上。