iosiphoneanimationswift3cgaffinetransform

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

Solution

  • 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