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.lay
a902
er 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"];

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