iOS动画效果-CABasicAnimation- 关键帧动画

使用需要导入QuartzCore.framework

1.定义imageView，并初始化

    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 40, 60, 60)];
    _imageView.layer.cornerRadius = 10;
    _imageView.clipsToBounds = YES;
    _imageView.userInteractionEnabled = YES;
    _imageView.image = [UIImage imageNamed:@"1.jpg"];
    [self.view addSubview:_imageView];
    
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(Click)];
    [_imageView addGestureRecognizer:tap];

2.在click方法里实现CABasicAnimation动画

 CABasicAnimation *myAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    myAnim.duration = 3.0;
    myAnim.fromValue = [NSNumber numberWithFloat:0.25f];
    myAnim.toValue = [NSNumber numberWithFloat:1.0f];
    myAnim.cumulative = YES;
    myAnim.repeatCount = 1;
    [_imageView.layer addAnimation:myAnim forKey:@"animateOpacity"];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 6.0;
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(180, 200))];
    [_imageView.layer addAnimation:animation forKey:@"animateTransform"];

opacity为layer层的透明度,transform为移动的效果

CGAffineTransformMakeTranslation为仿射变换，设置一些偏移，不能直接用于动画，需要转换为3D变换

第5行为控制从fromValue到toValue之后是否再次循环，设置为YES为表示一直是toValue的值

第六行为循环的次数

3.在click方法里实现关键帧动画

CAKeyframeAnimation *opAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opAnim.duration = 6.0f;
    opAnim.values = [NSArray arrayWithObjects:
                        [NSNumber numberWithFloat:0.25],
                        [NSNumber numberWithFloat:0.75],
                        [NSNumber numberWithFloat:1.0f], nil];
    opAnim.keyTimes = [NSArray arrayWithObjects:
                        [NSNumber numberWithFloat:0.0f],
                        [NSNumber numberWithFloat:0.8f],
                        [NSNumber numberWithFloat:1.0f], nil];
    [_imageView.layer addAnimation:opAnim forKey:@"animateOpacity"];
    
    CABasicAnimation *tranAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    tranAnim.duration = 6.0f;
    tranAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(200, 200))];
    [_imageView.layer addAnimation:tranAnim forKey:@"animateTransform"];

第三行设置关键帧的值，第7行为关键帧的持续时间，取值为0.0-1.0

可以添加tranAnim的代理方法实现位置的移动

tranAnim.delegate = self;

实现代理

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    CGRect frame = CGRectMake(40+200, 40+200, 60, 60);

    _imageView.frame = frame;

}

虽然动画显示的图片位置移动了，其实还在那个位置，为了使用户体验好一些，可以在代理方法中取消点击事件

- (void)animationDidStart:(CAAnimation *)anim {

    _imageView.userInteractionEnabled = NO;

}

在结束的代理中再次可以点击

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    _imageView.userInteractionEnabled = YES;

    CGRect frame = CGRectMake(40+200, 40+200, 60, 60);

    _imageView.frame = frame;

}

 4.定义动画的路径信息

 在view的方法里，是先调用自己的方法（包括自己对外暴露的），之后再调用—(void)drawRect:(CGRect)rect方法，现在方法里定义

　　_image = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
    _image.backgroundColor = COLOR_Red;
    _image.layer.cornerRadius = 5;
    [self addSubview:_image];
    
    CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration=10.5f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount=HUGE_VALF;// repeat forever
    animation.calculationMode = kCAAnimationCubicPaced;
    animation.path = thePath;
    
    thePath = CGPathCreateMutable();
    animation.path = thePath;
    [_image.layer addAnimation:animation forKey:@"position"];

其中，定义CGContextRef context; CGMutablePathRef thePath;

- (void)drawRect:(CGRect)rect
{

    CGContextRef theContext = UIGraphicsGetCurrentContext();
    
    CGPathMoveToPoint(thePath, NULL, 10.0f, 75.0f);
    CGPathAddQuadCurveToPoint(thePath, nil, 15, 45, 34, 33);
    CGPathAddQuadCurveToPoint(thePath, nil, 60, 30, 65, 60);
    CGPathAddQuadCurveToPoint(thePath, nil, 55, 80, 58, 65);
    
    CGContextBeginPath(theContext);
    CGContextAddPath(theContext, thePath);
    CGContextSetStrokeColorWithColor(theContext, [UIColor greenColor].CGColor);
    CGContextSetLineWidth(theContext, 3);
    CGContextSetLineDash(theContext, 0, (CGFloat[]){5, 2}, 2);
    CGContextStrokePath(theContext);
    CFRelease(thePath);
}

添加路径的方式有

CGPathAddArc
CGPathAddRelativeArc
CGPathAddArcToPoint
CGPathAddCurveToPoint
CGPathAddLines
CGPathAddLineToPoint
CGPathAddPath
CGPathAddQuadCurveToPoint
CGPathAddRect
CGPathAddRects
CGPathAddRoundedRect
CGPathApply
CGPathMoveToPoint
CGPathCloseSubpath
CGPathAddEllipseInRect