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