iOS动画小结用法

动画.png
keyPath.png

CABasicAnimation：基础动画

// MARK: - 改变位置
-(void)demoBasic1{
    CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"position.y"];
    basic1.duration = 0.8;
    basic1.fromValue = @(self.btn.center.y);
    basic1.toValue = @(self.btn.center.y + 30);
    basic1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    basic1.repeatCount = HUGE_VALF;
    basic1.repeatDuration = 3;
    basic1.removedOnCompletion = NO;
    basic1.fillMode = kCAFillModeForwards;
    [self.btn.layer addAnimation:basic1 forKey:@"basic1"];
}

// MARK: - 改变圆角
-(void)demoBasic2{
    CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    basic1.duration = 3;
    basic1.fromValue = @(0);
    basic1.toValue = @(33);
    basic1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    
    //这两句代码是让视图保持在最终状态，不返回到初始状态
    basic1.removedOnCompletion = NO;
    basic1.fillMode = kCAFillModeForwards;
    
    [self.btn.layer addAnimation:basic1 forKey:@"basic2"];
}

// MARK: - 改变背景色
-(void)demoBasic3{
    CABasicAnimation *basic3 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    basic3.fromValue = CFBridgingRelease([UIColor orangeColor].CGColor);
    basic3.toValue = (__bridge id _Nullable)([UIColor cyanColor].CGColor);
    basic3.duration = 3;
    
    basic3.removedOnCompletion = NO;
    basic3.fillMode = kCAFillModeForwards;
    
    [self.btn.layer addAnimation:basic3 forKey:@"basic3"];
}

// MARK: - 缩放
-(void)demoBasic4{
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basic.duration = 5;
    basic.fromValue = @(0.3);
    basic.toValue = @(3);
    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    basic.removedOnCompletion = NO;
    basic.fillMode = kCAFillModeForwards;
    
    [self.btn.layer addAnimation:basic forKey:@"transform.scale"];
}

// MARK: - 旋转
-(void)demoBasic5{
//keyPath: transform.rotation.y, transform.rotation.x, transform.rotation.z
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basic.duration = 3;
    basic.toValue = @(M_PI);
    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    basic.removedOnCompletion = NO;
    basic.fillMode = kCAFillModeForwards;
    
    [self.btn.layer addAnimation:basic forKey:@"transform.rotation.z"];
}

CAKeyframeAnimation:关键帧动画

// MARK: - 缩放
-(void)demoKey1{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    animation.values = @[@(1.0),@(0.8),@(1.2),@(0.8),@(1.0)];
    animation.duration = 1;
    animation.keyTimes = @[@0.2,@0.4,@0.7,@0.8,@1.0];
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [self.btn.layer addAnimation:animation forKey:@"transform.scale"];
}

// MARK: - 旋转
-(void)demoKey2{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];
    animation.values = rotationVelues;
    animation.duration = 3;
    animation.repeatCount = HUGE_VALF;
    animation.keyTimes = @[@0.2 ,@0.8 ,@1];
    animation.rotationMode = kCAAnimationRotateAuto;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [self.btn.layer addAnimation:animation forKey:@"transform.rotation"];
}

贝塞尔曲线和基础动画

// MARK: - 贝塞尔动画1:划线
-(void)bezierAnimation{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 450)];
    [path addCurveToPoint:CGPointMake(370, 500) controlPoint1:CGPointMake(350, 200) controlPoint2:CGPointMake(300, 600)];
    [path setLineWidth:2];
    
    //路径样式
    [shapeLayer removeFromSuperlayer];
    shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor; //填充色<默认黑色>
    shapeLayer.strokeColor = [UIColor blueColor].CGColor; //线色
    shapeLayer.lineWidth = 2;
    //动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 1;
    animation.fromValue = @(0.0);
    animation.toValue = @(1);
    [shapeLayer addAnimation:animation forKey:@"strokeEnd"];
    
    
    [self.view.layer addSublayer:shapeLayer];
}

// MARK: - 贝塞尔动画1:画矩形
-(void)bezierAnimation1{
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(200, 100, 100, 100)];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor cyanColor].CGColor;
    shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    shapeLayer.lineWidth = 2;
    shapeLayer.lineJoin = kCALineJoinRound;
    
    //动画
    /*
     strokeStart:相当于倒放
     strokeEnd:从开始到结束
     */
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3;
    animation.fromValue = @(0.0);
    animation.toValue = @(1);
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [shapeLayer addAnimation:animation forKey:@"strokeEnd"];
    
    [self.view.layer addSublayer:shapeLayer];
}

CAAnimationGroup：动画组

-(void)groupBase{
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"position"];//位置改变
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//缩放
    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];//圆角
    CABasicAnimation *animation4 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];//背景色
    CABasicAnimation *animation5 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//旋转（绕z轴）
    
    animation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(110, 300)];
    animation1.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 480)];
    
    animation2.toValue = @3.0;
    
    animation3.toValue = @(self.btn.frame.size.width/2);
    
    animation4.fromValue = (__bridge id _Nullable)([UIColor orangeColor].CGColor);
    animation4.toValue = (__bridge id _Nullable)([UIColor redColor].CGColor);
    
    animation5.toValue = @(M_PI);
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[animation1,animation2,animation3,animation4,animation5];
    group.duration = 3;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    
    [self.btn.layer addAnimation:group forKey:@"group1"];
}

// MARK: - 沿着UIBezierPath曲线移动
-(void)groupBezier{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 300)];
    [path addCurveToPoint:CGPointMake(375, 300) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(280, 700)];
    
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation1.duration = 4;
    animation1.fillMode = kCAFillModeForwards;
    animation1.removedOnCompletion = NO;
    animation1.fromValue = @0;
    animation1.toValue = @1;
    animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blueColor].CGColor;
    shapeLayer.lineWidth = 2;
    [shapeLayer addAnimation:animation1 forKey:@"strokeEnd"];
    [self.view.layer addSublayer:shapeLayer];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        keyAnimation.path = path.CGPath;
        
        CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
        animation2.toValue = @(self.btn.frame.size.width/2);
        
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.animations = @[keyAnimation,animation2];
        group.duration = 4;
        group.fillMode = kCAFillModeForwards;
        group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        group.removedOnCompletion = NO;
        
        [self.btn.layer addAnimation:group forKey:@"position"];
    });
}

自己总结一下，不时看一下，希望可以帮到你

Demo https://github.com/BeyondScience/MYK-Animation