6

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
  • The transform cannot be two different transforms. You are merely replacing one with another. You surely meant to combine them.
    – matt
    Commented Mar 10, 2017 at 3:51

4 Answers 4

16

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

5
  • Thanks, i just see the scale effect, nothing on translation and opacity ! What i'm doing wrong!?
    – GilbertOOl
    Commented Mar 10, 2017 at 4:37
  • I really don't know. You don't have the view hidden in storyboard or code do you?
    – agibson007
    Commented Mar 10, 2017 at 4:39
  • Do you have the opacity and alpha both at 0. They are different?
    – agibson007
    Commented Mar 10, 2017 at 4:40
  • alpha is declared in viewWillAppear like this : logoImg.alpha = 0
    – GilbertOOl
    Commented Mar 10, 2017 at 4:44
  • Oh good way ! The scale and translations work fine but alpha not work! Yet I put the simulator into slow animations.
    – GilbertOOl
    Commented Mar 10, 2017 at 4:56
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. :)

1
  • Thanks @luan-tran , but i don't see différence ! The scaleX work fine but nothing on translation or alpha.
    – GilbertOOl
    Commented Mar 10, 2017 at 4:11
2

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.