Animation的制作-5种类型

作者: IIronMan | 来源:发表于2016-05-13 07:18 被阅读1038次

    1.最简单的动画(view的移动或者View的缩小与放大)

    - (void)viewDidLoad {
       [super viewDidLoad];
       view4 = [[UIView alloc]initWithFrame:CGRectMake(354, 676, 60, 60)];
       view4.backgroundColor = [UIColor yellowColor];
      [self.view addSubview:view4];
     //准备动画
    
     [UIView beginAnimations:nil context:nil];
     //给动画设置时间间隔
     [UIView setAnimationDuration:3];
     //设置动画的重复次数
     [UIView setAnimationRepeatCount:1];
     //重复执行的时候,第二次响应相反的效果
     //[UIView setAnimationRepeatAutoreverses:YES];
     [UIView setAnimationDelegate:self];
    //动画开始时,执行方法选择器选择的方法
    //[UIView setAnimationWillStartSelector:@selector(willStart)];
     [UIView setAnimationDidStopSelector:@selector(didStop)];
     view4.frame =CGRectMake(354,0, 60, 60);
    //真正开始动画
    
    [UIView commitAnimations];
    }
    

    需要注意的地方:必须挂代理,动画开始和结束的方法才会被调用,这里的代理是没有协议的,遵守的是监听动画开始和结束的方法

    2.gif动态图片的播放(TOM喝牛奶为例为例)(需要TOM资源的可以简书联系我)

    TOM产品
    - (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(15, 580, 60, 60);
    button.layer.cornerRadius = 25;
    [button addTarget:self action:@selector(milk) forControlEvents:UIControlEventTouchUpInside];
    [button setImage:[UIImage imageNamed:@"牛奶"] forState:UIControlStateNormal];
    button.clipsToBounds = YES;
    [self.view addSubview:button];
    }
    -(void)milk
    {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
        [self.view addSubview:imageView];
         NSMutableArray imagesArray = [NSMutableArray array];
        for (int index = 0; index<81; index++)
        {
            NSString *string = [NSString stringWithFormat:@"eat_%d.jpg",index];
            UIImage *image = [UIImage imageNamed:str];
            [imagesArray addObject:image];
         }
            //给iamgeView设置动画图片
            imageView.animationImages = imagesArray;
            //设置动画时间
            imageView.animationDuration = 4; 
            //设置重复次数
            imageView.animationRepeatCount =1; //设置0也表示无数次执行
            //让动画开始
            [imageView startAnimating];
            //让动画结束
            //[imageView stopAnimating];
    
     }
    

    需要注意的地方:图片的加载上是一个数组,然后把数组给动画进行播放。获取动态图片可以到百度,输入“gif图片”就可以了,下载下来,打开图片,可以看到是有很多张图片组成,统一进行改名字(便于使用)。

    3.利用Block语句进行动画(有关透明度的问题,也是一种动画)

    透明度的动画(类似下载的出现与消失)
     -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 250, 300)];
    
    label.center = self.view.center;
    label.backgroundColor = [UIColor redColor];
    [self.view addSubview:label];
    label.text = @"动画";
    label.textAlignment = NSTextAlignmentCenter;
    label.layer.cornerRadius = 10;
    label.clipsToBounds = YES;
    label.alpha = 0;
    label.backgroundColor = [UIColor greenColor];
    [self.view addSubview:label];
    
    [UIView animateWithDuration:5 animations:^{
        
        label.alpha = 1;
        
    } completion:^(BOOL finished) {
        
        [UIView animateWithDuration:5 animations:^{
            
            label.alpha = 0;
            
        } completion:^(BOOL finished) {
            
            [label removeFromSuperview];
        }];
        
    } ];
    
    }
    

    需要注意的地方:block模块方面,它的UIView animateWithDuration:5 animations:^{ label.alpha = 1;} 相当于动画的开始,completion:^(BOOL finished)后面相当于动画的结束。

    4.转场动画(其实也就是两个view之间的转换)

       #import "ViewController.h"
    
      @interface ViewController ()
       {
             UIView *view1;
             UIView *view2;
       } 
       @end
       @implementation ViewController
      - (void)viewDidLoad {
             [super viewDidLoad];
              view1 = [[UIView alloc]initWithFrame:self.view.frame];
              view1.backgroundColor = [UIColor yellowColor];
             [self.view addSubview:view1];
             view2 = [[UIView alloc]initWithFrame:self.view.frame];
             view2.backgroundColor = [UIColor greenColor];
            [self.view addSubview:view2];  
         }
    
      -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
    //1.创建一个动画对象(转场动画对象)
    
        CATransition *animation = [CATransition animation];
    
    //2.创建一个代理监听动画的开始与结束
    
        animation.delegate = self;
    
    //3.动画执行时间
    
        animation.duration = 2.0;
    
    //4.设置动画的快慢效果(四种)
         /*
           UIViewAnimationCurveEaseInOut,         // slow at beginning and end
           UIViewAnimationCurveEaseIn,            // slow at beginning
           UIViewAnimationCurveEaseOut,           // slow at end
           UIViewAnimationCurveLinear
        */
        animation.timingFunction = UIViewAnimationCurveEaseInOut;//curve |kɜːv曲线
    
       //5.设置类型
          /*
           //动画类型说明
             公有API
          kCATransitionFade 交叉淡化过渡,新视图逐渐显示在屏幕上,旧视图逐渐淡化出视野
          kCATransitionMoveIn 新视图移到旧视图上面,好像盖在上面。
          kCATransitionPush 新视图将旧视图推出去。
          kCATransitionReveal 将旧视图移开显示出下面的新视图。
          */
          animation.type =  kCATransitionPush;
          animation.type = @"cameraIrisHollowClose";//苹果私有的,下面更多详解
         //6.设置动画的子类型(动画方向)
         /*
            *kCATransitionFromRight
            *kCATransitionFromLeft
            *kCATransitionFromTop
            *kCATransitionFromBottom
         */
         animation.subtype = kCATransitionFromTop;
    
        //获取到子视图在父视图上的位置
    
         NSInteger indexOfView1 = [self.view.subviews  indexOfObject:view1];
         NSInteger indexOfView2 = [self.view.subviews  indexOfObject:view2];
    
         //在parentView执行动画的时候,调换两个视图的位置,以达到视图切换的效果
         [self.view exchangeSubviewAtIndex:indexOfView1  withSubviewAtIndex:indexOfView2];
    
          //7.将转场动画添加到self.view的图层layer
          [self.view.layer addAnimation:animation forKey:nil];
    }
    
     -(void)animationDidStart:(CAAnimation *)anim
     {
         NSLog(@"动画开始了");
    }
    
     -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
     {
        NSLog(@"动画结束了");
     }
     @end
    

    需要注意的地方:1.转场动画一定要有一个animation对象,2.type代表的是动画类型,subtype代表的是动画方向,它们的开头都是KCA记住就好了。3.获取到子视图在父视图上的位置 NSInteger indexOfView1 = [self.view.subviews indexOfObject:view1];一定要学会,在交换时不用担心view位置的变化

    5.无限轮播动画(图片一直可以滑动,左右一直无线循环)

    下面的代码大家可以复制到Xcode里面打开(自己添加几张图片,模拟一下效果)
    无限的轮播图片
       ViewController.m
       无线轮播动画
      Created by 王冲 on 16/5/12.
      Copyright © 2016年 王冲. All rights reserved.
      #import "ViewController.h"
    
      @interface ViewController ()
      {
          UIImageView *_imageView;
          int _currentIndex;
      }
      @end
      @implementation ViewController
    
    #pragma mark   1.**************(添加两个清扫手势,左右)
      
     - (void)viewDidLoad {
         
         [super viewDidLoad];
    
        _imageView = [[UIImageView alloc]initWithFrame:self.view.frame];
     
        _imageView.image = [UIImage imageNamed:@"0.jpg"];
      
        [self.view addSubview:_imageView];
    
       //要想实现左滑和右侧滑动就需要添加手势
    
        UISwipeGestureRecognizer *leftSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe)];
    
        leftSwipe.direction = UISwipeGestureRecognizerDirectionLeft;
    
        [self.view  addGestureRecognizer:leftSwipe];
    
        UISwipeGestureRecognizer *rightSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe)];
    
        rightSwipe.direction = UISwipeGestureRecognizerDirectionRight;
    
        [self.view addGestureRecognizer:rightSwipe];
    
    }
    
    #pragma mark   2.**************两个手势实现的方法
     
    -(void)leftSwipe
    {
          [self setTransition:YES];
     }
    
    -(void)rightSwipe
    {
         [self setTransition:NO];
    }
    
    #pragma mark   3.**************
    
     //真正实现转场动画
    
    -(void)setTransition:(BOOL)isNext
    
    {
         CATransition *animation = [CATransition animation];
    
         animation.duration =0.5;    //duration |djʊˈreɪʃn, 持续时间
    
        //设置动画类型type
          /*
           *动画类型说明(公有API)4种类型
           * kCATransitionFade 交叉淡化过渡,新视图逐渐显示在屏幕上,旧视图逐渐淡化出视野
           * kCATransitionMoveIn 新视图移到旧视图上面,好像盖在上面。
           * kCATransitionPush 新视图将旧视图推出去。
           * kCATransitionReveal 将旧视图移开显示出下面的新视图。
           */
         animation.type =  kCATransitionPush ;
        /*
        私有API,注意对于苹果官方没公开的动画类型只能使用字符串,并没有对应的常量定义
            animation.type =  @"cube"  //立方体效果
            animation.type =  @"suckEffect" //收缩效果,如一块布被抽走
            animation.type =  @"oglFlip"  //上下翻转效果
            animation.type =  @"rippleEffect"  //滴水效果
            animation.type =  @"pageCurl"  //向上翻一页
            animation.type =  @"pageUnCurl"  //向下翻一页
            animation.type =  @“cameralIrisHollowOpen”  //摄像头打开效果
            animation.type =  @“cameraIrisHollowClose”  //摄像头关闭效果
         */
       //设置动画的子类型subtype(动画方向)4种类型
       /*
        *kCATransitionFromRight ()
        *kCATransitionFromLeft
        *kCATransitionFromTop
        *kCATransitionFromBottom
        */
       if (isNext) {
             animation.subtype = kCATransitionFromRight;
        }else
        {
            animation.subtype = kCATransitionFromLeft;   
        }
      //清扫获取下面一张图片
        _imageView.image = [self getImage:isNext];
    
        [_imageView.layer addAnimation:animation forKey:nil];
    
      }
    
    #pragma mark    4. **************轻划切换图片
    
    -(UIImage *)getImage:(BOOL)isNext
     {
         if (isNext) {
             _currentIndex = (_currentIndex +1)%3;
          } 
          else
          {
             _currentIndex = (_currentIndex +2)%3;/
          }
    
        NSString *string = [NSString stringWithFormat:@"%d.jpg",_currentIndex];
    
        UIImage *image = [UIImage imageNamed:string];
    
        return image;
    
     }
    
     @end
    
    需要注意的知识点:1.这也是一个转场动画,确定一个CATransition的对象,利用属性行操作. 2.里面 _imageView.image = [self getImage:isNext];调用一个方法来轻划切换图片,在方法里面+1和+2不需要变化,后面的%多少求余,具体后面的数字等于图片的数量(前提是第一张图片的下标为0,_currentIndex默认第一张图片的序号0)3.动画的对象必须添加到图层layer上,否则type和subtype就体现不出来效果.

    相关文章

      网友评论

      本文标题:Animation的制作-5种类型

      本文链接:https://www.haomeiwen.com/subject/uzdprttx.html