Pixate 相关教程

Oct 14, 2015 ·
16 分钟阅读

以前写的几篇关于 Pixate 应用的教程合集

Pixate 实践 1 - Axure 与 Pixate 对 iOS 按钮的实现

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

pixate1-0

本文内容包括：

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

pixate1-1

一、页面动画的分析

用图来说明就是如下：

pixate1-2

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

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

  1. 制作并排布好所有元素；
  2. btn-green 转化为动态面板 panel-control，重命名状态 1 为 open，增加状态 2 close；
  3. open 与 close 两状态内容中，分别改为开关打开与未打开的按钮图形；
  4. 下方组组合转化成动态面板：panel-result；
  5. 增加点击交互事件 1：若为 panel-control 为 open 状态点击，则：
    • panel-result 增加隐藏动作：向上滑动并隐藏；
    • btn 增加移动动作：向左滑动；
    • panel-control 增加面板状态改变：由 open 转化为 close；
  6. 增加点击交互事件 2：若为 panel-control 为 open 状态点击，则：
    • panel-result 增加显示动作：向下滑动并隐藏；
    • btn 增加移动动作：向右滑动；
    • panel-control 增加面板状态改变：由 close 转化为 open；

pixate1-3

步骤基本到此就完了。

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

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

Q1：这个原型有一个问题：只能在点击绿色区域时才能激活动作。怎么改善这个问题？
A1：给圆形的按钮也添加相同的交互。

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

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

Q4：弯路里得到了什么？
A4：以下两点：

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. 手机端观看输出效果；

pixate1-4

五、使用 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 类似语句后可以完美实现预想的效果，问题终结。

以上。

Pixate 实践 2 - Pixate 中实现循环动画

上周五在 cnpixate 中看到一个帖子提问，如何做一个 loading 动画的循环。动画的来源和问题应该是来自于优设的一篇文章：

WINDOWS 设计师也可以用！免费动效神器 PIXATE 初级教程（一）
http://www.uisdc.com/windows-motion-pixate-tutorials-1

那么该怎么做 reset 的动画呢，我认为关键是时间轴的控制和如何让两个半圆回复到最初的状态。效果图请拉到最后，时间轴如下图：

pixate2-1

简单原理阐述就是：

放置好元件位置后，以下为添加动作步骤：

  1. leftpart: rotate(based on download btn /180/ tap duration 2s delay 1s)
  2. rightpart: rotate(based on download btn /180/ tap duration 2s delay 3s) fade(0 to 100)
  3. download btn: fade(100 to 0)
  4. again btn: fade(0 to 100)
  5. leftpart2 & rightpart2: fade(0 to 100/ tap duration 0s delay 5s)
  6. leftpart: rotate(based on download btn /0/ tap duration 0.1s delay 5s)
  7. rightpart: rotate(based on download btn /0/ tap duration 0.1s delay 5s) fade(100 to 0)

到第 7 步的情况，页面以一个完成的圆（leftpart2 & rightpart2）覆盖着原来的图形，并让 leftpart & rightpart 回复最初的位置。接下来就比较好写了。

  1. leftpart2 & rightpart2: fade(based on again btn / 100 to 0/ tap duration 0s delay 0s)
  2. leftpart: rotate(based on again btn /180/ tap duration 2s / delay 1s)
  3. rightpart: rotate(based on again btn /180/ tap duration 2s delay 3s) fade(0 to 100)
  4. leftpart2 & rightpart2: fade(0 to 100/ tap duration 0s / delay 5s)
  5. leftpart: rotate(based on again btn /0/ tap duration 0.1s / delay 5s)
  6. rightpart: rotate(based on again btn /0/ tap duration 0.1s / delay 5s) fade(100 to 0)

至此基本就完成了，again 的 fade 动画没有包括在上面。

pixate2-2

Pixate 实践 3

开始学习一个软件，从官方提供的材料开始，我认为是最快捷有效的方式。这系列的文章接下来会解构一些官方 demo，讲述用 Pixate 制作原型中的一些细节，这篇的解构 demo 是 Keezy。
这个 demo 的重点是按钮弹出的效果。先来分解下动画：

看似很简单，但是上手制作后，才发现官方的这个 demo 做得实在很巧妙。先来看看大致的步骤（这次不是一下全部列出所有正确步骤，而是以一边思考一边制作来写）：

  1. 元件放置好位置，所有按钮均放置于中间。
    元件列表：菜单按钮 x1，二级菜单按钮 x5，背景 x1，模糊背景 x1；

  2. 菜单按钮：
    添加动作：tap；
    添加动画：scale-based on menu tap-2x-0.2s 0s
    scale-based on menu tap-10x-0.1s 0.2s
    fade-based on menu tap-50%-0.2 0s

  3. 按钮动画分析：初一看，这个曲线运动放大的动画其实是挺复杂的，每个按钮的轨迹看起来是这样的一条曲线运动，而 Pixate 里是没有直接的曲线轨迹动画的。

pixate3-1

但是这时候就该科普一下运动的基础了。曲线运动的本质是在不同方向上的速度不同而造成的，以抛物线曲线为例子，就是在水平方向的匀速运动和竖直方向上的匀加速匀减速运动复合而成的。以这样的想法来思考的话，这个运动的动画其实就是按钮的直线运动和按钮的旋转运动复合而成的。这样解决了运动的原理问题。

同时也产生另一个问题，Pixate 中是无法使一个元件以特定对象为旋转点旋转的，只能实现自身的旋转。但是考虑到五个按钮都需要实现同样的问题，就自然的想到了以五个按钮组成组来旋转，那么只需要给按钮添加位移和缩放的动画就可以了。下一步是把五个按钮进行位移后的坐标定位，并记录。

  1. 按钮动画：
    添加图层：content，并把五个按钮都添加到此图层的子图层中；
    content 图层属性：无填充，scale-0x，opacity-50%
    每个按钮分别添加动画：move-based on menu tap-坐标-0.1 0.4
    content 添加动画：scale-based on menu tap-1x
    rotate-based on menu tap-90

  2. 返回动画分析：因为点击屏幕任意的位置都可以返回，可见 content 的大小等于画布的大小而且一开始处于 -90 度状态。这一点应该在上一步的时候就考虑。此时我们修改下 content 的大小后添加效果：
    content 添加 tap 动作
    content 大小及属性修改
    content 添加动画：scale-based on content tap-0
    菜单按钮添加动画：scale-based on content tap-1x
    背景添加动画：fade-based on content tap-100%

到这一步，就是最基本的完成了。但是一打开进行演示后再和官方的对比，可能就会马上发现几个很严重的问题。

下面来解决这几个问题。

  1. 位置完全错乱是因为这是 Pixate 图层的一个痛点。因为没有分组功能，只能以父子图层的方式存在，而这样设置之后，子图层的元件的坐标会以父图层为基准，也就是说，五个二级按钮通过加入父图层，以及父图层的大小调整，原先设置的位置坐标和现需要的已经完全不同。解决这个问题只需要重新对五个按钮位置进行定位调整。
  2. 打开运动的设置可见，在设置运动时，Pixate 中变化曲线默认是线性的，但是现实中并不是每一项运动都是线性的变化。Pixate 中对曲线的类型也是可调的，对一些动画的曲线进行调整后可以解决这个问题，如菜单按钮和二级菜单的缩放调整为 spring（spring 动画在 iOS 7 后被广泛运用），二级菜单按钮的移动改为 ease-out quadratic。至于 ease-out 曲线的不同类型，可以参看下图：

pixate3-2

运动曲线图来自：http://easings.net/zh-cn

  1. 违和感的问题我一直想不明白问题出在哪里，直到看到了官方 demo 里的按钮参数。在这一步的处理上略有不同：

每个按钮分别添加动画：move-based on menu tap-坐标-0.1 0.4

而官方的 demo 里 delay 的设置是每个按钮比前一个延迟 0.03 秒，即延迟时间分别是 0.35，0.38，0.41，0.44 与 0.45，修改了这一点后，会发现前面所说的违和感其实来自于按钮的展开感。

最后来总结下，这个 demo 中容易被忽略的点：

  1. 父图层与子图层的相关属性设置；
  2. 按钮的曲线运动如何设置及如何显得自然；
  3. 按钮的展开感如何营造；
  4. 如何实现全屏任意位置点击返回；

最后放效果图：

pixate3-3

编辑于 Nov 19, 2024
© 2025 Bluepikachu