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

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 }
时间： 2024-04-19 21:54:13

GIF动画,菊花动画,UIView动画,CoreAnimation动画(CALayer动画)的用法的相关文章

iOS动画：UIView动画和CALayer动画（CABasicAnimation、CAKeyframeAnimation的使用）

iOS中的动画有两种实现方式,一种是UIView来实现动画,另一种动画是通过CALayer来实现,下面介绍两种动画的简单实现: 一.UIView动画的实现 UIView使用Context来实现动画 关键代码: //参数1 动画名称 参数2 要实现动画的对象上下文          [UIView beginAnimations:@"attribute" context:_showImageView];          //设置动画的时间     [UIView setAnimatio

UIView下使用Animation控制动画

UIView下使用Animation控制动画 动画效果是IOS界面重要的特色之一,其中CAAnimation是所有动画对象的抽象父类,作为新人,使用较多的是UIView下的动画方法(类方法).使用UIView下的动画,有下面几个方法. 方法一:设置beginAnimations 其中memberView为需要添加的子视图的视图,mivc.view为子视图,在使用的时候,需要将这两个地方替换 [cpp] view plaincopyprint? [UIView beginAnimations:@"

使用系统的某些block api（如UIView的block版本写动画时），是否也考虑循环引用问题？

系统的某些block api中,UIView的block版本写动画时不需要考虑,但也有一些api 需要考虑 以下这些使用方式不会引起循环引用的问题 [UIView animateWithDuration:duration animations:^ { [self.superview layoutIfNeeded]; }]; [[NSOperationQueue mainQueue] addOperationWithBlock:^ { self.someProperty = xyz; }]; [[

CoreAnimation (CALayer 动画)

CoreAnimation基本介绍: CoreAnimation动画位于iOS框架的Media层 CoreAnimation动画实现需要添加QuartzCore.Framework CoreAnimation基本上是LayerAnimation CoreAnimation分类: CoreAnimation作用: CoreAnimation CALayer基本介绍 CALayer的常用属性 CABasicAnimation CAKeyframeAnimation CAAnimationGroup

OC里在UIView上实现带弹跳动画按钮

/*这时用到 pop框架 自定义按钮 BSVerticalButton*/ // 加载了一个 用xib描述的这个UIView + (instancetype)publishView{ return [[NSBundle mainBundle]loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil].lastObject; } // 定义一个全局 window_ static UIWindow *window_; + (

iOS 开发之动画篇 - 从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 -- 这对于app而言是非常重要的. 本文作为动画文集的第一篇,最开始是想做个qq下拉刷新的水滴动画的制作讲解,但这几天研读<iOS Animations by Tutorials>一书,对iOS动画开发有了更为深刻的了解,于是决定动画篇将从UIView动画开始讲起,以后还会有Layer.Transitioning等在内的动画,希望本文能抛砖引玉,带给大家不一

UI基础--（4）UIView深入认识、UIImageView动画及手势

知识点: 1.UIView的简单动画 1.UIView层次关系 2.UIImageView的使用 3.UIView 停靠模式 ===================== UIView的简单动画    1.UIVew坐标系统 1)UIView相对于父视图的坐标系统    2.UVIew的frame,center,bounds关系 frame:  该view在父view坐标系统中的位置和大小.(参照点是,父亲的坐标系统) bounds: 该view在本地坐标系统中的位置和大小.(参照点是,本地坐标系

iOS动画开发之三——UIView的转场切换

iOS动画开发之三--UIView的转场切换 前两篇博客中,我们分别介绍了UIView动画的两种使用方式,分别为,带block的方式:http://my.oschina.net/u/2340880/blog/484457 ,传统的属性配置的方式:http://my.oschina.net/u/2340880/blog/484538.通过UIView动画的类方法,我们可以十分方便的使View某些属性改变的同时拥有动画效果.这篇博客主要讨论View切换的动画操作. 两个方法: + (void)tra

iOS CoreAnimation 转场动画 CATransition

本文参考:http://www.cnblogs.com/kenshincui/p/3972100.html#autoid-3-0-0总结的: 效果: 转场动画就是从一个场景以动画的形式过渡到另一个场景.转场动画的使用一般分为以下几个步骤: 1.创建转场动画 CATransition 2.设置转场类型transtion.type.子类型transtion.subtype(可选)及其他属性 3.设置转场后的新视图并添加动画到图层 下表列出了常用的转场类型(注意私有API是苹果官方没有公开的动画类型,