Animating View Properties

Edit PagePage History

Many UIView properties can be animated, including:

• frame
• center
• backgroundColor
• alpha
• transform
  • rotation
  • scale
  • translation

Basic Animation

In order to animate one or more views, simply create an animation block. The animation block will animate from the current value to the value that's set within the block. You can call multiple views within the block.

// Optionally initialize the property to a desired starting value
self.firstView.alpha = 0
self.secondView.alpha = 1
UIView.animate(withDuration:0.4, animations: {
    // This causes first view to fade in and second view to fade out
    self.firstView.alpha = 1
    self.secondView.alpha = 0
})      

// Optionally initialize the property to a desired starting value
self.firstView.alpha = 0;
self.secondView.alpha = 1;
[UIView animateWithDuration:0.4 animations:^{
    // This causes first view to fade in and second view to fade out
    self.firstView.alpha = 1;
    self.secondView.alpha = 0;
}];  

Animation with Completion Block

If you want to run code after the animation has finished, you can use the animation with completion block method.

UIView.animate(withDuration: 0.3, animations: { 
    // Animate view properties here...
    }) { (Bool) in
        // Code to run after animation has finished...
}

[UIView animateWithDuration:0.4
     animations:^{
       //your animation here
      }
     completion:^(BOOL finished){ 
       NSLog(@"Animation finished"); 
 }];

Animation Options

You can add Animation Options to further customize your animation. To add multiple Animation Options, surround your Animation Options with [ ], like [UIViewAnimationOptions.Autoreverse, UIViewAnimationOptions.Repeat].

UIView.animate(withDuration:0.8, delay: 0.0,  
   // Autoreverse runs the animation backwards and Repeat cycles the animation indefinitely. 
   options: [.autoreverse,.repeat], animations: { () -> Void in
      self.bubbleImageView.transform = CGAffineTransform(translationX: 0, y: 10)
   }, completion: nil)

If you DO NOT want any animation options, you can plug in [] for the options: value.

UIView.animate(withDuration:0.4, delay: 0.0,   
   options: [], 
   animations: { () -> Void in
      self.imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
   }, completion: nil)

Spring Animation

Sometimes you want a little spring action to make your animations seem a little more alive and less stiff. This example applies a subtle spring animation to a slide out tray.

The usingSpringWithDamping parameter can be set with a value between 0 and 1. A setting closer to 1 decreases the amount of "springyness". A value of 0.4 to 0.5 seems to create a nice subtle springy effect, but you should experiment with different values to see what works for your particular situation.

UIView.animate(withDuration:0.4, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options:[] , 
   animations: { () -> Void in
       self.trayView.center = self.trayDown
   }, completion: nil)