CODEWITHSUNDEEP
iosswiftanimationuiviewanimation
Bucky Ak
Bucky Ak

Reputation: 37

How to add in swift spring animation to an image?

I have already made the lay-out for the image. So I don't have any CGPoint x and y values. Storyboard picture As you can see on the picture, I made 5 circles and one main circle. I want to make these 5 circles come from behind the main circle as the user open the app. I did a lot of research and I found that I can use the spring animation method because it seems more realistic with physics and so on. However, it just didn't work out.

First I change the center of the circle1 and send it to the backside of the main circle (which didn't work) Because of the failure the circle doesn't come up from the behind.

I am not sure why I couldn't change the position of the circle. Is it because I already made the lay-out?

Here is my code: 

@IBOutlet weak var mainCircle: UIButton!
@IBOutlet weak var circle1: UIImageView!



override func viewDidAppear(animated: Bool) {

self.circle1.center = self.mainCircle.center

    UIView.animateWithDuration(0.5, delay: 0.5, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.0, options: [] , animations: {
        self.circle1.center = CGPointMake(160, 219)
        }, completion: nil)
}

Please help me with this. Thank you so much.

Upvotes: 2

Views: 5137

Answers (3)

Paul Subhajit
Paul Subhajit

Reputation: 152

    let identityAnimation = CGAffineTransform.identity
    let scaleOfIdentity = identityAnimation.scaledBy(x: 0.001, y: 0.001)
    slideActionComponentCollectionView.transform = scaleOfIdentity
    self.addSubview(slideActionComponentCollectionView)
    UIView.animate(withDuration: 0.3/1.5, animations: {
        let scaleOfIdentity = identityAnimation.scaledBy(x: 1.1, y: 1.1)
        self.slideActionComponentCollectionView.transform = scaleOfIdentity
    }, completion: {finished in
        UIView.animate(withDuration: 0.3/2, animations: {
            let scaleOfIdentity = identityAnimation.scaledBy(x: 0.9, y: 0.9)
            self.slideActionComponentCollectionView.transform = scaleOfIdentity
        }, completion: {finished in
            UIView.animate(withDuration: 0.3/2, animations: {
                self.slideActionComponentCollectionView.transform = identityAnimation
            })
        })
    })

Upvotes: 0

brimstone
brimstone

Reputation: 3400

Set options parameter to [], this will set options to nothing in your spring animation.

For your animations, put this line:

self.circle1.center = self.mainCircle.center

Inside of viewDidLoad() method.

Then, in your spring animation, change the code so the position is calculated using relative position to the mainCirle, not fixed values. Like so:

self.circle1.center = CGPointMake(self.mainCircle.center.x-75, self.mainCircle.center.x-75)

You can change this point to be in whatever direction you want your circle to be in from the main circle.

Complete code:

override func viewDidLoad() {
    super.viewDidLoad()
    self.circle1.center = self.mainCircle.center
}

override func viewDidAppear(animated: Bool) {
    UIView.animateWithDuration(0.5, delay: 0.5, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.0, options: [] , animations: {
        self.circle1.center = CGPointMake(self.mainCircle.center.x-75, self.mainCircle.center.x-75)
    }, completion: nil)
}

Upvotes: 1

Ben Sullivan
Ben Sullivan

Reputation: 2154

There's a really useful library to simplify Spring animations that's worth looking into. You can download it below:

https://github.com/MengTo/Spring

I have lots of animations in my apps and this makes it really easy. You'd probably want to set all the circles to the centre then change their x,y and use animateTo().

Upvotes: 0

Related Questions