美文网首页ios 开发干货ios
使用转场动画写图片无限循环

使用转场动画写图片无限循环

作者: 碧霄问鼎 | 来源:发表于2015-04-05 21:53 被阅读1195次

    图片的无限循环在iOS开发中非常常见,常见的实现方式有三种:使用UIScrollView,使用UICollectionView,和今天我要献丑的转场动画。
    完成后的效果如图:

    转场动画.gif

    本程序用到了3张图片,分别命名为0,1,2.

    ** 第一步:声明一下图片的个数和显示图片的控件以及当前显示的图片下标。**

    NSInteger const  IMAGE_COUNT = 3;
    
    @interface TransitionAnimationController ()
    {
         UIImageView *_imageView;
         NSInteger _currentIndex;
    }
    

    第二步:初始化UI,添加手势。

    - (void)viewDidLoad {
        [super viewDidLoad];
    
        [self setupUI];
    }
    
    - (void)setupUI
    {
        //定义图片控件
        _imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
        _imageView.contentMode = UIViewContentModeScaleAspectFit;
        _imageView.image = [UIImage imageNamed:@"0.jpg"];
        [self.view addSubview:_imageView];
    
        //添加手势
        UISwipeGestureRecognizer *leftSwipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(leftSwipe:)];
        leftSwipeGesture.direction = UISwipeGestureRecognizerDirectionLeft;
        [self.view addGestureRecognizer:leftSwipeGesture];
    
        UISwipeGestureRecognizer *rightSwipeGesture =[[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(rightSwipe:)];
        rightSwipeGesture.direction = UISwipeGestureRecognizerDirectionRight;
        [self.view addGestureRecognizer:rightSwipeGesture];
    }
    

    第三步:编写手势的响应方法。

    #pragma mark - 左滑
    - (void)leftSwipe:(UISwipeGestureRecognizer *)gesture
    {
        [self transitionAnimation:YES];
    }
    
    #pragma mark - 右滑
    - (void)rightSwipe:(UISwipeGestureRecognizer *)gesture
    {
        [self transitionAnimation:NO];
    }
    

    第四步:编写转场动画。

    #pragma mark - 转场动画
    - (void)transitionAnimation:(BOOL)isNext
    {
        //创建转场动画
        CATransition *transition = [[CATransition alloc] init];
    
        //设置动画类型
        transition.type = @"push";
    
        //设置子类型
        if (isNext) {
            transition.subtype = kCATransitionFromRight;
        }
        else
        {
            transition.subtype = kCATransitionFromLeft;
        }
    
        //设置动画时常
        transition.duration = .8f;
    
        //设置转场后的新视图
        _imageView.image = [self getImage:isNext];
    
        //添加转场动画
        [_imageView.layer addAnimation:transition forKey:nil];
    }
    

    第五步:取得当前图片。
    #pragma mark - 取得当前图片
    - (UIImage *)getImage:(BOOL)isNext
    {
    if (isNext) {
    _currentIndex = (_currentIndex + 1) % IMAGE_COUNT;
    }
    else
    {
    _currentIndex = (_currentIndex - 1 + IMAGE_COUNT) % IMAGE_COUNT;
    }

        NSString *imageName = [NSString stringWithFormat:@"%ld.jpg", (long)_currentIndex];
        return [UIImage imageNamed:imageName];
    }
    

    取得当前图片中用到了一个求余算法,为了方便理解我这里用Python敲了一下:

    求余算法.jpg

    到这里就算是结束,下篇见。

    相关文章

      网友评论

      • 开源大同:挺不错的思路,经验都是总结出来的,加油
      • 751fc49dcbfd:这个不能划到一半中途再滑回来吧。。
      • 昨夜雨轻栏:大神,这个例子就是用转场动画假装一下是在滑向下一张或者上一张,事实上只是更新了imgView的图片是么?
      • 碧霄问鼎:@gscc 是的,就是一种思路。
      • gscc:这种方式实际开发基本用不上,缺陷太多。1,图片不能跟着手势滑动距离而滑动。2,imageview必须占据整个屏幕宽度。3,再滑动过程中会出现图片渐变的效果。 只能说多一张想问题的思路,实际意义不大吧。
      • 00715f4b0537:@碧霄问鼎 对初学者来讲,这是最需要的 。 把一个不会的讲懂教会,才是真正的学会 :smile: :smile:
      • 碧霄问鼎:@豆豆酱 这样贴代码,一开始还是很担心有人喷的。 :grin:
      • 00715f4b0537: :stuck_out_tongue: 挺好 讲的很好
      • 碧霄问鼎:@HTC 献丑了 :smiley:
      • iHTCboy:不错!

      本文标题:使用转场动画写图片无限循环

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