PIXATE动效设计工具 v1.7.0 官方最新版

PIXATE动效设计工具是一款专业的动效设计软件。如何设计动效呢？PIXATE动效设计工具可以帮助您。该工具采用适合设计师的思维方式，通过基本动画、数值对接、原生移动设计就可制作出各种动态效果了，支持实时预览、全平台，有需要的朋友赶快下载吧，可以大大提高设计效率。有兴趣的玩家快来下载体验啊！

软件特点

1、适合设计师的思维方式

QC的好处是可以比较方便的和程序猿对接，很多动效的实现逻辑和前端的代码逻辑是相通的。也就是说，使用QC虽然不需要写代码，但归根结底还是猿类的思维方式，对于我们这些一点代码不懂，逻辑能力又不是特别好的小小设计师来说，还是有些门槛的。看到满屏的连接线，就让人有点望而却步，搞不清其中的逻辑。

作为设计师，无论是交互还是视觉，无论是用PS、AI还是用Axure、Sketch，我们最最熟悉的一个概念，就是图层了。而Pixate的操作方式，同样也是图层的概念。Pixate的界面，乍一看有点像PS呢。

PIXATE(动效设计软件) v1.7.0 官方最新版
如上图所示，左上角是图层区，我们可以将视觉稿或是高保真的交互稿切图后导入Pixate中，所有的图层按照前后顺序出现在图层区中，与PS一样，上层的图片会覆盖在下层的图片上，图层还可以设置成组。历史记录区域也与PS很相似，记录最近的20步操作。值得注意的是，Pixate是随时保存的，如果操作了一堆之后，想要退回到20步以后，就再也回不去了左下角是手势交互和动画区域，包括常用的手势操作(拖拽、单击、双击、长按、旋转、缩放、滚动)和常见的动效(移动、缩放、旋转、渐隐渐显、变色、改变图片、重复)，我们可以将这些手势或是动效直接拖拽到图层上，图层就会实现相应的效果。界面右侧则是对图层属性和交互和动画属性的设置。图层属性可以用来设置图片的大小、位置、透明度等。重头戏是右下角的交互和动画属性设置，通过设置这些参数，可以将手势和相应的动画连接起来，连接完成后，一个可以操作、可以交互的原型就制作好了。

那这些参数该如何调呢?这里给出几个练习的链接，大家做几个实例之后，就会得心应手了。

2、实时预览，可交互

Pixate的另一个优点就是可以实时预览，并且是可以在手机上实时操作和预览。只需在手机上下载Pixate的app，iOS和Android都可以下载，通过wifi或是数据线连接电脑，就可以实时看到预览效果了。如果懒得连手机，也可以在模拟器上预览效果。

3、全平台

你可以online使用，也可以在Mac或是Windows上下载使用。Pixate支持多款iOS和Android机型，甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表，可以说是全平台覆盖。

PIXATE(动效设计软件) v1.7.0 官方最新版
说了那么多优点，Pixate也有一些缺点。它还是更适合做页面级的动画，对于需要形变、非常细腻的复杂动画，有些无能为力。所以Pixate更适合交互设计师来表达界面逻辑，而更加生动有趣的loading或是彩蛋，还是交给视觉大神们，用Flash或是AE来做吧。

使用教程

动画属性

每个动画，都有一组依赖于交互的属性以及动画模式。本章节将会介绍各个模块的使用方式。

移动

C持续不断到终值

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT BEGIN & END

此选项设置后，图层中的交互将会进行触发。必须设置起始点和终点。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

MOVE TO

图层的下拉边被用作参考，X 和 Y 字段指定了图层应该移动的位置。

水平 参数 ：

Left, Horizontal Center, Right

垂直 参数 ：

Top, Vertical Center, Bottom

持续不断的速率

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT

此选项设置后，图层中的交互将会进行触发。在滚动区域内，如果想要移动图层，就会使用到。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

MOVE

操作下拉列表，允许你修改区域内的参考图层。

参数 ：

Top, Right, Bottom, Left, Horizontal Center, Vertical Center

RATE

在图层移动时，改变了速率这个字段。在滚动交互中，根据这个动画，滚动的方向与速率值的正负相匹配。

执行到终值的时间

适用于所有的交互

CONDITION

这个动画模式只是条件中的一个字段，动画会对其进行检查来决定采取什么 action。更多信息请查看 Conditions。

MOVE TO

这个选项指明了图层要移动到什么地方。图层的下拉边被用作参考，X 和 Y 字段指定了图层应该移动的位置。

EASING CURVE

这就是你想要为动画使用的缓和曲线。

DURATION

这个就是你定义的动画持续的时长。

持续时间和延时可以用来模拟链接动画的体验。

DELAY

从动画开始时，设置延时。

缩放

持续不断到终值

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT BEGIN & END

此选项设置后，图层中的交互将会进行触发。必须设置起始点和终点。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

SCALE TYPE

下拉改变了用来缩放图层的方法：通过比例进行缩放或者缩放到指定的尺寸。

LINK X AND Y

这个选项选中后， x 或者 y 中的一个，一起缩放或者分别指定不同的值。

ANCHOR

图层由九宫格进行分割。

SCALE

通过比例或者指定尺寸来进行缩放。

持续不断的速率

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT

此选项设置后，图层中的交互将会进行触发。在滚动区域内，如果想要移动图层，就会使用到。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

ANCHOR

图层由九宫格进行分割。

RATE

在图层移动时，改变了速率这个字段。在滚动交互中，根据这个动画，滚动的方向与速率值的正负相匹配。

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。

SCALE TYPE

下拉改变了用来缩放图层的方法：通过比例进行缩放或者缩放到指定的尺寸。

LINK X AND Y

这个选项选中后， x 或者 y 中的一个，一起缩放或者分别指定不同的值。

ANCHORS

图层由九宫格进行分割。

SCALE

通过比例或者指定尺寸来进行缩放。

EASING CURVE

这就是你想要为动画使用的缓和曲线。

DURATION

这个就是你定义的动画持续的时长。

持续时间和延迟可以用来模拟链接动画的体验。

DELAY

从动画开始时，设置延时。

旋转

持续不断到终值

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT BEGIN & END

此选项设置后，图层中的交互将会进行触发。必须设置起始点和终点。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

ANCHOR

图层由九宫格进行分割。

TRANSFORM STYLE

这些按钮用来触发你想要的旋转样式。二维旋转是围绕 Z 轴的。三维旋转表明了要使用到额外的 x 和 y 轴。

ROTATE TO

定义了图层将会旋转的角度。

BACKSIDE LAYER

转换风格选中了三维旋转后，就会显示这个选项。图层的下拉列表中有允许将图层旋转到背面的选项。

持续不断的速率

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT

此选项设置后，图层中的交互将会进行触发。在滚动区域内，如果想要移动图层，就会使用到。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

ANCHOR

图层由九宫格进行分割。

TRANSFORM STYLE

这些按钮用来触发你想要的旋转样式。二维旋转是围绕 Z 轴的。三维旋转表明了要使用到额外的 X 和 Y 轴。

RATE

在图层移动时，改变了速率这个字段。在滚动交互中，根据这个动画，滚动的方向与速率值的正负相匹配。

BACKSIDE LAYER

转换风格选中了三维旋转后，就会显示这个选项。图层的下拉列表中有允许将图层旋转到背面的选项。

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。

ANCHOR

图层由九宫格进行分割。

TRANSFORM STYLE

这些按钮用来触发你想要的旋转样式。二维旋转是围绕 Z 轴的。三维旋转表明了要使用到额外的 X 和 Y 轴。

ROTATE TO

定义了图层将会旋转的角度。

EASING CURVE

这就是你想要为动画使用的缓和曲线。

DURATION

这个就是你定义的动画持续的时长。

持续时间和延迟可以用来模拟链接动画的体验。

DELAY

从动画开始时，设置延时。

BACKSIDE LAYER

转换风格选中了三维旋转后，就会显示这个选项。图层的下拉列表中有允许将图层旋转到背面的选项。

淡入

持续不断到终值

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT BEGIN & END

此选项设置后，图层中的交互将会进行触发。必须设置起始点和终点。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

FADE TO

这个值是用来设置图层的透明度的。输入的是百分比。

持续不断的速率

适用于拖拽，滚动，旋转和捏拉等交互

LIMIT

此选项设置后，图层中的交互将会进行触发。在滚动区域内，如果想要移动图层，就会使用到。

此动画是根据拖拽而设计的，可以指定图层的某条边作为参考，在滚动时，可以选择滚动的方向：水平和垂直。

RATE

在图层移动时，改变了速率这个字段。在滚动交互中，根据这个动画，滚动的方向与速率值的正负相匹配。

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。

FADE TO

这个值是用来设置图层的透明度的。输入的是百分比。

EASING CURVE

这就是你想要为动画使用的缓和曲线。

DURATION

这个就是你定义的动画持续的时长。

持续时间和延迟可以用来模拟链接动画的体验。

DELAY

从动画开始时，设置延时。

颜色

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。

CHANGE COLOR TO

设置图层需要改变的 RGB 颜色值。

DURATION

持续时间是即时的，就是说没有从颜色到颜色的过渡。

图片

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。更多信息请查看 Conditions。

SELECT ASSET

用来选中要设置给图层的图片资源。这个图片资源必须已经上传到您的账号中。

DURATION

持续时间是即时的，就是说没有从图片到图片的过渡。

再排序

执行到终值的时间

适用于所有的交互

CONDITION

动画会对其进行检查来决定采取什么 action。

ORDERING

下拉列表中有图层重新排序的方向。

选项 ：

Bring to front, Send to back, Place before, Place behind

DELAY

从动画开始时，设置延时。