1.GIF動畫

1 // 創建一個顯示圖片的imageView // viewController創建 2 UIImageView *showGifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 414, 736)]; 3 [self.view addSubview:showGifImageView]; 4 5 6 //創建一個存儲圖片的數組 7 NSMutableArray *saveImageViewArray = [NSMutableArray array]; 8 9 for (int i = 1; i < 20; i++) { 10 NSString *imageName = [NSString stringWithFormat:@"%d.tiff",i]; 11 UIImage *image = [UIImage imageNamed:imageName]; 12 [saveImageViewArray addObject:image]; 13 } 14 15 // 設置gif圖片組 16 showGifImageView.animationImages = saveImageViewArray; 17 // 設置播放速率 18 showGifImageView.animationDuration = 1.0f; 19 // 設置播放次數(設置動態圖重復次數) 20 showGifImageView.animationRepeatCount = -1;// -1無限為播放 21 // 動畫需要設置開辟 22 [showGifImageView startAnimating]; 23 24 }

2.菊花動畫

1 self.view.backgroundColor =[UIColor grayColor]; // viewController創建 2 // 加載旋轉的菊花效果 3 4 //[UIActivityIndicatorView實現要實現的風火輪效果] 5 6 // 無需設置frame 7 UIActivityIndicatorView *indicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; 8 indicatorView.center = self.view.center; 9 [self.view addSubview:indicatorView]; 10 11 // 將風火輪動畫效果開啟 12 [indicatorView startAnimating];

3.UIView動畫

?

3.1基礎動畫

1 #pragma mark - 改變View的frame 2 - (IBAction)changeFrame:(id)sender { 3 // UIView動畫有開始beginAnimation,有結束commitAnimation 4 // 第一步: 開始Uiview動畫 5 [UIView beginAnimations:@"move" context:nil]; 6 // 第二步: 設置動畫時長 7 [UIView setAnimationDuration:3]; 8 // 第三步: 設置UIView動畫的回調代理 9 [UIView setAnimationDelegate:self]; 10 // 第四步: 設置相關的對象的frame 11 _testView.frame = CGRectMake(100, 100, 200, 100); 12 // 第五步: 結束動畫(提交動畫效果) 13 [UIView commitAnimations]; 14 15 16 17 } 18 19 #pragma mark - UIViewAnimationDelegate的代理方法 20 // 開始動畫的方法 21 -(void)animationWillStart:(NSString *)animationID context:(void *)context 22 { 23 NSLog(@"ID = %@,context = %@",animationID,context); 24 } 25 26 // 結束動畫的方法 27 -(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context 28 { 29 NSLog(@"ID = %@, context = %@", animationID, context); 30 } 31 32 33 34 #pragma mark - 改變View的color 35 - (IBAction)changecolor:(id)sender { 36 // 第一步: 開始Uiview動畫 37 38 [UIView beginAnimations:@"color" context:nil]; 39 // 第二步: 設置動畫時長 40 41 [UIView setAnimationDuration:3]; 42 // 第二步: 設置動畫時長 43 44 [UIView setAnimationDelegate:self]; 45 46 _testView.backgroundColor = [UIColor redColor]; 47 // 第五步: 結束動畫(提交動畫效果) 48 49 [UIView commitAnimations]; 50 51 52 } 53 54 #pragma mark - 改變view的alpha 55 - (IBAction)ChangeAlpha:(id)sender { 56 57 [UIView beginAnimations:@"alpha" context:nil]; 58 [UIView setAnimationDuration:5]; 59 [UIView setAnimationDelegate:self]; 60 61 _testView.alpha = 0.4; 62 [UIView commitAnimations]; 63 }

66 #pragma mark - 仿射翻轉效果的響應方法 67 - (IBAction)rotationAction:(id)sender { 68 // 第一步: 開始動畫 69 [UIView beginAnimations:@"transform" context:nil]; 70 // 第二步: 設置時長 71 [UIView setAnimationDuration:1]; 72 // 第三步: 設置淡入的效果 73 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 74 // 第四步: 設置代理 75 76 [UIView setAnimationDelegate:self]; 77 78 //第五步: 設置旋轉方向 79 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:_testView cache:YES]; 80 // 第六步: 提交動畫 81 [UIView commitAnimations]; 84 } 85 #pragma mark - 仿射旋轉效果的響應方法 86 - (IBAction)transfromAction:(id)sender { 87 88 [UIView beginAnimations:@"rotation" context:nil]; 89 [UIView setAnimationDuration:2]; 90 [UIView setAnimationDelegate:self]; 91 // 要進行翻轉,所以需要設置旋轉角度 92 CGAffineTransform transform = CGAffineTransformMakeRotation(3 * M_PI); 93 94 // 設置旋轉角度的對象 95 [_testView setTransform:transform]; 96 97 [UIView commitAnimations]; 98 99 }

3.2UIView的block動畫

?

1 #pragma mark - 簡單block動畫 2 - (IBAction)easyBlockAnimation:(id)sender { 3 4 // 第一個參數: 設置動畫時長 5 // 第二個參數: 動畫要顯示的效果 6 7 __weak typeof (self)weakSelf = self; 8 9 // [UIView animateWithDuration:2.0 animations:^{ 10 // 11 // // 改變iamgeView的center位置 12 // weakSelf.playIamgeView.center = self.view.center; 13 // 14 // }]; 15 16 // 第一個參數: 設置動畫時長 17 // 第二個參數: 動畫要顯示的效果 18 // 第三個參數: 動畫完成時進行的事情 19 [UIView animateWithDuration:2.0f animations:^{ 20 weakSelf.playIamgeView.center = self.view.center; 21 22 } completion:^(BOOL finished) { 23 NSLog(@"美女"); 24 }]; 25 } 26 27 #pragma mark - 復雜block動畫 28 - (IBAction)complexBlockAnimation:(id)sender { 29 30 // 參數1: 時長 31 // 參數2: 動畫的延遲時間 32 // 參數3: 動畫的枚舉值 33 // 參數4: 要實現的動畫效果 34 // 參數5: 動畫完成的時候要干的事情 35 36 __weak typeof (self)weakSelf = self; 37 38 39 [UIView animateWithDuration:5.0f delay:1.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{ 40 weakSelf.playIamgeView.frame = CGRectMake(100, 100, 100, 100); 41 } completion:^(BOOL finished) { 42 NSLog(@"美女?"); 43 }]; 44 45 } 46 #pragma mark - 關鍵幀動畫 47 - (IBAction)keyFramesAnimation:(id)sender { 48 49 // 參數1: 時長 50 // 參數2: 延遲時間 51 // 參數3: 枚舉值動畫效果 52 // 參數4: 開始動畫 53 __weak typeof(self)weakSelf = self; 54 [UIView animateKeyframesWithDuration:5.0f delay:1.0f options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^{ 55 // 在這里需要添加一個方法,即創建block的關鍵幀 56 // 幀動畫的開始時間 57 // 幀動畫的持續時間 58 [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{ 59 //在這個里邊實現相關的效果 60 weakSelf.playIamgeView.center = self.view.center; 61 62 }]; 63 } completion:^(BOOL finished) { 64 NSLog(@"美女"); 65 }]; 66 67 }

3.3UIView的UIViewSpring動畫

- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view from its nib.self.title = @"spring動畫";// 參數1: 動畫時長// 參數2: 延遲時間// 參數3: 類似彈簧的效果值:0-1// 參數4: 初始化spring的一個速度// 參數5: spring動畫的枚舉值// 參數6: 開始動畫// 參數7: 動畫完成__weak typeof(self)weakSelf = self;[UIView animateWithDuration:3.0f delay:0.1f usingSpringWithDamping:1.0 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{weakSelf.springImageView.center = weakSelf.view.center;} completion:^(BOOL finished) {NSLog(@"帥哥");}]; }

4.CoreAnimation動畫(CALayer動畫)

Layer的常用屬性

1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 // Do any additional setup after loading the view, typically from a nib. 4 self.view.backgroundColor = [UIColor grayColor]; 5 #pragma mark - Layer的常用屬性 6 //設置圖片為圓角 7 self.myImageView.layer.cornerRadius = 95; 8 // 注意: 光設置上邊一句代碼是實現不了效果(下邊的masksToBounds這個屬性影響layer層的陰影效果) 9 self.myImageView.layer.masksToBounds = YES; 10 // 設置layer的陰影顏色 11 self.myImageView.layer.shadowColor = [UIColor blueColor].CGColor; 12 //設置layer層的透明度 13 self.myImageView.layer.shadowOpacity = 0.5; 14 15 // 設置陰影的偏移量 16 self.myImageView.layer.shadowOffset = CGSizeMake(-20, 10); 17 // 設置陰影的模糊度 18 self.myImageView.layer.shadowRadius = 1.0; 19 20 // 需求:拖進來一個UIView設置它的陰影 21 22 self.myView.layer.shadowOpacity = 0.5; 23 self.myView.layer.shadowOffset = CGSizeMake(-20, -10); 24 self.myView.layer.shadowRadius = 0.2; 25 26 // 自定義layer 27 [self customLayer]; 28 } 29 30 #pragma mark - 自定義layer 31 - (void)customLayer 32 { 33 //創建一個layer對象 34 CALayer *layer = [CALayer layer]; 35 //設置對象的位置和大小 36 layer.frame = CGRectMake(0, 280, 100, 100); 37 // 設置背景顏色 38 layer.backgroundColor = [UIColor redColor].CGColor; 39 40 // 設置錨點 41 layer.anchorPoint = CGPointMake(0, 0); 42 43 // 設置大小(位置) 44 layer.position = CGPointMake(100, 100); 45 46 // layer需要添加到layer層 47 [self.view.layer addSublayer:layer]; 48 }

?

1 #pragma mark - CABasicAnimation動畫的響應方法 2 - (IBAction)basicAnimation:(id)sender { 3 4 //第一步: 創建動畫的對象 5 CABasicAnimation *basicAnimation = [CABasicAnimation animation]; 6 //第二步: 告訴layer層需要什么執行樣子的動畫[后邊設置的內容為CALayer的相關屬性] 7 basicAnimation.keyPath = @"position"; 8 //第三步: 告訴告訴layer從哪里來,要到哪里去 9 basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; 10 basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)]; 11 12 // 注意點: 如果要實現移動到位置不回到原來的位置,需要實現以下代碼 13 14 basicAnimation.removedOnCompletion = NO; 15 // 設置保存動畫狀態的內容 16 basicAnimation.fillMode = kCAFillModeForwards; 17 18 //第四步: 設置動畫持續時長 19 basicAnimation.duration = 6; 20 21 // 第五步: 將要執行的動畫添加到CALayer上 22 [self.myImageView.layer addAnimation:basicAnimation forKey:@"basic"]; 23 24 //==========翻轉效果============= 25 CABasicAnimation *basic = [CABasicAnimation animation]; 26 basic.keyPath = @"transform"; 27 28 // 設置翻轉到的地方 29 basic.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 0, 1)]; 30 // 設置動畫時間 31 basic.duration = 2.0f; 32 [self.myImageView.layer addAnimation:basic forKey:@"aaa"]; 33 34 // 根據key去移除動畫 35 [self.myImageView.layer removeAnimationForKey:@"basic"]; 36 37 } 38 39 #pragma mark - CAKframeAnimation動畫按鈕的響應方法 40 - (IBAction)keyFrameAnimation:(id)sender { 41 42 // 第一步: 創建對象 43 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation]; 44 // 第二步: 設置動畫軌跡 45 keyFrameAnimation.keyPath = @"transform.rotation"; 46 47 // 第三步: 設置旋轉的角度(弧度的計算公式: 度數 / 180 *M_PI) 48 keyFrameAnimation.values = @[@(-90/180.0*M_PI),@(90/180.0*M_PI),@(8/180.0*M_PI)]; 49 50 // 第四步: 設置時長 51 keyFrameAnimation.duration = 3; 52 53 // 第五步: 添加動畫到layer層 54 [self.myImageView.layer addAnimation:keyFrameAnimation forKey:@"keyFrameAnimation"]; 55 56 } 57 58 #pragma mark - 組動畫的響應事件 59 - (IBAction)animationGroup:(id)sender { 60 // 平移動畫 61 CABasicAnimation *basicAnimation1 = [CABasicAnimation animation]; 62 basicAnimation1.keyPath = @"transform.translation.y"; 63 basicAnimation1.toValue = @(400); 64 65 // 翻轉動畫 66 CABasicAnimation *basicAnimation2 = [CABasicAnimation animation]; 67 basicAnimation2.keyPath = @"transform.scale"; 68 basicAnimation2.toValue = @(0.2); 69 70 // 旋轉動畫 71 CABasicAnimation *basicAnimation3 = [CABasicAnimation animation]; 72 basicAnimation3.keyPath = @"transform.rotation"; 73 basicAnimation3.toValue = @(M_PI); 74 75 // 需要創建管理各個動畫的動畫組 76 CAAnimationGroup *group = [CAAnimationGroup animation]; 77 78 group.animations = @[basicAnimation1,basicAnimation2,basicAnimation3]; 79 // 設置時間 80 group.duration = 5.0f; 81 [self.myImageView.layer addAnimation:group forKey:@"groupAnimation"]; 82 83 } 84 85 #pragma mark - spring動畫的響應方法 86 - (IBAction)springAnimation:(id)sender { 87 88 CASpringAnimation *springAnimation = [CASpringAnimation animation]; 89 90 springAnimation.keyPath = @"transform.scale"; 91 92 springAnimation.fromValue = @1; 93 springAnimation.toValue = @0.25; 94 95 springAnimation.duration = 3; 96 [self.myImageView.layer addAnimation:springAnimation forKey:@"springAnimation"]; 97 98 99 }

?

轉載于:https://www.cnblogs.com/leikun1113/p/5532738.html

總結

以上是生活随笔為你收集整理的GIF动画,菊花动画,UIView动画,CoreAnimation动画(CALayer动画)的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。