Objective-C)
(1) Position Animation
PositionAnimation can be used to move a View. The simplest thing is moving the X axis and Y axis. Here we implement the movement of several small blocks.
#import "PositionViewController.h"@interface PositionViewController ()@property (weak, nonatomic) IBOutlet UIView *redSquare;@property (weak, nonatomic) IBOutlet UIView *greenSquare;@end@implementation PositionViewController- (void)viewDidLoad { [super viewDidLoad];}- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [UIView animateWithDuration:2 animations:^{ self.redSquare.frame = CGRectMake(self.redSquare.frame.origin.x, 400, self.redSquare.bounds.size.width, self.redSquare.bounds.size.height); self.greenSquare.frame = CGRectMake(200, 500, self.greenSquare.bounds.size.width, self.greenSquare.bounds.size.height); }];}@end
(2) Transparency Animation
A transparency animation can make the transparency of a View change between 0 and 1. If the transparency is 0, the system is completely transparent and invisible. If the transparency is 1, it indicates the same as normal.
#import "OpacityViewController.h"@interface OpacityViewController ()@property (weak, nonatomic) IBOutlet UIView *redSquare;@end@implementation OpacityViewController- (void)viewDidLoad { [super viewDidLoad];}- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [UIView animateWithDuration:2 animations:^{ self.redSquare.alpha = 0.3; }];}@end
(3) Scaling Animation
The zoom animation can change the size of a View and zoom in or out proportionally.
# Import "ScaleViewController. h "@ interface ScaleViewController () @ property (weak, nonatomic) IBOutlet UIView * redSquare; @ end @ implementation ScaleViewController-(void) viewDidLoad {[super viewDidLoad];}-(void) viewWillAppear :( BOOL) animated {[super viewWillAppear: animated]; [UIView animateWithDuration: 2 animations: ^ {// width-to-height scaling ratio; self. redSquare. transform = CGAffineTransformMakeScale (2, 3) ;}] ;}@ end
(4) color Animation
Color animation allows a View to experience a color gradient within a time interval for color transition.
# Import "ColorViewController. h "@ interface ColorViewController () @ property (weak, nonatomic) IBOutlet UIView * greenSquare; @ end @ implementation ColorViewController-(void) viewDidLoad {[super viewDidLoad];}-(void) viewWillAppear :( BOOL) animated {[super viewWillAppear: animated]; [UIView animateWithDuration: 2 animations: ^ {// width-to-height scaling ratio; self. greenSquare. backgroundColor = [UIColor brownColor] ;}] ;}@ end
(5) Rotating Animation
Allows a View to rotate around the dot.
# Import "RotationViewController. h "@ interface RotationViewController () @ property (weak, nonatomic) IBOutlet UIView * greenSquare; // rotate once; @ property (weak, nonatomic) IBOutlet UIView * redSquare; // rotate for countless times; @ end @ implementation RotationViewController-(void) viewDidLoad {[super viewDidLoad];}-(void) viewWillAppear :( BOOL) animated {[super viewWillAppear: animated]; [self spinGreenSquare]; [self spinRedSquare];}-(void) spinGreenSquare {[UIView animateWithDuration: 2 animations: ^ {self. greenSquare. transform = CGAffineTransformRotate (self. greenSquare. transform, M_PI); // a PI, 180 degrees;} completion: ^ (BOOL finished) {}] ;}- (void) spinRedSquare {[UIView animateWithDuration: 1 delay: 0 options: UIViewAnimationOptionCurveLinear animations: ^ {self. redSquare. transform = CGAffineTransformRotate (self. redSquare. transform, 360); // a PI, 180 degrees;} completion: ^ (BOOL finished) {[self spinRedSquare] ;}@ end
(6) repeated Animation
This animation can be executed repeatedly during an animation process.
#import "RepeatViewController.h"@interface RepeatViewController ()@property (weak, nonatomic) IBOutlet UIView *greenSquare;@property (weak, nonatomic) IBOutlet UIView *redSquare;@end@implementation RepeatViewController- (void)viewDidLoad { [super viewDidLoad];}- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat animations:^{ self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height); } completion:^(BOOL finished) { }]; [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{ self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height); } completion:^(BOOL finished) { }];}@end
(7) buffer Animation
Here we mainly use the beiser curve effect to change the speed of the View animation. You can practice it.
# Import "EasingViewController. h "@ interface EasingViewController () @ property (weak, nonatomic) IBOutlet UIView * greenSquare; @ property (weak, nonatomic) IBOutlet UIView * redSquare; @ end @ implementation EasingViewController-(void) viewDidLoad {[super viewDidLoad];}-(void) viewWillAppear :( BOOL) animated {[super viewWillAppear: animated]; // mainly sets the options parameter. [UIView animateWithDuration: 2 delay: 0 options: UIViewAnimationOptionCurveEaseIn animations: ^ {self. greenSquare. frame = CGRectMake (250, self. greenSquare. frame. origin. y, self. greenSquare. frame. size. width, self. greenSquare. frame. size. height);} completion: nil]; [UIView animateWithDuration: 2 delay: 0 options: UIViewAnimationOptionCurveEaseOut animations: ^ {self. redSquare. frame = CGRectMake (250, self. redSquare. frame. origin. y, self. redSquare. frame. size. width, self. redSquare. frame. size. height);} completion: nil];} @ end
(8) Spring Animation
This animation is similar to the true effect of spring during execution. You can set the damping and initial speed of spring to achieve extremely realistic spring jitter.
# Import "SpringViewController. h "@ interface SpringViewController () @ property (weak, nonatomic) IBOutlet UIView * greenSquare; @ property (weak, nonatomic) IBOutlet UIView * redSquare; @ end @ implementation SpringViewController-(void) viewDidLoad {[super viewDidLoad];}-(void) viewWillAppear :( BOOL) animated {[super viewWillAppear: animated]; // you can change different states by setting parameters. [UIView animateWithDuration: 2 delay: 0.5 usingSpringWithDamping: 0.2 initialSpringVelocity: 0 options: UIViewAnimationOptionTransitionNone animations: ^ {self. greenSquare. frame = CGRectMake (250, self. greenSquare. frame. origin. y, self. greenSquare. frame. size. width, self. greenSquare. frame. size. height);} completion: nil]; [UIView animateWithDuration: 2 delay: 0.5 usingSpringWithDamping: 0.2 initialSpringVelocity: 1 options: UIViewAnimationOptionTransitionNone animations: ^ {self. redSquare. frame = CGRectMake (250, self. redSquare. frame. origin. y, self. redSquare. frame. size. width, self. redSquare. frame. size. height);} completion: nil];} @ end
(9) Rotating Images
In our actual needs, we may need to keep the image in the 90 degrees left, 90 degrees right, and 180 degrees before moving and rotating, then, you can perform other animations. The implementation is as follows:
# Import "ImageRotationViewController. h "# define kScreenWidth [[UIScreen mainScreen] bounds]. size. width # define kScreenHeight [[UIScreen mainScreen] bounds]. size. height/*** rotate the UIImage in this example. Note that the UIImageView is not rotated, which can meet more custom requirements. */@ interface ImageRotationViewController () @ end @ implementation ImageRotationViewController-(void) viewDidLoad {[super viewDidLoad];/** UIImageOrientationUp, // default orientat Ion UIImageOrientationDown, // 180 deg rotation UIImageOrientationLeft, // 90 deg CCW UIImageOrientationRight, // 90 deg CW UIImageOrientationUpMirrored, // as abve but image mirrored along other axis. horizontal flip UIImageOrientationDownMirrored, // horizontal flip handle, // vertical flip UIImageOrientationRightMirrored, // vertical flip */UIImageView * imageView = [U IImageView alloc] initWithFrame: CGRectMake (0, kScreenHeight/2, 80, kScreenWidth)]; UIImage * image = [UIImage imageNamed: @ "1"]; /*** the following method is used to make an image rotate at the beginning, instead of being placed. Note that the operation on the UIImage is not the operation on the UIimageView control; put the image in the control. */UIImage * imageRotate = [UIImage imageWithCGImage: image. CGImage scale: 1 orientation: UIImageOrientationLeft]; [imageView setImage: imageRotate]; [self. view addSubview: imageView]; [UIView animateWithDuration: 2 animations: ^ {imageView. transform = CGAffineTransformRotate (imageView. transform, M_PI_2); imageView. frame = CGRectMake (0, 64, kScreenWidth, 80) ;}] ;}@ end
The animation implementation here is very simple. You can try it by downloading the code. I will explain more advanced and cool animations later. Please do your best.