Animation的制作-5种类型

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就体现不出来效果.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,076评论 1 23
  • Zotonic 是一个用erlang语言编写的开源,高速,实时的web框架和内容管理系统。它具有灵活性和易扩...
    RNB阅读 397评论 0 0