美文网首页
层动画-第一个层动画

层动画-第一个层动画

作者: 小橘子成长记 | 来源:发表于2018-08-09 15:55 被阅读14次

    你可以从登录项目开始。下载地址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这样的动画结构并不像上面提到的对象值那样简单。

    相关文章

      网友评论

          本文标题:层动画-第一个层动画

          本文链接:https://www.haomeiwen.com/subject/dqlavftx.html