Adding animations to banner ads can provide a nice touch to how the ad transitions onto the screen. This blog post will show you how to animate an AdMob banner on iOS.

We will specifically focus on block-based animation methods which were introduced in iOS 4. If you’re using an older version of iOS, you can achieve the same effect using the beginAnimations:context: and commitAnimations: class methods in UIView.


Sliding a banner up onto the screen

The key to animating banners is changing one of the animatable properties in UIView across a certain period of time. iOS will then choose how to animate the AdMob banner across this specified time using its internal logic along with any options that have been specified. Let’s look at how to animate a banner to slide up onto the application’s screen.

First, the AdMob banner is initialized with a frame outside of the bounds of the screen (specifically underneath the bottom of the screen). Once the ad is received, it can be animated upwards through its height. Since the banner is sliding up and onto the screen, only the y-coordinate will change during animation. The code for initializing the banner is shown below.

// Initialize the banner off of the screen
self.adBanner = [[[GADBannerView alloc]    
  initWithFrame:CGRectMake(0.0, 
                           self.view.frame.size.height,    
                           GAD_SIZE_320x50.width,
                           GAD_SIZE_320x50.height)] autorelease];

The next step is to implement adViewDidReceiveAd: to set the final frame for the AdMob banner and tell iOS to animate across the two values using the animateWithDuration:animations: method. 

- (void)adViewDidReceiveAd:(GADBannerView *)adView {

  [UIView animateWithDuration:1.0 animations:^ {
    // Final frame of ad should be docked to bottom of screen
    adView.frame = CGRectMake(0.0,
                              self.view.frame.size.height -
                              adView.frame.size.height,
                              adView.frame.size.width,
                              adView.frame.size.height);
  
  }];
}

It’s as easy as that! Now, instead of instantly appearing on the screen, the banner ad gracefully slides up in the application using animation.



Customized animations

You can experiment with other animatable properties of UIView as well. For example, try sliding the banner onto the screen from left to right by changing the initial frame to the left of the screen instead of beneath it. If you want to get even more creative, try experimenting with the Core Animation classes. These classes give you powerful animation functionality and allow you to customize keyframe and timing functions.

Pro tip: Be thoughtful about where and how you’re going to use animations. It’s easy to go overboard.

If you have any questions about animations on iOS or about the AdMob SDK in general, feel free to post them in our forum. Have fun animating!


 - , AdMob Team