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

使用需要导入QuartzCore.framework

1.定义imageView，并初始化

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

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

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

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

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

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

第六行为循环的次数

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

 1 CAKeyframeAnimation *opAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
 2     opAnim.duration = 6.0f;
 3     opAnim.values = [NSArray arrayWithObjects:
 4                         [NSNumber numberWithFloat:0.25],
 5                         [NSNumber numberWithFloat:0.75],
 6                         [NSNumber numberWithFloat:1.0f], nil];
 7     opAnim.keyTimes = [NSArray arrayWithObjects:
 8                         [NSNumber numberWithFloat:0.0f],
 9                         [NSNumber numberWithFloat:0.8f],
10                         [NSNumber numberWithFloat:1.0f], nil];
11     [_imageView.layer addAnimation:opAnim forKey:@"animateOpacity"];
12     
13     CABasicAnimation *tranAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
14     tranAnim.duration = 6.0f;
15     tranAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(200, 200))];
16     [_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