第二十九篇、CoreAnimation的使用

时间：2025-03-21 00:04:01

使用的的三个步骤

1.初始化演员

2.设置好剧情

3.播放

主要类：

CALayer // 绘图部分

CABaseAnimation // 基本动画（缩放，移动）

CAKeyframeAnimation // 关键帧动画（设置动画执行的路径，常借助贝塞尔曲线）

CAAnimationGroup // 动画组（将动画添加到组，并设置Delegate监听动画结束）

常见的keypath

　 transform.scale = 比例轉換

    transform.scale.x = 闊的比例轉換

    transform.scale.y = 高的比例轉換

    transform.rotation.z = 平面圖的旋轉

    opacity = 透明度

    margin

    zPosition

    backgroundColor    背景颜色

    cornerRadius    圆角

    borderWidth

    bounds

    contents

    contentsRect

    cornerRadius

    frame

    hidden

    mask

    masksToBounds

    opacity

    position

    shadowColor

    shadowOffset

    shadowOpacity

    shadowRadius

附录：一个把商品添加到购物车的抛物线动画

coreAnimation

    // 1.初始化演员

    CALayer *layer = [[CALayer alloc]init];

    layer.bounds = CGRectMake(, , [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);

    layer.position = CGPointMake(, );

    // 设置内容

    //layer.contents = (id)_imageViewBtn.imageView.image.CGImage

    [self.view.layer addSublayer:layer];

    // 2.设定剧情

    // 贝尔曲线

    UIBezierPath *movePath = [UIBezierPath bezierPath];

    [movePath moveToPoint:layer.position];

    [movePath addQuadCurveToPoint:CGPointMake(, [UIScreen mainScreen].bounds.size.height -  - )

                     controlPoint:CGPointMake(,)];

    // 关键帧

    CAKeyframeAnimation *positionnAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    positionnAnimation.path = movePath.CGPath;

    positionnAnimation.removedOnCompletion = YES;

    // 基本动画(缩放)

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.sale"];

    scaleAnimation.fromValue = @;

    scaleAnimation.toValue = @.;

    scaleAnimation.duration = .8f;

    scaleAnimation.autoreverses = NO;

    scaleAnimation.repeatCount = ;

    // 防止动画闪烁

    scaleAnimation.removedOnCompletion = NO;

    scaleAnimation.fillMode = kCAFillModeForwards;

    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    // 组动画

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

    animationGroup.duration = 0.8f;

    animationGroup.autoreverses = NO;

    animationGroup.repeatCount = ;

    animationGroup.repeatDuration = NO;

    animationGroup.fillMode = kCAFillModeForwards;

    [animationGroup setAnimations:[NSArray arrayWithObjects:positionnAnimation,scaleAnimation, nil]];

    // 3.播放

    [layer addAnimation:animationGroup forKey:nil];

第二种实现方式：

#import "ViewController.h"

#define SCREEN_WIDTH    ([UIScreen mainScreen].bounds.size.width)

#define SCREEN_HEIGHT   ([UIScreen mainScreen].bounds.size.height)

@interface ViewController ()

@property (nonatomic,strong) UIBezierPath *path;

@end

@implementation ViewController{

    CALayer     *layer;

    UILabel     *_cntLabel;

    NSInteger    _cnt;

    UIImageView *_imageView;

    UIButton    *_btn;

}

- (void)viewDidLoad {

    [super viewDidLoad];

     _cnt = ;

    [self setUI];

}

-(void)setUI

{

    UIColor *customColor  = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:1.0f];

    //

    _btn = [UIButton buttonWithType:UIButtonTypeCustom];

    _btn.frame = CGRectMake(, SCREEN_HEIGHT * 0.7, , );

    [_btn setTitle:@"立即抢购" forState:UIControlStateNormal];

    [_btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

    _btn.titleLabel.font = [UIFont boldSystemFontOfSize:];

    [_btn setBackgroundImage:[UIImage imageNamed:@"ButtonRedLarge"] forState:UIControlStateNormal];

    [_btn addTarget:self action:@selector(startAnimation) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:_btn];

    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];

    _imageView.image = [UIImage imageNamed:@"TabCartSelected@2x.png"];

    _imageView.center = CGPointMake(, );

    [self.view addSubview:_imageView];

    // label

    _cntLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];

    _cntLabel.textColor = customColor;

    _cntLabel.textAlignment = NSTextAlignmentCenter;

    _cntLabel.font = [UIFont boldSystemFontOfSize:];

    _cntLabel.backgroundColor = [UIColor whiteColor];

    _cntLabel.layer.cornerRadius = CGRectGetHeight(_cntLabel.bounds)/;

    _cntLabel.layer.masksToBounds = YES;

    _cntLabel.layer.borderWidth = 1.0f;

    _cntLabel.layer.borderColor = customColor.CGColor;

    [self.view addSubview:_cntLabel];

    if (_cnt == ) {

        _cntLabel.hidden = YES;

    }

    self.path = [UIBezierPath bezierPath];

    [_path moveToPoint:CGPointMake(, )];

    [_path addQuadCurveToPoint:CGPointMake(, ) controlPoint:CGPointMake(, )];

}

-(void)startAnimation

{

    if (!layer) {

        _btn.enabled = NO;

        layer = [CALayer layer];

        layer.contents = (__bridge id)[UIImage imageNamed:@"test01.jpg"].CGImage;

        layer.contentsGravity = kCAGravityResizeAspectFill;

        layer.bounds = CGRectMake(, , , );

        [layer setCornerRadius:CGRectGetHeight([layer bounds]) / ];

        layer.masksToBounds = YES;

        layer.position =CGPointMake(, );

        [self.view.layer addSublayer:layer];

    }

    [self groupAnimation];

}

-(void)groupAnimation

{

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    animation.path = _path.CGPath;

    animation.rotationMode = kCAAnimationRotateAuto;

    CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    expandAnimation.duration = 0.5f;

    expandAnimation.fromValue = [NSNumber numberWithFloat:];

    expandAnimation.toValue = [NSNumber numberWithFloat:2.0f];

    expandAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    narrowAnimation.beginTime = 0.5;

    narrowAnimation.fromValue = [NSNumber numberWithFloat:2.0f];

    narrowAnimation.duration = 1.5f;

    narrowAnimation.toValue = [NSNumber numberWithFloat:0.5f];

    narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    CAAnimationGroup *groups = [CAAnimationGroup animation];

    groups.animations = @[animation,expandAnimation,narrowAnimation];

    groups.duration = 2.0f;

    groups.removedOnCompletion=NO;

    groups.fillMode=kCAFillModeForwards;

    groups.delegate = self;

    [layer addAnimation:groups forKey:@"group"];

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

//    [anim def];

    if (anim == [layer animationForKey:@"group"]) {

        _btn.enabled = YES;

        [layer removeFromSuperlayer];

        layer = nil;

        _cnt++;

        if (_cnt) {

            _cntLabel.hidden = NO;

        }

        // 数量渐变

        CATransition *animation = [CATransition animation];

        animation.duration = 3.25f;

        _cntLabel.text = [NSString stringWithFormat:@"%ld",(long)_cnt];

        [_cntLabel.layer addAnimation:animation forKey:nil];

        // 购物车上下跳动

        CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];

        shakeAnimation.duration = 0.25f;

        shakeAnimation.fromValue = [NSNumber numberWithFloat:-];

        shakeAnimation.toValue = [NSNumber numberWithFloat:];

        shakeAnimation.autoreverses = YES;

        [_imageView.layer addAnimation:shakeAnimation forKey:nil];

    }

}

相关文章