你可以从登录项目开始。下载地址https://github.com/chenruiming/OrangeLogin
下载并运行项目,看到熟悉的登录屏幕:
你的任务是删除现有的视图动画,并用基于层的动画逐个替换它们。
打开ViewController.swift,找到viewWillAppear().
删除这行
heading.center.x -= view.bounds.width
不再需要执行此操作,因为可以在层动画中指定开始和结束值。
接下来,向下滚动到viewDidAppear(),并删除如下所示移动标题的动画调用:
UIView.animate(withDuration: 0.5) {
self.heading.center.x += self.view.bounds.width
}
构建并运行项目;观看动画屏幕并检查表单标题不再是动画。
现在你已经删除了旧的视图动画代码,现在是添加一些图层动画的时候了!找到viewWillAppear(),并在方法的顶部添加以下代码,在对super的调用下面:
let flyRight = CABasicAnimation(keyPath: "position.x")
flyRight.fromValue = -view.bounds.size.width/2
flyRight.toValue = view.bounds.size.width/2
flyRight.duration = 0.5
核心动画中的动画对象是简单的数据模型;创建模型的实例并相应地设置其数据属性。
CABasicAnimation的一个实例描述了一个潜在的层动画:你可以选择现在运行,稍后运行,或者根本不运行。
由于动画没有绑定到特定的层,你可以在其他层上重用动画,每个层将独立运行动画。
在动画模型中,你可以将要动画的属性作为为keypath参数;这很方便。
这里,你只将位置的x分量动画。Core Animation方便地公开了位置、边界和转换的各个成员,这样你就可以分别对它们进行动画处理。
接下来,为你在keypath上指定的属性设置fromValue和toValue。在这种情况下,你希望它从屏幕的左边开始,然后在屏幕的中心结束。
最后,动画持续时间的概念没有改变;这里你将持续时间设置为0.5秒。
现在你的动画都设置好了,你可以把它添加到你的应用中的一个图层,看看它是什么样子的。在刚刚添加的代码下面添加以下一行,将动画添加到标题层:
heading.layer.add(flyRight, forKey: nil)
add(_:forKey:)复制了动画对象,并告诉Core animation在层上运行它。key参数是一个标识;如果需要更改或停止动画,之后你可以通过标识找到动画。
构建并运行你的项目;你会看到表单标题移动到屏幕中心,正如预期的那样,图层及其包含的视图平滑地进入位置。
注意:像CGRect或CATransform3D这样的动画结构并不像上面提到的对象值那样简单。