无需编码实现UI动效:XCode+Canvas

还记得我写的那篇《给设计师写的XCode 5指南》吗？最近，我发现在设计师圈子里，大家会经常讨论一个话题：那就是动效。

邂逅Canvas

Canvas是一个非常简单的Xcode库，非常强力，同时也非常的轻量化，我们的目标是提升十倍的iOS开发效率，通过使用库和插件，解决最常规的布局需求。这样设计师就可以更专注于细节的打磨。目前支持动效、默认字体设置，以后会加入背景模糊，对话框，富文本的支持。

下面，我们专门构建了一款iOS7应用，用来向您展示Canvas的威力，而且，Canvas是免费的、开源的。



使用Xcode的Storyboard

上周，我们的iOS工程师向我们展示了如何利用Storyboard的“用户定义运行时间”属性来创建功能。这基本上意味着，无需编码，也可实现功能只需要一个简单的动效库，在***时，只需要调整动效参数，例如“持续时间”和“延迟”。有点像是前端开发中的Animate.css，只不过，我们这个库主要针对iOS开发。



Canvas的渐隐动效设置

安装CocoaPods

CocoaPods是专门用来进行iOS库管理的工具。



如果还没有安装CocoaPods,先运行这个命令，更多介绍，请查看：http://www.cocoapods.org/



终端执行XCode项目，然后创建一个Podfile



输入两行即可，指定想要安装的库。



完成后，进行pod Install 确保打开.xcworkspace

以后Xcode项目便会参考Pod中的文件。

嵌入视图

选择任意元素，嵌入到视图中，这样便能调用动效。



选择CSAnimationView后，设置延迟、持续、种类。



使用代码

什么？还需要编码吗？但如果你想要更优秀的效果，那就不得不编码。

每个屏幕界面都会连接到ViewController.h/.m.



这跟CSS、JS还是有点不一样的。



创建IBOutlet视图和IBAction。



在列表视图中调用的IBOutlet在Storyboard中可以随意设置属性。



在ViewController.m中,导入CSAnimationView.h，startCanvasAnimation



最后结果还不坏，是吧？

Canvas功能组件

我们对于Canvas的未来愿景，不只是实现UI动效，我们希望Canvas能成为设计师专用的编码开发工具，只需要一点点的编码知识，就能轻松的实现效果，因此，Canvas还有以下功能。

自定义字体



每个项目都附带有信息。这里能够自定义应用的默认属性。在这个案例中，我们打算将默认字体修改为拖进去的字体。



简单的即可修改字体属性



Storyboard中的Runtime属性，字体名设置为字体的PostScript名。



在Font Book中，可以找到字体对应的PostScript名。



非常漂亮的默认字体

模糊效果





模糊效果虽然好看，但是不太容易实现，不过我们这个库中涵盖了实现方法。



包含了CSBlurView分类，设置barStyle属性，数值改为1,1为黑色透明，0为白色透明，确保所设置的对象处于视图中。

下载上面的Demo (1.1版本)Ripple-demo 1.1

下载地址：http://cl.ly/1F2d2u172V15，结合教程看看，相信效果更佳

我们的下一步计划

我们计划为Canvas库中加入更多的动效，例如，换入换出、进入退出，位移等等。

功能上，计划加入标头固定、滚动等效果。