CAAnimation动画收录:三、核心动画笔记

移动开发 waitig 367℃ 百度已收录 0评论

一.CALayer 1.概念: 在iOS中,能看见的基本上都是UIView. 在创建UIView时UIView会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个图层. 当UIView需要显示到屏幕上时,会调用drawRect方法进行绘图.并且会将所有内容绘制在自己的图层上.绘图完毕后,系统会将图层拷贝到屏幕上.于是就完成了UIView的显示. 2.基本使用: 通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,比如: 阴影 圆角大小 边框宽度和颜色

- (void)viewLayer
{
    // 设置阴影透明度
    _redView.layer.shadowOpacity = 1;

    // 设置阴影颜色
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;

    // 设置阴影圆角半径
    _redView.layer.shadowRadius = 10;

    // 设置圆角半径
    _redView.layer.cornerRadius = 50;

    // 设置边框半径
    _redView.layer.borderColor = [UIColor whiteColor].CGColor;

    // 设置边框半径
    _redView.layer.borderWidth = 2;
}

效果图:


layer.png

还有一些别的

// 旋转
_imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
// 平移
_imageView.layer.transform = CATransform3DMakeTranslation(200, 200, 0);        
// 缩放
_imageView.layer.transform = CATransform3DMakeScale(1, 0.5, 1);

// 利用KVC改变形变        
NSValue *rotation = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
[_imageView.layer setValue:rotation forKeyPath:@"transform"];

注意:
CALayer是定义在QuartzCore框架中的[Core Animation]
CGImageRef, CGColorRef 两种数据类型是定义在CoreGraphics框架中的.
UIColor, UIImage是定义在UIKit框架中.

QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用.
但是UIKit只能在iOS中使用.
所以,为了保证可移植性, QuartzCore不能使用UIImage, UIColor, 只能使用CGImageRef, CGColorRef.

3.position和anchorPoint

/* The position in the superlayer that the anchor point of the layer's
 * bounds rect is aligned to. Defaults to the zero point. Animatable. */

@property CGPoint position;
// 用来设置CALayer在父层中的位置.
// 以父层的左上角为原点(0, 0).

/* Defines the anchor point of the layer's bounds rect, as a point in
 * normalized layer coordinates - '(0, 0)' is the bottom left corner of
 * the bounds rect, '(1, 1)' is the top right corner. Defaults to
 * '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */

@property CGPoint anchorPoint;
// 定位点
// 决定着CALayer的哪个点会在position属性所指的位置.
// 以自己的左上角为原点(0, 0)
// 她的(x, y)取值范围都是0 ~ 1, 默认是(0.5, 0.5) 也就是中点.

二.隐式动画
每个UIView内部都默认关联着一个CALayer.除了该CALayer以外,也就是手动创建的CALayer,都存在着隐式动画.
对手动创建的CALayer的部分属性做修改时,默认会自动产生一些动画效果.而且苹果API的注释里也写得很清楚.


hiddenAnime.png

ps:取消动画效果的话:

// 开启事务
[CATransaction begin];

// 取消隐世动画
[CATransaction setDisableActions:YES];
_layer.position = CGPointMake(100, 100);

// 提交事务
[CATransaction commit];

三.核心动画

CAAnimation继承结构:


CAAnimationConstruct.png

CAAnimation的CAMediaTimingFunction的属性
kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。

1.CABasicAnimation
改变位置:

- (void)position {
    // 创建动画对象
    CABasicAnimation *anime = [CABasicAnimation animation];

    // 设置动画的属性(layer的属性)
    anime.keyPath = @"position";

    // 设置属性改变的值
    anime.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

    // 设置动画时长
    anime.duration = 2;

    // 取消反弹
    // 动画执行完毕之后不要把动画移除
    anime.removedOnCompletion = NO;

    // 保持最新的位置
    anime.fillMode = kCAFillModeForwards;

    // 给图层添加了动画
    [_layer addAnimation:anime forKey:nil];
}

2. CAKeyframeAnimation

- (void)value {
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    // 设置动画属性
    anim.keyPath = @"position";

    NSValue *v1 = [NSValue valueWithCGPoint:CGPointZero];

    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(160, 160)];

    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(270, 0)];

    anim.values = @[v1,v2,v3];

    anim.duration = 2;

    [_redView.layer addAnimation:anim forKey:nil];
}

3.CATransition(不是CATransaction) 主要!!!!

-(void)imageChange {
    _index++;

    if (_index == 4) {
        _index = 1;
    }
    NSString *fileName = [NSString stringWithFormat:@"%d",_index];
    _imageView.image = [UIImage imageNamed:fileName];

    CATransition *anim = [CATransition animation];

    anim.type = @"pageCurl";

    anim.subtype = kCATransitionFromLeft;
    //    anim.startProgress = 0.5;

    anim.duration = 2;

    [_imageView.layer addAnimation:anim forKey:nil];
}

4. CAAnimationGroup

- (void)groupAnime {
    CABasicAnimation *rotation = [CABasicAnimation animation];

    rotation.keyPath = @"transform.rotation";

    rotation.toValue = @M_PI_2;

    CABasicAnimation *position = [CABasicAnimation animation];

    position.keyPath = @"position";

    position.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 250)];

    CABasicAnimation *scale = [CABasicAnimation animation];

    scale.keyPath = @"transform.scale";

    scale.toValue = @0.5;

    CAAnimationGroup *group = [CAAnimationGroup animation];

    group.animations = @[rotation,position,scale];

    group.duration = 2;

    // 取消反弹
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;

    [_redView.layer addAnimation:group forKey:nil];
}

另外需要注意:
核心动画都是假象,不能改变layer的真实属性的值
展示的位置和实际的位置不同。实际位置永远在最开始位置

最好是将核心动画 用在NavigationController的push或者一系列的切换动画中.或者一些点击效果.


本文由【waitig】发表在等英博客
本文固定链接:CAAnimation动画收录:三、核心动画笔记
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)