IOS动画简介

来源:互联网 发布:matlab支持c语言吗 编辑:程序博客网 时间:2024/05/29 06:59
IOS 动画学习(以一个开发者使用的角度编写)

首先从基础开始了解 ,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); 

0 0
原创粉丝点击