在 swift3 中结合平移、alpha 和缩放动画答案

【问题标题】：Combine translation, alpha and scale animations in swift3在 swift3 中结合平移、alpha 和缩放动画
【发布时间】：2017-03-10 03:34:00
【问题描述】：

我是 iOS Swift 开发的新手，我尝试在一个动画中组合三个参数，但我没有成功。

我认为解决方案在这里 -Apple Dev Core Animation Programming Guide 通过对动画进行分组，但作为初学者，经过大量互联网研究后，我找不到我想要的东西。

您如何看待我的代码，以及对您而言，结合性能和稳定性的最佳解决方案是什么。

我想指出，这个动画的目的是创建一个动画的 Splashscreen。还有其他元素（UIImage）将用于动画。

这是我的代码：

    override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    logoImg.alpha = 0
    logoImg.transform = CGAffineTransform(translationX: 0, y: -200)
    logoImg.transform = CGAffineTransform(scaleX: 0, y: 0)

}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 10, options: [.curveEaseOut], animations: {

        self.logoImg.transform = CGAffineTransform(translationX: 0, y: 0)
        self.logoImg.transform = CGAffineTransform(scaleX: 1, y: 1)
        self.logoImg.alpha = 1

    }, completion: nil)
}

【问题讨论】：

变换不能是两个不同的变换。你只是用另一个替换一个。你肯定是想把它们结合起来。

标签： ios iphone animation swift3 cgaffinetransform

【解决方案1】：

根据我所看到的，您想要预设动画并将其翻译回来。在那种情况下，我会这样做。

self.logoImg.transform = CGAffineTransform(translationX: 0, y: -200).concatenating(CGAffineTransform(scaleX: 0, y: 0))
self.logoImg.alpha = 0

UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 10, options: [.curveEaseOut], animations: {
    self.logoImg.transform = .identity
    self.logoImg.alpha = 1
}, completion: nil)

我认为您可能没有看到所有动画，因此请尝试从 0.5 开始缩放

self.logoImg.transform = CGAffineTransform(translationX: 0, y: -200).concatenating(CGAffineTransform(scaleX: 0.5, y: 0.5))
self.logoImg.alpha = 0

UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1, options: [.curveEaseOut], animations: {
    self.logoImg.transform = .identity
    self.logoImg.alpha = 1
}, completion: nil)

这里的关键是动画正在动画回原来的身份。希望这会有所帮助

【讨论】：

谢谢，我只看到了缩放效果，没有翻译和不透明度！我做错了什么！？
我真的不知道。您没有隐藏在情节提要或代码中的视图吗？
不透明度和 alpha 值都为 0。它们不同吗？
alpha 在 viewWillAppear 中声明如下：logoImg.alpha = 0
哦，好方法！比例和翻译工作正常，但 alpha 不起作用！然而我把模拟器放到了慢动画中。

【解决方案2】：

您可以使用concatenating 方法来组合两个现有的仿射变换。

 UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 10, options: [.curveEaseOut], animations: {

    let translation = CGAffineTransform(translationX: 0, y: 0)
    let scale = CGAffineTransform(scaleX: 1, y: 1)

    self.logoImg.transform = translation.concatenating(scale)
    self.logoImg.alpha = 1

}, completion: nil)

查看Apple Document 了解更多信息。希望它有所帮助。 :)

【讨论】：

谢谢@luan-tran，但我看不出有什么不同！ scaleX 工作正常，但没有翻译或 alpha。

【解决方案3】：

旋转和平移，使其像 tableview 标题中的视差效果：

func setupTableHeaderView() {
    self.customHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: 200))
    self.customHeaderView?.backgroundColor = .white
    self.customImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: 200))
    self.customImageView?.image = ImageNamed(name: "camera")
    self.customImageView?.contentMode = .center
    self.customHeaderView?.addSubview(self.customImageView!)
    self.tableHeaderView = self.customHeaderView
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    let yPos = scrollView.contentOffset.y
    if yPos < 0 {
        let scaleX = ((yPos * -1) / 200) + 1
        let translateY = yPos / 2
        var commonTransform = CGAffineTransform.identity
        commonTransform = commonTransform.translatedBy(x: 0, y: translateY)
        commonTransform = commonTransform.scaledBy(x: scaleX, y: scaleX)
        self.customImageView?.transform = commonTransform
    }else{
        self.customImageView?.transform = CGAffineTransform.identity
    }
}

注意：确保您应用转换的视图是标题视图的 SUBVIEW，而不是标题视图本身。在上面的例子中，customImageView 是主 headerview 的子视图。

【讨论】：

【解决方案4】：

你也可以在 swift 3.0.1 中使用它：

UIView.transition(with: self.imageView,
          duration:0.5,
          options: .transitionCrossDissolve,
          animations: { self.imageView.image = newImage },
          completion: nil)

参考：https://gist.github.com/licvido/bc22343cacfa3a8ccf88

【讨论】：