Swift 从行中查看动画

Question

Swift 从行中查看动画

Swift4.2，Xcode10.0

我想执行一个动画，其中的视图在其中构建成一条线。

构建异常：

构建成行：

在这一点上，我唯一的解决方案是在线的另一侧放置另一个视图以在它开始动画之前覆盖视图。但这是一个糟糕的解决方案，有时会阻塞其他视图。此外，我想避免拉伸我的内容，因为我希望能够使用图像执行此动画。整合它的最佳方式是什么。预先感谢您的帮助！

Answer 1

使用一个视图，然后在该视图中放入线条以使其看起来真实。

然后当你完成后让整个动画消失，或者如果你想让其他动画覆盖它，你可以调用函数将视图移动到其他视图之上

Answer 2

这是实现此目的的一种方法：

使用 2 个容器 UIView 和 2 个线视图（您可以再次使用 UIView）和 2 个 UIImageView（或任何绿色视图）。所以你的 StoryBoard 应该是这样的：

确保您的容器视图是 clips to bound（您只能从情节提要中设置）。现在你可以通过 CGAffineTransform.

轻松实现动画

我将动画视图的插座名称称为 imageViewOne 和 imageViewTwo。

在viewDidLoad()中写下这个（如果最初视图是隐藏的）：

imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)

然后用动画展示：

//To build out of line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = .identity
    self.imageViewTwo.transform = .identity
}, completion: nil)

//To build into line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
    self.imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)
}, completion: nil)

Answer 3

所以你想要这个：

子视图可以超出其父视图的范围。发生这种情况时，如果父视图的 clipsToBounds 属性是 false，则子视图在父视图之外的部分是可见的，如果父视图的 clipsToBounds 是 [=14]，则子视图的部分是隐藏的=].

我使用此剪裁隐藏了线下方的绿色视图部分。也许这些动画中途的侧视图有助于解释我是如何设置的：

超级视图（标记为“hider”）已在这里缩小到绿色视图高度的一半。启用裁剪后，一半的绿色视图被隐藏。禁用剪裁后，绿色视图的底部在线下方可见。

以下是我设置演示的方式：

我把绿色视图放到了一个新的父视图中。我将这个新的超级视图称为“hider”。
我在隐藏器的属性检查器中打开了“剪辑到边界”复选框。
我在绿色视图上设置了宽度和高度限制。您可以使用其他约束（如 leading/trailing）来控制其大小。
我将绿色视图的前导、尾随和顶部边缘约束为与隐藏器的相应边缘相等。
我将隐藏器的高度限制为等于绿色视图的高度加 12。12 将在绿色视图和线条之间形成白色边距。我将此约束的优先级设置为 999。这意味着自动布局将非常努力地尝试满足约束，但如果需要会打破此约束以满足所有必需的约束。
我创建了一个约束，将隐藏器的高度设置为零。我将此约束连接到我的视图控制器中名为 hiderHeightConstraint 的出口。请注意，这意味着隐藏器的高度有两个限制。这个强制隐藏者的高度为零并且是必需的。另一个（在前面的步骤中创建）将隐藏器的高度设置为绿色视图的高度加上填充，但不是必需的。当您在故事板中编辑布局时，您可能希望通过在约束的属性检查器中关闭其“已安装”复选框来关闭此约束。

我将“切换秘密消息”按钮连接到此操作：

@IBAction private func toggleButtonWasTapped() {
    UIView.animate(withDuration: 0.7) {
        self.hiderHeightConstraint.isActive.toggle()
        self.view.layoutIfNeeded()
    }
}

这是它的工作原理。当 hiderHeightConstraint 处于活动状态时，隐藏器被强制为零高度。因为它剪辑了它的子视图，所以绿色视图是不可见的。由于不需要隐藏者高度和绿色视图高度之间的约束，因此绿色视图仍然可以是其自然大小。其他约束条件 (leading/trailing/top) 强制绿色视图超出隐藏器的底部边缘。

当 hiderHeightConstraint 未激活时，隐藏器会增长到绿色视图加上填充的高度，从而使绿色视图完全可见。

这是我的故事板的样子：

Swift 从行中查看动画

Swift View Animation from Line

animation

view

uiview

cabasicanimation

swift

Swift 从行中查看动画

Swift4.2，Xcode10.0

构建异常：

构建成行：