iOS动画:UIView动画和CALayer动画(CABasicAnimation、CAKeyframeAnimation的使用)

简介: <p style="padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; clear:both; height:auto; overflow:hidden; color:rgb(44,44,44); font-family:宋体,'Arial Narrow',arial,serif; font-siz

iOS中的动画有两种实现方式,一种是UIView来实现动画,另一种动画是通过CALayer来实现,下面介绍两种动画的简单实现:



一、UIView动画的实现

   UIView使用Context来实现动画

关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//参数1 动画名称 参数2 要实现动画的对象上下文
     
     [UIView beginAnimations:@ "attribute"  context:_showImageView];
     
     //设置动画的时间
     [UIView setAnimationDuration:1.0f];
     
     //设置动画延迟时间
//    [UIView setAnimationDelay:2];
     
     //设置视图center 实现试图移动动画
     _showImageView.center = CGPointMake(100, 100);
     
     //设置alpha值:视图透明度
     _showImageView.alpha = 0.2f;
     
     //设置背景颜色
     _showImageView.backgroundColor = [UIColor greenColor];
     
     //UIView动画 设置代理
     [UIView setAnimationDelegate:self];
     
     //动画将要开始代理方法
     [UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
     
     //动画已经结束代理方法
     [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
     
     //提交动画设置,执行动画
     [UIView commitAnimations];



使用Block实现的动画:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//UIView动画, 使用Block实现
     [UIView animateWithDuration:1.0f animations:^{
         
         //通过设置translation 实现视图的偏移
         if  ([self.mySwitch isOn]) {
             
             //基于上一次的translation
             _showImageView.transform = CGAffineTransformTranslate(_showImageView.transform, 50, 0);
         else  {
             
             //基于原始的translation
             _showImageView.transform = CGAffineTransformMakeTranslation(-50, 0);
         }
     }];



二、CALayer动画的实现

CABasic动画的实现:根据初始位置和结束位置确定动画

1
2
3
4
5
6
//CABasic 有两个属性 fromValue 动画开始值,toValue动画结束值
     CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@ "position" ];
     [animation1 setDuration:2];
     animation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 150)];
     animation1.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
     [_imageView.layer addAnimation:animation1 forKey:@ "position" ];



创建一组动画:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//创建组动画对象
     CAAnimationGroup *group = [CAAnimationGroup animation];
     
     //CABasic动画
     CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@ "transform.scale.y" ];
     animation1.fromValue = @1.5;
     animation1.toValue = @0.5;
     
     //关键帧动画
     CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@ "position" ];
     animation2.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],
                          [NSValue valueWithCGPoint:CGPointMake(200, 150)],
                          [NSValue valueWithCGPoint:CGPointMake(100, 200)],
                          [NSValue valueWithCGPoint:CGPointMake(200, 250)]];
     
     //group添加动画数组,group中动画对象并发执行
     [group setAnimations:@[animation1, animation2]];
     [group setDuration:4.0f];
     [_imageView.layer addAnimation:group forKey:@ "group" ];


目录
相关文章
|
9月前
|
iOS开发
iOS 动画绘制圆形
iOS 动画绘制圆形
53 1
|
iOS开发
iOS - 个人中心果冻弹性下拉动画
iOS - 个人中心果冻弹性下拉动画
222 0
iOS - 个人中心果冻弹性下拉动画
|
iOS开发
iOS开发-导航栏标题动画
iOS开发-导航栏标题动画
171 0
iOS开发-导航栏标题动画
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
138 0
iOS开发 - 柱状图动态展现动画
|
JSON iOS开发 数据格式
iOS开发 - 关于启动页动画的杂谈
iOS开发 - 关于启动页动画的杂谈
226 0
iOS开发 - 关于启动页动画的杂谈
|
iOS开发
iOS开发- 分屏动画
iOS开发- 分屏动画
113 0
iOS开发- 分屏动画
|
存储 API iOS开发
iOS UIView动画效果
iOS UIView动画效果
|
程序员 API iOS开发
iOS UIView添加快捷手势回调
iOS UIView添加快捷手势回调
|
iOS开发
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
iOS开发CoreAnimation解读之二——对CALayer的分析
193 0
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
|
iOS开发 容器
iOS开发CoreAnimation解读之二——对CALayer的分析(一)
iOS开发CoreAnimation解读之二——对CALayer的分析
122 0
iOS开发CoreAnimation解读之二——对CALayer的分析(一)