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

使用需要导入QuartzCore.framework

1.定义imageView,并初始化

iOS动画效果-CABasicAnimation- 关键帧动画
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];
iOS动画效果-CABasicAnimation- 关键帧动画

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

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

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

第六行为循环的次数

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

iOS动画效果-CABasicAnimation- 关键帧动画
 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"];
iOS动画效果-CABasicAnimation- 关键帧动画

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

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

tranAnim.delegate = self;

实现代理

iOS动画效果-CABasicAnimation- 关键帧动画
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

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

    _imageView.frame = frame;

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

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

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

    _imageView.userInteractionEnabled = NO;

}

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

iOS动画效果-CABasicAnimation- 关键帧动画
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    _imageView.userInteractionEnabled = YES;

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

    _imageView.frame = frame;

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

 

 

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

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

上一篇:1-认识微信小程序


下一篇:分享一个最近研究的手机QQ3.0的协议(版本1.4)