principle for mac实践：3分钟搞定一个闪屏页动效

进入软件界面后可以先选择当前要展示界面的尺寸。选中左下大纲中Artboard后，选择size presets。这里我就选择4寸的iphone。

添加一个rectangle。rectangle就像UIView一样，用来展示。有两种常见方式添加。一种是左上角的按钮

也可以从菜单中insert中选择，快捷键是R。

Text表示文本。Artboard如果用过sketch的同学会很熟悉。就是一个新的页面。

接着我们把这个rectangle拉伸到填满整个屏幕。也可以在左边的面板里直接设置坐标值。然后我们从文件夹中直接拖动一张图片到image属性中。将这个rectangle命名为launchImage。

接着我们插入一个文字，选择左上的T（Text）。Fill属性可以设置文字的颜色。Size可以设置文字的大小。

接着我们创建一个全黑的遮罩层。创建一个rectangle，fill选择成黑色，尺寸设置成屏幕的尺寸。注意调整这几个层的顺序。将launchImage垫在最底层。

接着选中Artboard1 cmd+c 复制，cmd+v粘贴一份。这样就有了两个Artboard。

关键的一个动作来了。我们为mask为添加tap手势来触发动画。注意选中mask作为的触发对象。

激动人心的一步来了。接着在Artboard2中设置mask的透明度为0。

principle会自动将两个页面中变化的属性加上动画（两个页面中的元素名字一样）。动画时间默认为300ms。这个时候可以在右边模拟器中查看效果了。

可以选中tap手势，打开animate设置时间轴。

把时间调整为1秒钟。

除了可以在软件中的模拟器查看效果，也可以在iPhone上装上principle的应用。实时输出到手机中查看。性能非常好。

接着再增加一个闪屏图片变大消失的过程。这次添加触发事件是auto。在第三个页面中设置launchImage的scale属性为1.1，透明度为0。

可以设置每个动画的option，这几个参数用过core animation的同学应该很熟悉了。

在软件的模拟中可以方便的录制视频，导出成mov或者gif。

放上源文件：

http://pan.baidu.com/s/1jGyELcM

总结

principle特别适合几个简单元素的变换效果。几分钟就能完成。同步到手机查看也非常方便。

短板就是能做动画的属性有限，就是位移、透明度、旋转。没有3D翻转，阴影这类高级的属性。动画过程中也没法加逻辑进去。这点上origami就显得很强大。

不过尺有所长寸有所短。我觉得很多小的细节的动效用principle做原型是很适合的。

这个例子里没有介绍Drivers特性，这也是pricinple做动效的一个重要功能。这里没有用到就不介绍了。

tips：这个软件网上有流传0.75的破解版，有些同学实在是掏不出钱可以自行搜索