CODEWITHSUNDEEP
iosswiftxcodeanimation
Kárpáti András
Kárpáti András

Reputation: 1239

Adding animation to view

I would like to add an animation to my tableView when it's empty.

I have two separate images:

1) A line,
2) A tumbleweed

enter image description here

I thought it would be awesome to animate it this way:

For 10-15 seconds, only line appears then tumbleweed appears from right side and it rolls to left side in a few seconds.

I made a gif and downloaded a framework that allows gifs to be displayed in UIImageView.

It worked, but was really low-quality, not as smooth as everything else.

So I am thinking, is it possible that I animate that in swift itself?

Or What do you suggest? any suggestion will be helpful.

Thanks

Upvotes: 1

Views: 69

Answers (1)

Sharad Chauhan
Sharad Chauhan

Reputation: 4891

For this kind of animation you can use this approach too :

  1. Rotate UIImageView
  2. Translate x position of UIImageView

Here is an extension to rotate UIImageView ( You can change class from UIImageView to UIView ): 

extension UIImageView {
    func rotateImage360Degrees(duration: CFTimeInterval = 2) {
        let rotateAnimation                   = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.fromValue             = 0.0
        rotateAnimation.toValue               = CGFloat(Double.pi * 2)
        rotateAnimation.isRemovedOnCompletion = false
        rotateAnimation.duration              = duration
        rotateAnimation.repeatCount           = Float.infinity
        self.layer.add(rotateAnimation, forKey: nil)
    }

    func rotateImage360DegreesInReverse(duration: CFTimeInterval = 2) {
        let rotateAnimation                   = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.fromValue             = CGFloat(Double.pi * 2)
        rotateAnimation.toValue               = 0.0
        rotateAnimation.isRemovedOnCompletion = false
        rotateAnimation.duration              = duration
        rotateAnimation.repeatCount           = Float.infinity
        self.layer.add(rotateAnimation, forKey: nil)
    }
}

And Translation animation in UIView.animate block :

func animateImageView(){
    UIView.animate(withDuration: 3.0, delay: 0.0, options: ([.curveLinear]), animations: {() -> Void in
        self.yourImageView.transform = CGAffineTransform.init(translationX: self.view.bounds.size.width, y: self.yourImageView.bounds.origin.y)
    }, completion:  { _ in
        self.yourImageView.transform = .identity
        self.animateImageView() // For continuous animation
    })
}

Upvotes: 2

Related Questions