Combine translation, alpha and scale animations in swift3

问题

I'm totally newbies with iOS Swift developement and i try to combine three parameters in a single animations but i don't succeed.

I think the solution is here -Apple Dev Core Animation Programming Guide by grouping the animations but being a beginner and after a lot of Internet research i can't find what i'm looking for.

What do you think of my code and what is for you the best solution to combine performance and stability.

I want to point out that the purpose of this animation is to create an animated Splashscreen. There are other elements (UIImage) that will be to animates.

Here is my code:

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

回答1:

Based on what I am seeing you are wanting to preset the animation and translate it back. In that case I would do this.

    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)

I think you may not be seeing all the animation so try to start the scale at 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)

The key here is that the animation is animating back the original identity. Hope this helps

回答2:

You can use concatenating method to combining two existing affine transforms.

 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)

Look at Apple Document for more info. Hope it help. :)

回答3:

You can use this also with swift 3.0.1:

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

Reference: https://gist.github.com/licvido/bc22343cacfa3a8ccf88

回答4:

Rotate and Translate and make it like parallax effect in 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
    }
}

NOTE : Make sure the View you apply transform to is SUBVIEW of the header view, not header view itself. In above example customImageView is subview of main headerview.

来源：https://stackoverflow.com/questions/42709719/combine-translation-alpha-and-scale-animations-in-swift3