Animating View Properties - sammanthp007/Linux-Kernel-Development GitHub Wiki
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
}
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...
}
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)