UI设计——动画设计

核心动画编程

核心动画编程中具有哪些类？

核心动画编程中，有CAAnimation、CAPropertyAnimation、CABasicAnimation和CAKeyframeAnimation类。其中CAAnimation为CAPropertyAnimation的父类，CAPropertyAnimation为CABasicAnimation和CAKeyframeAnimation的父类。

关于CABasicAnimation的使用

rotation旋转动画

CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotation.fromValue = @(0);
    rotation.toValue = @(M_PI/2);

    rotation.duration = 1.0;
    rotation.repeatCount = 1;
    rotation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotation.delegate = self;
    [animationView.layer addAnimation:rotation forKey:@"rotation"];

translation位移动画

CABasicAnimation *translation = [CABasicAnimation animationWithKeyPath:@"transform.translation"];
    translation.fromValue = [NSValue valueWithCGPoint:animationView.center];
    translation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 500)];
    //    translation.fromValue = @(100);
    //    translation.toValue = @(300);

    translation.duration = 1.0;
    translation.repeatCount = 1;
    translation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [animationView.layer addAnimation:translation forKey:@"translation"];

scale放大缩小动画

CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
    scale.fromValue = @(1);
    scale.toValue = @(2);

    scale.duration = 1.0;
    scale.repeatCount = 1;
    scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [animationView.layer addAnimation:scale forKey:@"scale"];

以上3种方法，都有其相对应的3D动画效果

rotation旋转动画3D

CABasicAnimation *rotation3D = [CABasicAnimation animationWithKeyPath:@"transform"];
    rotation3D.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    rotation3D.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 0, 0, 1)];
    rotation3D.duration = 1.0;
    rotation3D.repeatCount = 1;
    rotation3D.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [animationView.layer addAnimation:rotation3D forKey:@"rotation3D"];

translation位移动画3D

CABasicAnimation *translation3D = [CABasicAnimation animationWithKeyPath:@"transform"];
    translation3D.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    translation3D.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 100, 100)];
    translation3D.duration = 1.0;
    translation3D.repeatCount = 1;
    translation3D.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [animationView.layer addAnimation:translation3D forKey:@"translation3D"];

scale放大缩小动画3D

CABasicAnimation *scale3D = [CABasicAnimation animationWithKeyPath:@"transform"];
    scale3D.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    scale3D.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 0, 0.5)];
    scale3D.duration = 1.0;
    scale3D.repeatCount = 1;
    scale3D.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [animationView.layer addAnimation:scale3D forKey:@"scale3D"];

关于CAKeyframeAnimation的使用

震动效果

CAKeyframeAnimation *shake = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    shake.values = @[@0,@(-10),@10,@(-10),@0,@(-10)];
    shake.duration = 0.25;
    shake.repeatCount = 1;
    shake.additive = YES;
    [animationView.layer addAnimation:shake forKey:@"shake"];

轨迹运动效果1

CAKeyframeAnimation *path = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGRect rect = CGRectMake(10, 180, 300, 300);
    path.path = CFAutorelease(CGPathCreateWithEllipseInRect(rect, NULL));
    path.duration = 5;
    path.repeatCount = FLT_MAX;
    path.additive = YES;
    path.calculationMode = kCAAnimationPaced;
    path.rotationMode = kCAAnimationRotateAuto;
    [animationview2.layer addAnimation:path forKey:@"path"];

轨迹运动效果2

CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = CGRectMake(35, 100, 250, 200);
    layer.bounds = CGRectMake(35, 100, 250, 200);
    layer.strokeColor = [UIColor cyanColor].CGColor;
    layer.lineWidth = 4;
    layer.lineJoin = kCALineCapRound;
    [self.view.layer addSublayer:layer];

    UIBezierPath *bizerPath = [UIBezierPath bezierPath];
    [bizerPath moveToPoint:CGPointMake(35, 400)];
    [bizerPath addLineToPoint:CGPointMake(35, 200)];
    [bizerPath addLineToPoint:CGPointMake(200, 200)];
    [bizerPath addLineToPoint:CGPointMake(200, 400)];
    [bizerPath addLineToPoint:CGPointMake(35, 400)];
    layer.path = bizerPath.CGPath;



    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.fromValue = @(0);
    pathAnimation.toValue = @(1.0);
    pathAnimation.duration = 5;
    [layer addAnimation:pathAnimation forKey:@"strokePath"];

以上便是关于核心动画编程的几种动画效果的代码。