iOS之CoreAnimation(基础动画)笔记

  • 首先我们有必要先了解下CALayer对象。CALayer包含在QuartzCore框架中,这是一个跨平台的框架,既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation开发动画的本质就是将CALayer中的内容转化为位图从而供硬件操作。


    Snip20160819_1.png
  • CALayer常用属性

在iOS中CALayer的设计主要是了为了内容展示和动画操作,CALayer本身并不包含在UIKit中,它不能响应事件。由于CALayer在设计之初就考虑它的动画操作功能,CALayer很多属性在修改时都能形成动画效果,这种属性称为“隐式动画属性”。但是对于UIView的根图层而言属性的修改并不形成动画效果,因为很多情况下根图层更多的充当容器的做用,如果它的属性变动形成动画效果会直接影响子图层。另外,UIView的根图层创建工作完全由iOS负责完成,无法重新创建,但是可以往根图层中添加子图层或移除子图层

Snip20160819_3.png

以上这些都是支持“隐式动画”

- (void)viewDidLoad {

    [super viewDidLoad];
    //实例化自定义图层
    self.myLayer = [CALayer layer];
    //设置大小
    [self.myLayer setBounds:CGRectMake(100, 100, 100, 100)];
    //设置背景颜色
    [self.myLayer setBackgroundColor:[UIColor redColor].CGColor];
    // 中心点 Position 相当于View.center
    [self.myLayer setPosition:CGPointMake(100, 100)];
    
    self.myLayer.shadowColor = [UIColor  orangeColor].CGColor;
    
    self.myLayer.shadowOffset = CGSizeMake(10, 10);
    
    [self.view.layer addSublayer:self.myLayer];
}

#warning - CALayer 属性不能响应事件

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    UITouch *touch = touches.anyObject;
    
    CGPoint location = [touch locationInView:self.view];

    //位置
    [self.myLayer setPosition:location];

    //尺寸
    NSInteger size = arc4random_uniform(50) + 51;
    
    [self.myLayer setBounds:CGRectMake(0, 0, size, size)];
    //圆角
    NSInteger rotation = arc4random_uniform(30);
    
    [self.myLayer setCornerRadius:rotation];
    
    //旋转角度
    CGFloat angle = arc4random_uniform(180) /180.0 * M_PI;
    
    [self.myLayer setTransform:CATransform3DMakeRotation(angle, 0, 0, 1)];

    self.myLayer.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255.0)/255.0 green:arc4random_uniform(255.0)/255.0 blue:arc4random_uniform(255.0)/255.0 alpha:1].CGColor;
    
}

  • UIView的根图层创建工作完全由iOS负责完成,无法重新创建,但是可以往根图层中添加子图层或移除子图层
Snip20160819_7.png
  • 基础动画 - CABasicAnimation

Core Animation是苹果公司给我们提供的一套强大的核心动画类库,而核心动画又分为基础动画、关键帧动画、动画组、转场动画。这里只做 基础动画(CABasicAnimation)的笔记。

  • CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态
    [super viewDidLoad];
    
    self.view.backgroundColor=[UIColor orangeColor];
    
    // 自定义一个图层
    _layer=[[CALayer alloc]init];
    
    _layer.bounds=CGRectMake(0, 0, 30, 30);
    
    _layer.position=CGPointMake(50, 150);
    
    _layer.backgroundColor = [UIColor redColor].CGColor;

    [self.view.layer addSublayer:_layer];
    
    [self createYellowView];
}
- (void)createYellowView {
    
    _yellowView = [[UIView alloc] initWithFrame:CGRectMake(100, 150, 30, 30)];
    
    _yellowView.backgroundColor = [UIColor yellowColor];
    
    [self.view addSubview:_yellowView];
    
}

- (void)yellowRunPoint:(CGPoint)location {
    
    [UIView animateWithDuration:3.0 animations:^{
        
        _yellowView.center = location;
        
    }];
}

#pragma mark 移动动画
-(void)translatonAnimation:(CGPoint)location{
    //1.创建动画并指定动画属性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
    
    //2.设置动画属性初始值和结束值
    
    // basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不设置,默认为图层初始状态
    basicAnimation.toValue=[NSValue valueWithCGPoint:location];
    
    //设置其他动画属性
    basicAnimation.duration=3.0;//动画时间5秒
    
   // basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大,起到循环动画的效果
    
    //basicAnimation.removedOnCompletion=YES;//运行一次是否移除动画
    
    //3.添加动画到图层,注意key相当于给动画进行命名,以后获得该动画时可以使用此名称获取
    [_layer addAnimation:basicAnimation forKey:@"BasicAnimation_Translation"];
    
    
}
#pragma mark 点击事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    
    UITouch *touch=touches.anyObject;
    
    CGPoint location= [touch locationInView:self.view];
    //创建并开始动画
    [self translatonAnimation:location];
    
    [self yellowRunPoint:location];
    
}
  • 红色VIew是和黄色View的动画效果是一样的,所红色VIew是黄色View的系统封装方法的实现


先写这么多,写博客太累。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,488评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,110评论 5 13
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,813评论 3 34
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,094评论 1 23
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,028评论 0 21