码迷,mamicode.com
首页 > 移动开发 > 详细

iOS动画

时间:2016-10-31 21:16:31      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:let   image   ogr   1.2   off   并且   media   animation   frame   

=====================================================================

iOS中有一种动画叫序列帧动画。把一系列图片放在数组中,通过播放图片产生动画效果。

=================================================================

//播放动画的方法

-(void)startMyAnimat:(NSInteger)count name:(NSString*)name{

    

    //判断当前是否有动画在播放

    if (self.tomImage.isAnimating) return;

    //创建一个不可变的数组用于接收需要播放的图片

    NSMutableArray* animatArray = [NSMutableArray array];

    

    //通过循环给数组赋值

    for (int i = 0; i<count; i++) {

        //设置图片名字

        NSString* imageName = [NSString stringWithFormat:@"%@_%02tu",name,i];

        //设置图片地址

        NSBundle* bundle = [NSBundle mainBundle];

        NSString* path = [bundle pathForResource:imageName ofType:@"jpg"];

        UIImage* image = [UIImage imageWithContentsOfFile:path];

        //将图片写入数组

        [animatArray addObject:image];

        

    }

    //将图片数组赋值给animationImages

    self.tomImage.animationImages = animatArray;

    //设置运行次数

    self.tomImage.animationRepeatCount = 1;

    //设置播放时间

    self.tomImage.animationDuration = self.tomImage.animationImages.count*0.05;

    //动画开始

    [self.tomImage startAnimating];

    //设置一个动画时常的延迟,当动画播放完毕就将加载的图片清出内存

    [self performSelector:@selector(removeArray) withObject:nil afterDelay:self.tomImage.animationDuration];       

}

=======================================================================

iOS中有一种动画叫UIView动画。线性动画可以轻松胜任。复杂的动画也是有的,叫做关键帧动画。

********************************线性动画*********************************************

UIView的一般写法:

 [UIView beginAnimations:nil context:nil];

   //执行动画,动画执行时间

  [UIView setAnimationDuration:2.0];

  // 设置代理

  [UIView setAnimationDelegate:self];

 // 设置动画执行完毕调用的事件

  [UIView setAnimationDidStopSelector:@selector(didStopAnimation)];

   self.myView.center = CGPointMake(200, 300);

   [UIView commitAnimations]; 

UIView的Block写法:

 [UIView animateWithDuration:3 animations:^{

        self.myView.center = CGPointMake(200, 300);

    } completion:^(BOOL finished) {

        [self didStopAnimation];

    }];

 *****************************************关键帧动画********************************************

void (^keyFrameBlock)() = ^(){

        // 创建颜色数组

        NSArray *arrayColors = @[[UIColor orangeColor],

                                 [UIColor yellowColor],

                                 [UIColor greenColor],

                                 [UIColor blueColor],

                                 [UIColor purpleColor],

                                 [UIColor redColor]];

        NSUInteger colorCount = [arrayColors count];

        // 循环添加关键帧

        for (NSUInteger i = 0; i < colorCount; i++) {

      // 添加关键帧的方法

            [UIView addKeyframeWithRelativeStartTime:i / (CGFloat)colorCount

                                    relativeDuration:1 / (CGFloat)colorCount

                                          animations:^{

                                              [_myView setBackgroundColor:arrayColors[i]];

                                          }];

        }

    };

 // 执行动画的方法

    [UIView animateKeyframesWithDuration:4.0

                                   delay:0.0

                                 options:UIViewKeyframeAnimationOptionCalculationModeCubic | UIViewAnimationOptionCurveLinear

                              animations:keyFrameBlock

                              completion:^(BOOL finished) {

                                  // 动画完成后执行

                              }];

   

================================================================================================

iOS中的还有一种动画叫核心动画,Core Animation(跨平台),来自QuartzCore.framework,超级的强大。可以做各种超级炫的动画,UIView动画搞不定的它都可以搞定。

================================================================================================

技术分享

CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类。

常见属性有:

duration:动画的持续时间

repeatCount:动画的重复次数

timingFunction:控制动画运行的节奏

说明:(1)能用的动画类只有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

     (2)CAMediaTiming是一个协议(protocol)。

CAPropertyAnimation是CAAnimation的子类,但是不能直接使用,要想创建动画对象,应该使用它的两个子类:CABasicAnimation和CAKeyframeAnimation

它有个NSString类型的keyPath属性,你可以指定CALayer的某个属性名为keyPath,并且对CALayer的这个属性的值进行修改,达到相应的动画效果。比如,指定@"position"为keyPath,就会修改CALayer的position属性的值,以达到平移的动画效果

=============================================================================================================

核心动画的序列帧动画(CAKeyFrameAnimation):

*********************

//创建核心动画

    CAKeyframeAnimation *keyAnim = [CAKeyframeAnimation animation];

    // 平移

    keyAnim.keyPath = @"position";

    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(200, 100)];

    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];

    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

    

    keyAnim.values = @[value1,value2,value3,value4,value5];

    //设置动画执行完毕后不删除动画

    keyAnim.removedOnCompletion = NO;

    // 设置保存动画的最新状态

    keyAnim.fillMode = kCAFillModeForwards;

    //设置动画执行的时间

    keyAnim.duration = 4.0;

    //设置动画的节奏

    keyAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    // 设置代理 开始-结束

    keyAnim.delegate = self;

    // 添加核心动画

    [self.myView.layer addAnimation:keyAnim forKey:nil];

 =================================================

核心动画的组动画(CAAnimationGroup):

********************************

CAAnimationGroup*group = [[CAAnimationGroupalloc]init];
   
   //向动画组中添加动画
   //路径动画
   CAKeyframeAnimation*anim1 = [CAKeyframeAnimationanimationWithKeyPath:@"position"];
    anim1.path= [UIBezierPathbezierPathWithOvalInRect:CGRectMake(60,100,200,200)].CGPath;
   
   //旋转动画
   CABasicAnimation*anim2 = [CABasicAnimationanimationWithKeyPath:@"transform.rotation"];
    anim2.toValue=@(M_PI*10);
   
   //缩放动画
   CABasicAnimation*anim3 = [CABasicAnimationanimationWithKeyPath:@"transform.scale"];
    anim3.fromValue=@(1.0f);
    anim3.toValue=@(0.1f);
   
    group.animations=@[anim1, anim2, anim3];
   
   //动画时长,一组动画整体完成的时间
    group.duration=2.0f;

    [self.myView.layeraddAnimation:groupforKey:nil];

====================================================================

核心动画CABasicAnimation(基本动画)

CABasicAnimation *anima=[CABasicAnimation animation];

//1.1告诉系统要执行什么样的动画

 anima.keyPath=@"position";

//设置通过动画,将layer从哪儿移动到哪儿

 anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];

 anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];

//1.2设置动画执行完毕之后不删除动

anima.removedOnCompletion=NO;

//1.3设置保存动画的最新状态

anima.fillMode=kCAFillModeForwards;

//2.添加核心动画到layer

 [self.myLayer addAnimation:anima forKey:nil]; 

=====================================================

核心动画转场动画(CATransition)

****************************************

- (IBAction)preClick:(id)sender {

    

    self.index --;

    if (self.index < 1) {

        self.index = 7;

}

    self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",self.index]];

    

    // 创建核心动画

    CATransition *ca = [CATransition animation];

    //要执行什么动画 设置过渡效果

    ca.type = @"cube";

    // 设置动画的过度方向

    ca.subtype = kCATransitionFromLeft;

    //设置动画时间

    ca.duration = 2.0;

    // 添加动画

    [self.imageView.layer addAnimation:ca forKey:nil];

    

    

}

 

- (IBAction)nextClick:(id)sender {

    self.index++;

    if (self.index > 7) {

        self.index = 1;

    }

    self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",self.index]];

    //创建核心动画

    CATransition *ca = [CATransition animation];

    //要执行什么动画

    ca.type = @"cube";

    // 设置动画的过度方向

    ca.subtype = kCATransitionFromRight;

    //设置动画的时间

    ca.duration = 2.0;

    //设置动画的起点

    ca.startProgress = 0.5;

    // 添加动画

    [self.imageView.layer addAnimation:ca forKey:nil];

   }

综上,iOS中的动画主要有序列帧动画,核心动画,UIView动画。

 

iOS动画

标签:let   image   ogr   1.2   off   并且   media   animation   frame   

原文地址:http://www.cnblogs.com/peteremperor/p/6017002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!