Springy animation on scaling up UIImageView

Question

I have a UIImageView with a circular png inside. I am trying to initialise it with 0 x 0 and scale it up with an ease, so it looks like a bubble effect.

In viewDidLaod(), I initialsied it with CGSize however I couldn't figure out how to apply animation so it doesn't just scales up with a same speed, but it looks like springy (I mean, if it will come to 100 x 100, it works like 'boing' effect and it passes 100 x 100 too, but when animation settles, it finishes at 100x100) .

logoCircularBg.frame.size = CGSize(width: 0, height: 0)
logoCircularBg.hidden = false

Something like this but starting from 0x0 and stopping at 100x100, and with UIImageView.

Try this - http://stackoverflow.com/a/23514653/385017 – Craig Siemens Dec 02 '16 at 17:30 — Craig Siemens, Dec 02 '16 at 17:30
The page you were looking for does not exist. :/ – senty Dec 02 '16 at 17:31 — senty, Dec 02 '16 at 17:31

score 4 · Answer 1 · answered Aug 29 '19 at 08:24

Here is a code example that I used for animating a UIImageView with a springy/bounce animation like that one that you have posted. Before starting the animation I scale down the imageView to 1% of its size. The animation then scales the imageView back to 100%.

     self.myImageView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
     UIView.animate(
        withDuration: 1.2,
        delay: 0.0,
        usingSpringWithDamping: 0.2,
        initialSpringVelocity: 0.2,
        options: .curveEaseOut,
        animations: {
            self.myImageView.transform = CGAffineTransform(scaleX: 1, y: 1)
        },
        completion: nil)

score 3 · Accepted Answer · answered Dec 02 '16 at 17:30

3

For a "springy" animation, call UIView's animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:). A lower damping value will give increased oscillation at the end of the animation, just as in your screencast.

(When you form this animation, I would suggest animating the view's scale transform, not its frame.)

answered Dec 02 '16 at 17:30

matt

515,959
87
875
1,141

1

I'd be so so happy if you can give some code snippet on what you mean with scale transform. I am a bit confused. Because I can't use: `logoCircularBg.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)` – senty Dec 02 '16 at 17:34
Why can't you use it? – matt Dec 02 '16 at 17:36
'Cannot invoke initializer for type 'CGAffineTransform' with an argument list of type '(scaleX: Double, y: Double)'' – senty Dec 02 '16 at 17:38
Then maybe you're not using Swift 3, eh? – matt Dec 02 '16 at 17:39
I made it work. I tried using `animateWithDuration(1.5, delay: 1.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.3...` and `CGAffineTransformMakeScale(1, 1)` however I couldn't get close to that. It's either getting so slow or so fast. And it's not acting like boing, it's bounces once and gets 100x100 instantly. What am I doing wrong? – senty Dec 02 '16 at 17:52

Springy animation on scaling up UIImageView

2 Answers2