iOS-CoreAnimation核心动画(使用篇)

当你的才华撑不起你的野心时，你就应该静下来学习。 —— CJJ

• 这一篇将会讲解CoreAnimation中五种类型动画的基本使用方法，每一种类型都会用一种我们常用的动画来做例子，代码已贴上来，可以直接复制使用。
• 文尾有demo链接，想要学习一下的小伙伴可以下载看看，帮到你的话点个star吧😄
• 话不多说，直接上图上代码

---

CoreAnimation核心动画

————— 接下来用一个UIImageView来演示核心动画的五种动画效果 —————

五种动画类型的调用

为了使结构清晰，我创建了一个动画抽象类CJJCoreAnimation

.h文件

typedef NS_ENUM(NSInteger , CJJAnimationType)
{
    CJJAnimationType_Basic = 101,
    CJJAnimationType_Key,
    CJJAnimationType_Spring,
    CJJAnimationType_Transition,
    CJJAnimationType_Group
};


@interface CJJCoreAnimation : NSObject
+ (instancetype)initAnimation;
- (void)addAnimationForView:(UIView *)view;
@end

NS_ASSUME_NONNULL_END

.m文件

#import "CJJCoreAnimation.h"

@implementation 


+ (instancetype)initAnimation
{
    return [[self alloc] init];
}

- (void)addAnimationForView:(UIView *)view
{
    
}

@end

五种动画类

继承

枚举调用

#pragma mark - action

- (void)animationClick:(UIButton *)btn{
    switch (_type) {
        case CJJAnimationType_Basic:
            [self testCABasicAnimation];
            break;
        case CJJAnimationType_Key:
            [self testCAKeyframeAnimation];
            break;
        case CJJAnimationType_Spring:
            [self testCASpringAnimation];
            break;
        case CJJAnimationType_Transition:
            [self testCATransition];
            break;
        case CJJAnimationType_Group:
            [self testCAAnimationGroup];
            break;
    }
}

#pragma mark - test CoreAnimation

- (void)testCABasicAnimation
{
    CJJCABasicAnimation *basicAnimation = [CJJCABasicAnimation initAnimation];
    [basicAnimation addAnimationForView:self.animationImg];
}

- (void)testCAKeyframeAnimation
{
    CJJCAKeyframeAnimation *keyAnimation = [CJJCAKeyframeAnimation initAnimation];
    [keyAnimation addAnimationForView:self.animationImg];
}

- (void)testCASpringAnimation
{
    CJJCASpringAnimation *springAnimation = [CJJCASpringAnimation initAnimation];
    [springAnimation addAnimationForView:self.animationImg];
}

- (void)testCATransition
{
    
    CJJCATransition *tranAnimation = [CJJCATransition initAnimation];
    [tranAnimation addAnimationForView:self.navigationController.view];
    CATransitionVC *v1 = [CATransitionVC new];
    [self.navigationController pushViewController:v1 animated:YES];
}

- (void)testCAAnimationGroup
{
    CJJCAAnimationGroup *groupsAnimation = [CJJCAAnimationGroup initAnimation];
    [groupsAnimation addAnimationForView:self.animationImg];
}

• 1.基础动画： CABasicAnimation

自转效果

/** 调用方法(重写)*/
- (void)addAnimationForView:(UIView *)view
{
    NSLog(@"测试基本动画");
//    [self positionWithView:view];
    [self transform_rotation_zWithView:view];
}

/** 实现自转动画*/
- (void)transform_rotation_zWithView:(UIView *)view
{
    CABasicAnimation *transfrom_rotation_z = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //默认是顺时针效果，若把fromValue和toValue的值互换，则为逆时针效果
    transfrom_rotation_z.fromValue = [NSNumber numberWithFloat:0.f];
    transfrom_rotation_z.toValue = [NSNumber numberWithFloat:M_PI * 2];
    transfrom_rotation_z.duration = 0.8;
    transfrom_rotation_z.autoreverses = NO;
    transfrom_rotation_z.fillMode = kCAFillModeForwards;
    transfrom_rotation_z.repeatCount = MAXFLOAT;
    //以上缩放是以view的中心点为中心缩放的，如果需要自定义缩放点，可以设置卯点：
//    //中心点
//    [view.layer setAnchorPoint:CGPointMake(0.5, 0.5)];
//    //左上角
//    [view.layer setAnchorPoint:CGPointMake(0, 0)];
    //右下角
    [view.layer setAnchorPoint:CGPointMake(1, 1)];
    //如果这里想设置成一直自旋转，可以设置为MAXFLOAT，否则设置具体的数值则代表执行多少次
    [view.layer addAnimation:transfrom_rotation_z forKey:nil];
}

---

• 2.关键帧动画： CAKeyframeAnimation

弹窗效果

- (void)addAnimationForView:(UIView *)view
{
    NSLog(@"测试关键帧动画");
    [self animationAlert:view];
}

//弹窗效果
- (void)animationAlert:(UIView *)view
{
    CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    popAnimation.duration = 0.6;
    popAnimation.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01f, 0.01f, 1.0f)],
                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.0f)],
                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9f, 0.9f, 1.0f)],
                            [NSValue valueWithCATransform3D:CATransform3DIdentity]];
    popAnimation.keyTimes = @[@0.0f, @0.5f, @0.75f, @1.0f];
    popAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [view.layer addAnimation:popAnimation forKey:nil];
    
}

---

• 3.弹性动画： CASpringAnimation

下落弹簧效果

- (void)addAnimationForView:(UIView *)view
{
    NSLog(@"测试弹簧动画");
    CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position.y"];
    springAnimation.mass = 1;
    springAnimation.stiffness = 100;
    springAnimation.damping = 1;
    springAnimation.initialVelocity = 0;
    springAnimation.duration = springAnimation.settlingDuration;
    springAnimation.fromValue = @(view.center.y);
    springAnimation.toValue = @(view.center.y + 150);
    springAnimation.fillMode = kCAFillModeForwards;
    [view.layer addAnimation:springAnimation forKey:nil];
}

---

• 4.转场动画: CATransition

翻转跳转页面效果

- (void)addAnimationForView:(UIView *)view
{
    NSLog(@"测试转场动画");
    CATransition *transitionAnimation = [CATransition animation];
    transitionAnimation.duration = 0.5;
    transitionAnimation.type = @"oglFlip";
    [view.layer addAnimation:transitionAnimation forKey:nil];
}

---

• 5.动画组合： CAAnimationGroup

组合动画效果

- (void)addAnimationForView:(UIView *)view
{
    NSLog(@"测试动画组");
    [self animationAroundWithView:view];
}

//中心向四周扩散动画
- (void)animationAroundWithView:(UIView *)view
{
    CGFloat width = view.frame.size.width;
    CGFloat height = view.frame.size.height;
    CALayer *animationLayer = [CALayer layer];
    animationLayer.frame = CGRectMake(width * 0.3, height * 0.3, width * 0.4, height * 0.4);
    NSInteger count = 5;
    double duration = 5;
    
    for (int i = 0; i < count; i++) {
        //动画1:放缩
        CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        basicAnimation.fromValue = @0.5;
        basicAnimation.toValue = @3.0;
        
        //动画2:帧动画
        CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
        keyAnimation.values = @[@1,@0.9,@0.8,@0.7,@0.6,@0.5,@0.4,@0.3,@0.2,@0.1,@0.0];
        keyAnimation.keyTimes = @[@0,@0.1,@0.2,@0.3,@0.4,@0.5,@0.6,@0.7,@0.8,@0.9,@1.0];
        
        CAMediaTimingFunction *defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
        //初始化一个动画组
        CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
        //设置相关属性
        groupAnimation.fillMode = kCAFillModeForwards;
        //设置动画开始时间
        groupAnimation.beginTime = CACurrentMediaTime()+(double)i*duration/(double)count;
        //设置动画持续时间
        groupAnimation.duration = duration;
        groupAnimation.repeatCount = HUGE_VAL;
        groupAnimation.timingFunction = defaultCurve;
        groupAnimation.removedOnCompletion = NO;
        //添加刚刚已经准备好的两个动画
        groupAnimation.animations = @[basicAnimation,keyAnimation];
        //将动画组添加到layer中去
        CALayer *layer = [CALayer layer];
        layer.backgroundColor = [UIColor orangeColor].CGColor;
        layer.frame = CGRectMake(0, 0, width * 0.4, height * 0.4);
        layer.borderColor = [UIColor orangeColor].CGColor;
        layer.borderWidth = 1.0f;
        layer.cornerRadius = height * 0.2f;
        layer.opacity = 0.0f;
        [layer addAnimation:groupAnimation forKey:@"layer"];
        [animationLayer addSublayer:layer];
    }
    [view.layer addSublayer:animationLayer];

    //动画3:滚动
    CABasicAnimation *transitionAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    transitionAnimation.fromValue = @0.5;
    transitionAnimation.toValue = @3.0;
    transitionAnimation.duration = 5;
    
    //动画4:移动
    CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    positionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 450)];
    positionAnimation.beginTime = 0;
    positionAnimation.duration = 5;
    positionAnimation.fillMode = kCAFillModeForwards;
    positionAnimation.removedOnCompletion = NO;
    
    //动画5:反向移动
    CABasicAnimation *positionAnimation1 = [CABasicAnimation animationWithKeyPath:@"position"];
    positionAnimation1.toValue = [NSValue valueWithCGPoint:CGPointMake(350, 150)];
    positionAnimation1.duration = 5;
    positionAnimation1.beginTime = 5;
    positionAnimation1.fillMode = kCAFillModeForwards;
    positionAnimation1.removedOnCompletion = NO;
    
    //动画6:反向移动
    CABasicAnimation *positionAnimation2 = [CABasicAnimation animationWithKeyPath:@"position"];
    positionAnimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 600)];
    positionAnimation2.duration = 10;
    positionAnimation2.beginTime = 10;
    positionAnimation2.fillMode = kCAFillModeForwards;
    positionAnimation2.removedOnCompletion = NO;
    
    //合成以上6种动画效果
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 20.0;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    group.animations = @[transitionAnimation,positionAnimation,positionAnimation1,positionAnimation2];
    [view.layer addAnimation:group forKey:nil];
    
}

文尾献上Demo CJJCoreAnimationDemo

传送门：iOS-CoreAnimation核心动画(API&&属性篇)