首页 > 移动平台 > 详细

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

时间:2014-04-07 10:46:24      阅读:603      评论:0      收藏:0      [点我收藏+]

使用需要导入QuartzCore.framework

1.定义imageView,并初始化

bubuko.com,布布扣
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];
bubuko.com,布布扣

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

bubuko.com,布布扣
 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"];
bubuko.com,布布扣
opacity为layer层的透明度,transform为移动的效果
CGAffineTransformMakeTranslation为仿射变换,设置一些偏移,不能直接用于动画,需要转换为3D变换

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

第六行为循环的次数

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

bubuko.com,布布扣
 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"];
bubuko.com,布布扣

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

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

tranAnim.delegate = self;

实现代理

bubuko.com,布布扣
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

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

    _imageView.frame = frame;

}
bubuko.com,布布扣

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

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

    _imageView.userInteractionEnabled = NO;

}

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

bubuko.com,布布扣
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    _imageView.userInteractionEnabled = YES;

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

    _imageView.frame = frame;

}
bubuko.com,布布扣

 

 

iOS动画效果-CABasicAnimation- 关键帧动画,布布扣,bubuko.com

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

原文:http://www.cnblogs.com/xiaochaozi/p/3648475.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!