首先从基础开始了解 ,IOS提供的基础动画类是Core Animation,在其下还有OpenGLES/OpenGL 与Core Graphics,而在最底层则是Graphics Hardware,这里我们只看Core Animation。
一.什么是Core Animation
Core Animation是一套包含图形绘制,投影,动画的OC类集合,是对OpenGLES/OpenGL 与Core Graphics底层的封装。
二.动画原理
动画实际上就是一个物体沿着事先设定好的路径运动
在IOS中,给定的物体就是Layer ;
设定路径使用CAAnimation
3.CAAnimationGroup
Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。一个layer设定了很多动画,他们都会同时执行,如何按顺序执行我到时候再讲。
4.CATransition
这个就是苹果帮开发者封装好的一些动画。
最后开始动画即可
5.Layer属性简单介绍
1. shadowPath : 设置 CALayer 阴影的位置
2. shadowOffset : 阴影 在 X 和 Y 轴 上延伸的方向,即 阴影 的大小
3. shadowOpacity : 阴影 的透明效果
4. shadowRadius : 阴影的渐变距离,从外围开始,往里渐变 shadowRadius 距离
5. masksToBounds : 很重要的属性,可以用此属性来防止子元素大小溢出父元素,如若防止溢出,请设为 true
6. borderWidth 和 boarderColor : 边框颜色和宽度,很常用
7. bounds : 对于我来说比较难的一个属性,测了半天也没完全了解,只知道可以用来控制 UIView 的大小,但是不能控制 位置
8. opacity : UIView 的透明效果
9. cornerRadius : UIView 的圆角
三.开始使用(在使用前要确定加入头文件<QuartzCore/QuartzCore.h>)
1.简单的CABasicAnimation动画(通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。)
//首先初始化层 CALayer *myLayer=[[CALayer alloc]init];
myLayer.backgroundColor = [[UIColor grayColor]CGColor];
myLayer.frame = CGRectMake(10, 10, 40, 40);
myLayer.cornerRadius = 5;// 圆角处理
[self.view.layer addSublayer:myLayer]; // 增加到UIView的layer上面
// 移动myLayer的position(方向由Y/X轴的距离比来确定)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:myLayer.position];
CGPoint toPoint = myLayer.position; //物体移动起始点
toPoint.x += 180;//X/Y轴移动距离
toPoint.y+= 180;//
animation.toValue = [NSValue valueWithCGPoint:toPoint];//物体移动终点
// 以X/Y轴进行旋转
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x/y“];//设定旋转轴
rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];//起始角度
rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];//旋转角度
// 进行放大缩小
CABasicAnimation * scanleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.x/y“]; //设定放大缩小方向
scanleAnimation.duration = 3;//动画时间
scanleAnimation.autoreverses = YES;//完成后反向完成
scanleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scanleAnimation.toValue = [NSNumber numberWithFloat:2.5];//放大倍数
scanleAnimation.fillMode = kCAFillModeForwards;//设定动画结束后的状态
// 把上面的动画组合起来(如果想要把上面的动画结合起来,那么就需要使用CAAnimationGroup)
CAAnimationGroup *group = [CAAnimationGroup animation];
group.autoreverses = YES;// 完成后反向完成
group.duration = 3.0;//动画时间
group.animations = [NSArray arrayWithObjects:animation,rotateAnimation, scanleAnimation, nil];
group.repeatCount = 10;//动画重复次数
// PS:动画结束以后,他会返回到自己原来的frame,如果不想到原来frame我们需要设定
group.fillMode = kCAFillModeForwards;//设定动画结束后的状态
最后添加动画
[myLayer addAnimation:group forKey:@"myLayer”];开始动画的执行
2.关键帧动画CAKeyframeAnimation(Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动。)
1. path
这是一个 CGPathRef 对象,默认是空的,当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个自己定义的path来让 某一个物体按照这个路径进行动画。这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖
2. values
一个数组,提供了一组关键帧的值, 当使用path的 时候 values的值自动被忽略。
myRectLayer = [[CALayer alloc] init];
myRectLayer.frame = CGRectMake(15, 200, 30, 30);
myRectLayer.cornerRadius = 15;
myRectLayer.backgroundColor = [[UIColor blackColor] CGColor];
[self.view.layer addSublayer:myRectLayer];
CAKeyframeAnimation *rectRunAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设定关键帧位置,必须含起始与终止位置(物体(layer)按顺序依次从上一个点沿着直线移动到下一个点,直到最后)
//用Values制作动画
rectRunAnimation.values = @[[NSValue valueWithCGPoint:rectLayer.frame.origin],
[NSValue valueWithCGPoint:CGPointMake(320 - 15,rectLayer.frame.origin.y)],
[NSValue valueWithCGPoint:CGPointMake(320 - 15,rectLayer.frame.origin.y + 200)],
[NSValue valueWithCGPoint:CGPointMake(15, rectLayer.frame.origin.y + 200)],
[NSValue valueWithCGPoint:rectLayer.frame.origin]];
/*用路径制作动画
//初始化路径
CGMutablePathRef myPath=CGPathCreateMutable();
//动画起始点
CGPathMoveToPoint(myPath, nil, 15, 200);
CGPathAddCurveToPoint(myPath, nil,
320-15, 400,//控制点
320-15, 400,//控制点
15, 200);//控制点
rectRunAnimation.path=myPath;
*/
//设定到达每一个点的时间点,物体移动速度为两个点之间时间差的倒数
rectRunAnimation.keyTimes = @[[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:0.7],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1]];
rectRunAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
rectRunAnimation.repeatCount = 1000;
rectRunAnimation.autoreverses = NO;
rectRunAnimation.calculationMode = kCAAnimationLinear;
/*calculationMode
这个属性用来设定 关键帧中间的值是怎么被计算的
可选的值有
NSString * const kCAAnimationLinear;
NSString * const kCAAnimationDiscrete; 只展示关键帧的状态,没有中间过程,没有动画。
NSString * const kCAAnimationPaced;
NSString * const kCAAnimationCubic;
NSString * const kCAAnimationCubicPaced;
*/
rectRunAnimation.duration = 4;//动画时间
[myRectLayer addAnimation:rectRunAnimation forKey:@"rectRunAnimation"];
四.UIView动画(指页面切换过渡效果的动画)
基本方式UIView类的扩展类UIViewAnimation
发出beginAnimations:context:请求标志着动画块的开始;commitAnimations标志着动画块的结束。
把这两个类方法发送给UIView而不是发送给单独的视图。在这两个调用之间的可定义动画的展现方式并更新视图。
函数说明:
//开始准备动画
+ (void)beginAnimations:(NSString *)animationID context:(void *)context;
//运行动画
+ (void)commitAnimations;
[UIView beginAnimations:nil context:nil];
//setAnimationCurve来定义动画加速或减速方式
[UIView setAnimaitonCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:时长]; //动画时长
[UIView setAnimationTransition:翻转方向 forView:self.view cache:YES];
[self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];//切换视图
[UIView commitAnimations];//结束动画
CGContextRef context = UIGraphicsGetCurrentContext(); //返回当前视图堆栈顶部的图形上下文
[UIView beginAnimations:nil context:context];
[UIView setAnimaitonCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];
[contextView setAlpha:0.0f];
[UIView commitAnimations];
/*
UIView类本身提供四种过渡翻转效果
UIViewAnimationTransitionNone 正常
UIViewAnimationTransitionFlipFromLeft 从左向右翻
UIViewAnimationTransitionFlipFromRight 从右向左翻
UIViewAnimationTransitionCurlUp 从下向上卷
UIViewAnimationTransitionCurlDown 从上向下卷
*/
core方式:使用CATransition类
iPhone还支持Core Animation作为其QuartzCore架构的一部分,CA API为iPhone应用程序提供了高度灵活的动画解决方案。但是须知:CATransition只针对图层,不针对视图。
图层是Core Animation与每个UIView产生联系的工作层面。使用Core Animation时,应如果食用CATransition应该应用到视图的默认图层 (layer)而不是视图(View)本身。
使用CATransition类实现动画,只需要建立一个Core Animation对象,设置它的参数,然后把这个带参数的过渡添加到图层即可。
CATransition *transition = [CATransition animation];//初始化
transition.duration = 0.7;//动画时间
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionMoveIn;//动画过渡种类(淡化、推挤、揭开、覆盖)
/*动画类型
kCATransitionMoveIn,
kCATransitionPush,
kCATransitionReveal,
kCATransitionFade
*/
//更多私有{@"cube",@"suckEffect",@"oglFlip",@"rippleEffect",@"pageCurl",@"pageUnCurl",@"cameraIrisHollowOpen",@"cameraIrisHollowClose"};
动画类型有(立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关)。
transition.subtype = kCATransitionFromLeft;//翻转方向
/*翻转方向
kCATransitionFromLeft,
kCATransitionFromRight,
kCATransitionFromTop,
kCATransitionFromBottom
*/
transition.delegate = self;//设置代理
[self.view.layer addAnimation:transition forKey:nil];//动画必须添加到layer层
[self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];//实际要做的内容
block方式:UIViewAnimationWithBlocks扩展
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
//间隔,延迟,动画参数,界面更改块,结束块
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);