iOS 核心动画 代码详解

//
//  ViewController.m
//  test_shapeLayer_01
//
//  Created by admin on 1/28/16.
//  Copyright © 2016 jeffasd. All rights reserved.
//

#import "ViewController.h"

#define pi 3.14159265359
#define   DEGREES_TO_RADIANS(degrees)  ((pi * degrees)/
180)

@interface ViewController ()

@property(nonatomic,
strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super
viewDidLoad];

    self.shapeLayer = [CAShapeLayer
layer];
//    _shapeLayer.frame = CGRectMake(0, 0, 200, 200);
    _shapeLayer.frame =
self.view.frame;
//    _shapeLayer.position = self.view.center;
    _shapeLayer.fillColor = [UIColor
clearColor].CGColor;
    
    _shapeLayer.lineWidth =
1.0f;
    _shapeLayer.strokeColor = [UIColor
cyanColor].CGColor;
    
//    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
//    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
    
//    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
//                                                         radius:75
//                                                     startAngle:0
//                                                       endAngle:DEGREES_TO_RADIANS(135)
//                                                      clockwise:YES];
    
//    //绘制二次贝塞尔曲线
//    UIBezierPath *circlePath = [UIBezierPath bezierPath];
////    [circlePath moveToPoint:CGPointMake(20, 100)];
//    [circlePath moveToPoint:CGPointMake(0, 100)];
//    [circlePath addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(100, 0)];
    
    
#if 0
    //绘制三次贝塞尔曲线
    UIBezierPath *circlePath = [UIBezierPath bezierPath];
    [circlePath moveToPoint:CGPointMake(20,
50)];
    [circlePath addCurveToPoint:CGPointMake(200,
50) controlPoint1:CGPointMake(110,
0) controlPoint2:CGPointMake(110,
100)];
    _shapeLayer.path = circlePath.CGPath;
#endif
    
    
    //绘制三次贝塞尔曲线
    UIBezierPath *circlePath = [UIBezierPath
bezierPath];
    [circlePath moveToPoint:CGPointMake(20,
100)];
    [circlePath addCurveToPoint:CGPointMake(350,
600) controlPoint1:CGPointMake(110,
0) controlPoint2:CGPointMake(110,
100)];
    _shapeLayer.path = circlePath.CGPath;
    
    
    _shapeLayer.strokeStart =
0;
    _shapeLayer.strokeEnd =
1.0;
    
    [self.view.layer
addSublayer:_shapeLayer];
    
#if 0
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 3;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
    animation.repeatCount = 1;
    animation.path = circlePath.CGPath;
    
    UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(100,
20, 10,
10)];
    
//    subView.center = self.view.center;
    
    subView.backgroundColor = [UIColor redColor];
    [self.view addSubview:subView];
    
//    subView.center = self.view.center;
    
    //为subView视图添加动画
    [subView.layer addAnimation:animation forKey:@"test"];
#endif
    
    
//    //绘制曲线
//    CGContextMoveToPoint(context, 20, 100);//移动到起始位置
//    /*绘制二次贝塞尔曲线
//     c:图形上下文
//     cpx:控制点x坐标
//     cpy:控制点y坐标
//     x:结束点x坐标
//     y:结束点y坐标
//     */
//    CGContextAddQuadCurveToPoint(context, 160, 0, 300, 100);
//    
//    CGContextMoveToPoint(context, 20, 500);
//    /*绘制三次贝塞尔曲线
//     c:图形上下文
//     cp1x:第一个控制点x坐标
//     cp1y:第一个控制点y坐标
//     cp2x:第二个控制点x坐标
//     cp2y:第二个控制点y坐标
//     x:结束点x坐标
//     y:结束点y坐标
//     */
//    CGContextAddCurveToPoint(context, 80, 300, 240, 500, 300, 300);
//    
//    //设置图形上下文属性
//    [[UIColor yellowColor]setFill];
//    [[UIColor redColor]setStroke];
//    
//    
//    //绘制路径
//    CGContextDrawPath(context, kCGPathFillStroke);
    
    
    CALayer *layer=[CALayer
layer];
    
    layer.frame=CGRectMake(50,
200, 50,
50);
    
    layer.backgroundColor=[UIColor
orangeColor].CGColor;
    
    layer.cornerRadius=8.0f;
    
    
//    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
//    
//    animation.duration=4.0f;
//    
//    animation.autoreverses=NO;
//    
//    animation.repeatCount=1;
//    
//    animation.toValue=[NSNumber numberWithInt:-10];
//    
//    animation.fromValue=[NSNumber numberWithInt:200];
//    
//    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    
    CABasicAnimation *animationZoomIn=[CABasicAnimation
animationWithKeyPath:@"transform.scale"];
    
    animationZoomIn.duration=2.0f;
    
    animationZoomIn.autoreverses=NO;
    
    animationZoomIn.repeatCount=1;
    
    animationZoomIn.toValue=[NSNumber
numberWithFloat:1.56];
    
    animationZoomIn.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
    
    CABasicAnimation *animationZoomOut=[CABasicAnimation
animationWithKeyPath:@"transform.scale"];
    
    animationZoomOut.beginTime=2.0f;
    
    animationZoomOut.duration=2.0f;
    
    animationZoomOut.autoreverses=NO;
    
    animationZoomOut.repeatCount=1;
    
    animationZoomOut.toValue=[NSNumber
numberWithFloat:.01];
    
    animationZoomOut.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseOut];
    
    CAAnimationGroup *group=[CAAnimationGroup
animation];
    
    group.duration=4.0f;
    
//    group.animations=[NSArray arrayWithObjects: animation, animationZoomIn, animationZoomOut,nil];
    group.animations=[NSArray
arrayWithObjects: animationZoomIn, animationZoomOut,nil];
    
    group.removedOnCompletion=NO;
    
    group.fillMode=kCAFillModeForwards;
    
    [layer addAnimation:group
forKey:nil];
    
    [self.view.layer
addSublayer:layer];
    
    
    //layer.hidden=YES;
    
}

- (void)didReceiveMemoryWarning {
    [super
didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

//
//  ViewController.m
//  CABasicAnimationDemo

//

#import "ViewController.h"

#define KYOffset    20

@interface ViewController ()

@property(nonatomic,
strong)UIView *ViewTest;

@property(nonatomic,
strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super
viewDidLoad];

    self.shapeLayer = [CAShapeLayer
layer];
    _shapeLayer.frame =
self.view.frame;
    _shapeLayer.fillColor = [UIColor
clearColor].CGColor;
    _shapeLayer.lineWidth =
1.0f;
    _shapeLayer.strokeColor = [UIColor
redColor].CGColor;
    
    self.ViewTest = [[UIView
alloc] initWithFrame:CGRectMake(20,
100, 200,
200)];
    
    [self.view
addSubview:_ViewTest];
    self.ViewTest.backgroundColor = [UIColor
redColor];
    
    
    //组合动画调用
//    [self startAnimation2];
    
    //永久闪烁动画
//    [self opacityForever_Animation:0.3];
    
    ////有闪烁次数的动画
//    [self opacityTimes_Animation:10 durTimes:0.3];
    
    //画一条线
路径
//    [self drawACurvedLine];
    
    //路径动画
//    [self animateCicleAlongPath];
    
//    [self initScaleLayer];
    
    //顺序执行动画
    [self
animationByOrder];
    
}

-(void)startAnimation
{
    CABasicAnimation *animation = [CABasicAnimation
animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue
valueWithCGPoint:CGPointMake(50,
50)];
    animation.toValue = [NSValue
valueWithCGPoint:CGPointMake(300,
300)];
    animation.duration =
3.0f;
    animation.repeatCount =
1;
    //animation.removedOnCompletion = NO; //完成后是否回到原来状态，如果为NO
就是停留在动画结束时的状态
    //animation.fillMode = kCAFillModeRemoved;//动画完成后返回到原来状态
    //animation.fillMode = kCAFillModeBackwards;
    animation.fillMode =
kCAFillModeForwards;//当动画完成时，保留在动画结束的状态
    
    [self.ViewTest.layer
addAnimation:animation forKey:nil];
}

-(void)startAnimation1
{
    CABasicAnimation *animation = [CABasicAnimation
animationWithKeyPath:@"transform.translation.y"];
    animation.fromValue = [NSNumber
numberWithFloat:0.0f];
    animation.toValue   = [NSNumber
numberWithFloat:10.0f];
    //animation.duration = 0.5f;
    //animation.fillMode = kCAFillModeForwards;
    //animation.removedOnCompletion = NO;
    //animation.repeatCount = 2;
    //[self.ViewTest.layer addAnimation:animation forKey:nil];
    
    CABasicAnimation *animation1 = [CABasicAnimation
animationWithKeyPath:@"transform.translation.x"];
    animation.fromValue = [NSNumber
numberWithFloat:0.0f];
    animation.toValue   = [NSNumber
numberWithFloat:10.0f];
    //animation.duration = 0.5f;
    //animation.fillMode = kCAFillModeForwards;
    //animation.removedOnCompletion = NO;
    //animation.repeatCount = 2;
    //[self.ViewTest.layer addAnimation:animation1 forKey:nil];
    
    CAAnimationGroup *groupAnimation = [CAAnimationGroup
animation];
    groupAnimation.duration =
2.0f;
    groupAnimation.autoreverses  =
YES;
    groupAnimation.repeatCount =
5;
    [groupAnimation setAnimations:[NSArray
arrayWithObjects:animation,animation1,
nil]];
    
    [self.ViewTest.layer
addAnimation:groupAnimation
forKey:nil];
}

//组合动画
-(void)startAnimation2
{
    //界限
    CABasicAnimation *boundsAnimation = [CABasicAnimation
animationWithKeyPath:@"bounds"];
//    CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:@"frame"];
    boundsAnimation.fromValue = [NSValue
valueWithCGRect: self.ViewTest.bounds];
    boundsAnimation.toValue = [NSValue
valueWithCGRect:CGRectZero];
    //透明度变化
    CABasicAnimation *opacityAnimation = [CABasicAnimation
animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = [NSNumber
numberWithFloat:1.0];
    opacityAnimation.toValue = [NSNumber
numberWithFloat:0.5];
    
    //位置移动
    CABasicAnimation *animation  = [CABasicAnimation
animationWithKeyPath:@"position"];
    animation.fromValue =  [NSValue
valueWithCGPoint: self.ViewTest.layer.position];
    CGPoint toPoint =
self.ViewTest.layer.position;
    toPoint.x +=
180;
    animation.toValue = [NSValue
valueWithCGPoint:toPoint];
    
    //旋转动画
    CABasicAnimation* rotationAnimation =
    [CABasicAnimation
animationWithKeyPath:@"transform.rotation.z"];//"z"还可以是“x”“y”，表示沿z轴旋转
    
    rotationAnimation.toValue = [NSNumber
numberWithFloat:(2 *
M_PI) * 3];
    // 3 is the number of 360 degree rotations
    
    // Make the rotation animation duration slightly less than the other animations to give it the feel
    // that it pauses at its largest scale value
    rotationAnimation.duration =
3.0f;
    rotationAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//缓入缓出
    //rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    //缩放动画
    CABasicAnimation *scaleAnimation = [CABasicAnimation
animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber
numberWithFloat:0.0];
    scaleAnimation.toValue = [NSNumber
numberWithFloat:1.0];
    scaleAnimation.duration =
3.0f;
    scaleAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //组合动画
    CAAnimationGroup *animationGroup = [CAAnimationGroup
animation];
    animationGroup.duration =
3.0f;
    animationGroup.autoreverses =
YES;   //是否重播，原动画的倒播
    animationGroup.repeatCount =
NSNotFound;//HUGE_VALF;
//HUGE_VALF,源自math.h
//    [animationGroup setAnimations:[NSArray arrayWithObjects:rotationAnimation, scaleAnimation,boundsAnimation, nil]];
    
//    [animationGroup setAnimations:[NSArray arrayWithObjects:scaleAnimation, nil]];
    
    [animationGroup setAnimations:[NSArray
arrayWithObjects:boundsAnimation,
nil]];
    
    //将上述两个动画编组
    
    [self.ViewTest.layer
addAnimation:animationGroup
forKey:@"animationGroup"];
}

//永久闪烁的动画
-(void)opacityForever_Animation:(float)time
{
    CABasicAnimation *animation=[CABasicAnimation
animationWithKeyPath:@"opacity"];
    animation.fromValue=[NSNumber
numberWithFloat:1.0];
    animation.toValue=[NSNumber
numberWithFloat:0.0];
    animation.autoreverses=YES;
    animation.duration=time;
    animation.repeatCount=FLT_MAX;
    animation.removedOnCompletion=NO;
    animation.fillMode=kCAFillModeForwards;
    
    [self.ViewTest.layer
addAnimation:animation forKey:@"opacityForever"];
}
/**************************************************************************/

//有闪烁次数的动画

-(void)opacityTimes_Animation:(float)repeatTimes durTimes:(float)time;
{
    CABasicAnimation *animation=[CABasicAnimation
animationWithKeyPath:@"opacity"];
    animation.fromValue=[NSNumber
numberWithFloat:1.0];
    animation.toValue=[NSNumber
numberWithFloat:0.4];
    animation.repeatCount=repeatTimes;
    animation.duration=time;
    animation.removedOnCompletion=NO;
    animation.fillMode=kCAFillModeForwards;
    animation.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
    animation.autoreverses=YES;
    
    [self.ViewTest.layer
addAnimation:animation forKey:@"opacityTimes"];
    
}
/**************************************************************************/
//路径动画

-(void)keyframeAniamtion:(CGMutablePathRef)path durTimes:(float)time Rep:(float)repeatTimes
{
    
}

//在视图中画一条线
-(void)drawACurvedLine
{
    UIGraphicsBeginImageContext(CGSizeMake(320,
460));
    CGContextRef context =
UIGraphicsGetCurrentContext();
    
    CGContextSetLineWidth(context,
3);
    CGContextSetStrokeColorWithColor(context, [UIColor
blueColor].CGColor);
    //设置起点
    CGContextMoveToPoint(context,
10, 10);
    
    CGContextAddQuadCurveToPoint(context,
10, 450,
310, 450);
    //CGContextAddQuadCurveToPoint(context, 310, 10, 10, 10);
    
    //划线
    CGContextDrawPath(context,
kCGPathStroke);
    
    //得到一个image
从目前的矢量上下文
    UIImage *curve =
UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    UIImageView *curveView = [[UIImageView
alloc]initWithImage:curve];
    curveView.frame =
CGRectMake(1,
1, 320,
460);
    [curveView setBackgroundColor:[UIColor
clearColor]];
    [self.view
addSubview:curveView];
}

-(void)animateCicleAlongPath
{
    //准备关键帧动画
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"position"];
//    pathAnimation.calculationMode = kCAAnimationPaced;
    pathAnimation.calculationMode =
kCAAnimationLinear;
    pathAnimation.fillMode =
kCAFillModeForwards;
    pathAnimation.removedOnCompletion =
NO;
    pathAnimation.duration =
5.0f;
    pathAnimation.repeatCount =
200;
    pathAnimation.autoreverses =
YES; //原路返回，而不是从头再来
    //设置动画路径
    //CGPoint endPoint = CGPointMake(310, 450);
    CGMutablePathRef curvedPath =
CGPathCreateMutable();
    CGPathMoveToPoint(curvedPath,
NULL, 10,
10);
    CGPathAddQuadCurveToPoint(curvedPath,
NULL, 10,
450, 310,
450);
    CGPathAddQuadCurveToPoint(curvedPath,
NULL, 310,
10, 10,
10);
    //已经有了路径，我们要告诉动画 
路径
    pathAnimation.path = curvedPath;
    CGPathRelease(curvedPath); 
//这里要手工释放
    
    _shapeLayer.path = curvedPath;
    [self.view.layer
addSublayer:_shapeLayer];
    
    [self.ViewTest.layer
addAnimation:pathAnimation
forKey:nil];
    
}

- (void)initScaleLayer{
    CALayer *scaleLayer = [CALayer
new];
    scaleLayer.backgroundColor = [UIColor
blueColor].CGColor;
    scaleLayer.frame =
CGRectMake(60,
20 + KYOffset,
50, 50);
    scaleLayer.cornerRadius =
10;
    [self.view.layer
addSublayer:scaleLayer];
    
    CABasicAnimation *scaleAnimation = [CABasicAnimation
animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber
numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber
numberWithFloat:1.5];
    scaleAnimation.autoreverses =
YES;
    scaleAnimation.fillMode =
kCAFillModeForwards;
    scaleAnimation.repeatCount =
MAXFLOAT;
    scaleAnimation.duration =
0.8;
    
    [scaleLayer addAnimation:scaleAnimation
forKey:@"scaleAnimation"];
}

- (void)animationByOrder//animationBySequence
{
    
    CABasicAnimation *posAnimation = [CABasicAnimation
animationWithKeyPath:@"position"];
    posAnimation.fromValue = [NSValue
valueWithCGPoint:CGPointMake(50,
50)];
    posAnimation.toValue = [NSValue
valueWithCGPoint:CGPointMake(300,
300)];
    // Here's the important part
    [posAnimation setDuration:5.0];
    [posAnimation setBeginTime:0.0];
    posAnimation.fillMode =
kCAFillModeForwards;//当动画完成时，保留在动画结束的状态
//    posAnimation.duration = 3.0f;
//    posAnimation.repeatCount = 1;
    //animation.removedOnCompletion = NO; //完成后是否回到原来状态，如果为NO
就是停留在动画结束时的状态
    //animation.fillMode = kCAFillModeRemoved;//动画完成后返回到原来状态
    //animation.fillMode = kCAFillModeBackwards;

    
    
//    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
//    [posAnimation setFromValue:[NSNumber numberWithFloat:0.0]];
//    [posAnimation setToValue:[NSNumber numberWithFloat:1.0]];
//    // Here's the important part
//    [posAnimation setDuration:10.0];
//    [posAnimation setBeginTime:0.0];
    
    CABasicAnimation *borderWidthAnimation = [CABasicAnimation
animationWithKeyPath:@"borderWidth"];
    [borderWidthAnimation setFromValue:[NSNumber
numberWithFloat:0.0]];
    [borderWidthAnimation setToValue:[NSNumber
numberWithFloat:20.0]];
    // Here's the important part
    [borderWidthAnimation setDuration:10.0];
    [borderWidthAnimation setBeginTime:5.0];
                                                   
//kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseInEaseOut
    borderWidthAnimation.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionLinear];
    
    CAAnimationGroup *group = [CAAnimationGroup
animation];
    [group setDuration:10.0];
    [group setAnimations:[NSArray
arrayWithObjects:posAnimation, borderWidthAnimation,
nil]];
    
    [self.ViewTest.layer
addAnimation:group forKey:nil];
    self.ViewTest.layer.borderColor
= [UIColor yellowColor].CGColor;
}

/**************************************************************************/
- (void)didReceiveMemoryWarning
{
    [super
didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end