美文网首页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

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

相关文章

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

    图片的无限循环在iOS开发中非常常见,常见的实现方式有三种:使用UIScrollView,使用UICollecti...

  • 动画

    CABasicAnimation基础核心动画 缩放动画 图片抖动 根据圆形的路径做移动的效果. 转场动画 创建转场...

  • 6.系统转场动画

    系统转场动画 转场动画的使用准则就是:Push/Pop 时重载UINavigationControllerDele...

  • 高逼格Android转场动画

    前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。 转场动画...

  • 高逼格Android转场动画

    前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。 转场动画...

  • 高逼格Android转场动画,轻松实现掘金用户头像转场动画

    前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。 转场动画...

  • 高逼格Android转场动画

    前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。 转场动画...

  • CATransition转场动画

    简介 CATransition又称转场动画,是CAAnimation的子类,可以直接使用 转场动画主要用于为图层提...

  • Android转场动画共享元素动画不生效

    今天看了很多转场动画的介绍,自己页试着写了写,发现共享元素的动画始终不能生效。 错误效果: 中间的图片没有慢慢放大...

  • 一个关于kotlin使用5.0转场动画的问题

    最近使用kotlin开发遇到了个问题,就是使用转场动画的时候出现了个有趣的情况 这是启动转场动画代码 startA...

网友评论

  • 开源大同:挺不错的思路,经验都是总结出来的,加油
  • 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