使用UIMotionEffect创建视差效果

我敢肯定,您之前在设备主屏幕以及其他应用程序(如消息,天气和Facebook Paper)上已经看到了这种酷炫的效果。 iOS使用视差效果在主屏幕和设备其他区域上产生深度感。

在本教程中,我们将讨论运动效果,这是一种将设备的真实属性映射到应用程序界面并在设备水平和垂直倾斜时影响界面外观的简便方法。

什么是UIMotionEffect?

UIMotionEffect是iOS 7中引入的抽象类,用于向用户界面添加逼真感。 将UIMotionEffect视为类似于CAAnimation的类,它们都分别为连接到它们的Views和Layers设置动画。 除了CAAnimation是时间的函数而UIMotionEffect是设备的运动的函数之外。

UIInterpolatingMotionEffect是负责将这些效果添加到视图中的类。 创建此类的新实例后,必须将适当的值分配给minimumRelativeValuemaximumRelativeValue属性。 当用户移动设备时,运动效果开始将系统返回的固定偏移值转换为指定的值范围。

建立您的Xcode专案

让我们开始使用Xcode创建一个新项目,然后选择Single View Application作为模板,并将其命名为Parallax Effect 。 我们将在这个项目中使用Swift作为编程语言,因此在创建项目时不要忘记选择它。

完成后,在Project Navigator中选择Main.storyboard ,然后将Image View对象从Object Library拖到View Controller。 下载此图像并将其图像更改为该图像 (或所需的任何图像)。 然后将其放在主视图的中心。 不要忘记将图像视图的“ 内容模式 ”设置为“ 居中

使用Xcode 7.3,您必须为视图配置自动布局约束,以支持所有类型的iOS设备。 在最新版本的Xcode中,“自动布局”功能非常强大。 对于简单的约束,您只需单击“自动布局”菜单的“问题”选项,然后选择“添加缺少的约束” ,Xcode将自动为视图配置布局约束。

实现UIInterpolatingMotionEffect

现在,您已在情节提要板上创建了图像视图,是时候创建视差效果了。 打开ViewController.swift文件,并将以下代码添加到viewDidLoad

具有UIMotionEffect的视差效果

我见过许多开发人员使用keyPaths center.xcenter.y实现此效果,我认为这不是通过在框外拉伸图像视图以告知视图控制器图像更大来解决此问题的正确方法。比显示的要多。

使用3D变换将是创建深度感知的正确方法,而无需那些黑客来实现我们的目标。 仅对垂直轴和水平轴使用关键路径layer.transform.translation.xlayer.transform.translation.y

创建完UIInterpolatingMotionEffect实例之后 ,正如我在本教程开始时所说的 ,我将为“垂直轴”和“水平轴”指定一个最小值和最大值。 最后,将运动效果添加到图像。

UIMotionEffectGroup类管理您希望同时应用的动作效果的集合,而不是单独添加它们。

而已! 现在,您可以在真实设备上运行该应用程序,而不能在模拟器上运行该应用程序,以运行一些测试并检查最终结果。

摘要

阅读完本教程后,希望您现在了解如何在Xcode 7中使用UIMotionEffect。此功能将使您能够以更有效的方式为应用程序创建精美的动画。

作为参考,您可以从此处下载完整的Xcode项目 。 与往常一样,给我评论,分享您对本教程的看法,不要忘记关注我以获取更多教程。