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 }