ios开发 各种动画效果
.h文件中
@interface ViewController:UIViewController { IBOutlet UIImageView *imageView; }
一、UIView 简单的动画效果（UIViewAnimation）
1.向上翻页
[UIView beginAnimations:@"animationID" context:nil]; [UIView setAnimationDuration:8]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; [UIWindow setAnimationsEnabled:YES]; //[UIView setAnimationRepeatAutoreverses:YES]; //自动恢复 setAnimationDidStopSelector:@selector(finishedFading)]; //动画结束完成的事件
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:imageView cache:YES]; [UIView commitAnimations];
2.向下翻页
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:imageView cache:YES];
3.向左翻页
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:imageView cache:YES];
4.向右翻页
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:imageView cache:YES];
二、特殊动画(CATrasition)
首先，导入QuartzCore.framework
然后，
#include <QuartzCore/QuartzCore.h>
1.立方体效果
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"cube"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey"];
2.推出
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:kCATransitionPush]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"animationKey"];
3.揭开
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:kCATransitionReveal]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey"];
4.覆盖
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:kCATransitionMoveIn]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey"];
5.淡出
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut [transtion setType:kCATransitionFade]; [transtion setSubtype:kCATransitionFromTop]; [imageView setImage:[UIImage imageNamed:@"img.jpg"]]; [imageView.layer addAnimation:transtion forKey:@"animationkey"];
6.吸收
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"suckEffect"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey
7.翻转
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"oglFlip"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey];
8.波纹
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"rippleEffect"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey];
9.镜头开
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"cameraIrisHollowOpen"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey];
10.镜头关
CATransition *transtion = [CATransition animation]; // [transtion setStartProgress:0.5]; // [transtion setEndProgress:0.6]; transtion.duration = 5; [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [transtion setType:@"cameraIrisHollowClose"]; [transtion setSubtype:kCATransitionFromTop]; [imageView.layer addAnimation:transtion forKey:@"transtionKey];
11.比例缩放
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; [basic setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; [basic setFromValue:[NSNumber numberWithFloat:1]]; [basic setToValue:[NSNumber numberWithFloat:.3]]; [basic setDuration:2]; //[basic setDelegate:self]; [imageView.layer addAnimation:basic forKey:@"animationKey"];
12.透明
CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"opacity"]; [basic1 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; [basic1 setFromValue:[NSNumber numberWithFloat:1]]; [basic1 setToValue:[NSNumber numberWithFloat:.3]]; [basic1 setDuration:2]; [imageView.layer addAnimation:basic1 forKey:@"animationKey"];
13.边框闪动
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"borderWidth"]; keyframe.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0], [NSNumber numberWithFloat:5], [NSNumber numberWithFloat:10], [NSNumber numberWithFloat:15],nil]; keyframe.repeatCount = MAXFLOAT; keyframe.autoreverses = YES; keyframe.duration = 2; [imageView.layer addAnimation:keyframe forKey:@"animationKey"];
14.位置
UIBezierPath *path = [UIBezierPath bezierPath]; //[path moveToPoint:image.frame.origin]; [path moveToPoint:CGPointMake(imageView.frame.origin.x + imageView.frame.size.width/2, imageView.frame.origin.y + imageView.frame.size.height/2)]; [path addLineToPoint:CGPointMake(imageView.frame.origin.x + imageView.frame.size.width/2,400)]; [path addLineToPoint:CGPointMake(20, 400)]; CAKeyframeAnimation *keyframe1 = [CAKeyframeAnimation animationWithKeyPath:@"position"]; keyframe.path = path.CGPath; keyframe.duration = 2; [imageView.layer addAnimation:keyframe1 forKey:@"animationKey"];
15.动画组
CAAnimationGroup *group = [CAAnimationGroup animation]; CABasicAnimation *basic2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; [basic2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; [basic2 setFromValue:[NSNumber numberWithFloat:1]]; [basic2 setToValue:[NSNumber numberWithFloat:.3]]; CAKeyframeAnimation *keyframe2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.x"]; keyframe2.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:M_PI], nil]; [group setDuration:2]; [group setAnimations:[NSArray arrayWithObjects:basic2,keyframe2, nil]]; [imageView.layer addAnimation:group forKey:@"animationKey"];
三、其他(CATransfrom3D)
1.UIView
[UIView animateWithDuration:animationDuration.value animations:^{ [UIView setAnimationRepeatCount:MAXFLOAT]; [UIView setAnimationRepeatAutoreverses:enableAnimation.isOn]; CATransform3D transform = CATransform3DMakeTranslation(0, -150, 0); CATransform3D trans = CATransform3DScale(transform, 1.5, 1.5, 10); [label.layer setTransform:trans]; } completion:^(BOOL finished) { animationDurationLabel.text = @"finished"; }]; }
2.Base
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; [basic setDuration:animationDuration.value]; [basic setRepeatCount:MAXFLOAT]; [basic setAutoreverses:enableAnimation.isOn]; NSValue *valueForm = [NSValue valueWithCATransform3D:CATransform3DIdentity]; CATransform3D transTo = CATransform3DMakeScale(.5, .5, 0); NSValue *valueTo = [NSValue valueWithCATransform3D:transTo]; [basic setFromValue:valueForm]; [basic setToValue:valueTo]; [imageView.layer addAnimation:basic forKey:AnimationKey]; }
3.Keyframe
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; [keyframe setRepeatCount:MAXFLOAT]; [keyframe setDuration:animationDuration.value]; [keyframe setAutoreverses:enableAnimation.isOn]; CATransform3D transForm = CATransform3DIdentity; CATransform3D transTo = CATransform3DMakeScale(.5, .5, 0); NSValue *valueForm = [NSValue valueWithCATransform3D:transForm]; NSValue *valueTo = [NSValue valueWithCATransform3D:transTo]; [keyframe setValues:[NSArray arrayWithObjects:valueTo,valueForm,nil]]; [imageView.layer addAnimation:keyframe forKey:AnimationKey]; }
4.Affine
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"]; [basic setRepeatCount:MAXFLOAT]; [basic setDuration:animationDuration.value]; [basic setAutoreverses:enableAnimation.isOn]; NSValue *valueForm = [NSValue valueWithCATransform3D:CATransform3DIdentity]; CGAffineTransform affine = CGAffineTransformMakeTranslation(0, -150); CATransform3D t = CATransform3DMakeAffineTransform(affine); CATransform3D trans = CATransform3DScale(t, 1.5, 1.5, 10); NSValue *valueTo = [NSValue valueWithCATransform3D:trans]; [basic setFromValue:valueForm]; [basic setToValue:valueTo]; [label.layer addAnimation:basic forKey:AnimationKey]; }
注：判断动画完成的事件用代理；
设置transition.delegated = self;
1.如果要判断是哪个动画的结束，我们要在响对应的动画设置键值。
[transtion setValue:@"an2" forKey:@"animationKey"];
2.然后，在didstop回调中获取
-(void)animationDidStart:(CAAnimation *)anim{ animationDurationLabel.text = @"开始动画"; } -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ NSString* value = [anim valueForKey:@"animationKey"]; if ([value isEqualToString:@"an1"]) { return; } animationDurationLabel.text = @"动画完毕"; }
在UIView中调用结束的方法：
[UIView setAnimationDidStopSelector:@selector(animationDidStop1:finished:context:)]; -(void)animationDidStop1:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context { [self turnBig]; }