码迷,mamicode.com
首页 > 其他好文 > 详细

GIF动画,菊花动画,UIView动画,CoreAnimation动画(CALayer动画)的用法

时间:2016-05-26 22:06:13      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:

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 }

 

GIF动画,菊花动画,UIView动画,CoreAnimation动画(CALayer动画)的用法

标签:

原文地址:http://www.cnblogs.com/leikun1113/p/5532738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!