How to Create a Uiview Bounce Animation

How to create a UIView bounce animation?

With iOS7 and UIKit Dynamics, there is no longer any need to use CAKeyframeAnimations or UIView animations!

Take a look at Apple's UIKit Dynamics Catalog app. Alternately, Teehanlax has a clear, concise tutorial with the full project in github. If you want a more detailed tutorial about the ins-and-outs of dynamics, the Ray Winderlich tutorial is great. As always, the Apple docs are a great first stop, so check out the UIDynamicAnimator Class reference in the docs.

Here's a bit of the code from the Teenhanlax tutorial:

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior *gravityBehavior = 
                [[UIGravityBehavior alloc] initWithItems:@[self.redSquare]];
[self.animator addBehavior:gravityBehavior];
    
UICollisionBehavior *collisionBehavior = 
                [[UICollisionBehavior alloc] initWithItems:@[self.redSquare]]; 
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collisionBehavior];
    
UIDynamicItemBehavior *elasticityBehavior = 
                [[UIDynamicItemBehavior alloc] initWithItems:@[self.redSquare]];
elasticityBehavior.elasticity = 0.7f;
[self.animator addBehavior:elasticityBehavior];

And here are the results

UIKit Dynamics is a really powerful and easy to use addition to iOS7 and you can get some great looking UI from it.

Other examples:

The steps to implement UIKit dynamics is always the same:

1. Create a UIDynamicAnimator and store it in a strong property
2. Create one or more UIDynamicBehaviors. Each behavior should have one or more items, typically a view to animate.
3. Make sure that the initial state of the items used in the UIDynamicBehaviors is a valid state within the UIDynamicAnimator simulation.

How to create a bounce animation in Swift

// Force unwraps are generally bleh
let logos = [UIImage(named: "img1")!, UIImage(named: "img2")!, UIImage(named: "img3")!]

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 1, delay: 0,
                   options: [.curveEaseInOut, .autoreverse, .repeat],
                   animations: {
                    self.logo.center.y += 50
                    self.view.layoutIfNeeded()
    })

    logoTransition()
}

private func logoTransition() {
    UIView.transition(with: logo, duration: 1, options: .transitionCrossDissolve, animations: {
        let index = self.logos.firstIndex(of: self.logo.image!) ?? 0
        self.logo.image = self.getNextLogoImage(for: index)
        self.view.layoutIfNeeded()
    }) { _ in
        DispatchQueue.main.asyncAfter(deadline: .now() + 3, execute: {
            self.logoTransition()
        })
    }
}

private func getNextLogoImage(for index: Int) -> UIImage {
    // Check if last index then go to beginning
    guard index != logos.count - 1 else {
        return logos[0]
    }

    return logos[index+1]
}

Where view is direct parentView of your logo image. I did not get "Change" part.

options: [.autoreverse, .repeat] are creating loop for bounce animation. As for changing logos - I was not really sure what do you mean, but to change image of ImageView different type of animation is needed - transition one. We have to loop that one manually by using recurrency in the competition block.

As for "want it to happen as soon as the app has loaded" - you need to place that code in viewDidAppear block.

Bouncing animation while changing view frame

You need to try this

int duration, damping, velocity;
[UIView animateWithDuration:duration delay:0 
    usingSpringWithDamping:damping initialSpringVelocity:velocity 
    options:0 animations:^{
    // your animation code here

} completion:nil];

Play with the damping and velocity values to know more about this feature in the animation code.
here is the link for a tutorial

Showing UIView with bouncy animation

You can try this :

// Hide your view by setting its position to outside of the bounds of the screen

// Whenever you want, call this :
[UIView animateWithDuration:0.5
                      delay:0
     usingSpringWithDamping:0.5
      initialSpringVelocity:0
                    options:UIViewAnimationOptionCurveLinear
                 animations:^{

                     // Set your final view position here

                 }
                 completion:^(BOOL finished) {


                 }];

This method is the same as the usual animateWithDuration: but it introduces a spring animation.

---

Related Topics