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

浏览数：240 / 时间：2015年06月11日

使用需要导入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;

}