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

Question

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

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

您如何看待我的代码以及对您来说兼顾性能和稳定性的最佳解决方案。

我想指出这个动画的目的是创建一个动画启动画面。还有其他元素 (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)
}

Answer 1

您可以使用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 了解更多信息。希望它有所帮助。 :)

Answer 2

您也可以将其与 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

Answer 3

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

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)

这里的关键是动画正在动画化原始身份。希望这有帮助

Answer 4

旋转和平移，使其像tableview中的视差效果header:

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
    }
}

注意：确保应用转换的视图是 header 视图的子视图，而不是 header 视图本身。在上面的例子中，customImageView 是 main headerview.

的子视图

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

Combine translation, alpha and scale animations in swift3

iphone

animation

cgaffinetransform

ios

swift3