iOS 轮播图-利用动画机制

作者: RogueYBJ | 来源:发表于2018-10-24 14:26 被阅读92次

在上星期公司要求要把APP的首页头部图片改为轮播图
要知道一个轮播图实现的方式有太多太多了
正在犹豫的时候突然想到了项目中的跑马灯的一个动画效果
就想着是否可以利用动画的方式来进行轮播图


5_0d9dc79c10fdca56880a18c6be87b283.gif

试了一下
没想到还真的可以
这就太帅了
还可以简化代码还可以节约内存
不啰嗦了,上代码

@property (weak ,nonatomic)UIImageView * imageBack;

@property(assign ,nonatomic)NSTimer * Time;

/**
 创建UI
 */
-(void)createUI{
    //背景图片
    UIImageView * imageBack = [[UIImageView alloc]initWithFrame:self.bounds];
    _imageBack = imageBack;
    imageBack.image = [UIImage imageNamed:@"背景首页"];
    [self addSubview:imageBack];
    _Time = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timerClick) userInfo:nil repeats:YES];
}

-(void)timerClick{
    [self.imageBack sd_setImageWithURL:[NSURL URLWithString:@"http://h.hiphotos.baidu.com/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg"] placeholderImage:[UIImage imageNamed:@"加载中"]];
    [self.imageBack.layer addAnimation:[self createTransitionAnimation] forKey:nil];
}

-(CATransition *)createTransitionAnimation
{
    //切换之前添加动画效果
    //后面知识: Core Animation 核心动画
    //不要写成: CATransaction
    //创建CATransition动画对象
    CATransition *animation = [CATransition animation];
    //设置动画的类型:
    animation.type = @"push";
    //设置动画的方向
    animation.subtype = kCATransitionFromRight;
    //设置动画的持续时间
    animation.duration = 0.5f;
    //设置动画速率(可变的)
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    //动画添加到切换的过程中
    return animation;
}

展示图


QQ20181024-142547.gif

相关文章

  • iOS 轮播图-利用动画机制

    在上星期公司要求要把APP的首页头部图片改为轮播图要知道一个轮播图实现的方式有太多太多了正在犹豫的时候突然想到了项...

  • iOS使用UIScrollView实现无限循环轮播图

    何为轮播图?在 iOS中其实就是利用UIScrollView来展示超出屏幕范围的图片或者是其它内容。轮播图又分为手...

  • 多轮播图的设计

    列表展示多个轮播图 多个轮播图同时显示 多个轮播图不定时进行轮播动画 对应呈现的关系:1个TableView、一个...

  • 轮播大法——SDCycleScrollView 源码思路解析

    SDCycleScrollView 轮播图源码解析 一、开篇 轮播图控件,在 iOS 应用上是有很多应用的。 这个...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • 呼吸轮播图的制作

    网页排版中,轮播图可以说很常见,轮播图种类有好几种,今天分享一下呼吸轮播图的制作过程。 效果展示 转到动画 制作过...

  • iOS - 转场动画

    参考文章:iOS 转场动画一张图看懂 iOS 转场动画iOS自定义转场动画 iOS 转场动画探究(一)

  • Jquery 轮播图制作

    轮播图制作主要思路:实现轮播图滚动的效果,主要是使用animate()函数来实现这个过渡的动画效果。当向左点击时,...

  • 使用UICollectionView实现的swift轮播图FYS

    使用UICollectionView实现的swift轮播图FYSliderView 带有动画效果的pageCont...

  • 轮播图

    今天我们就来做一个轮播图效果,首先我说一下轮播图的原理,轮播图就是一组图片利用视觉差达到图片切换的效果。1、我们使...

网友评论

    本文标题:iOS 轮播图-利用动画机制

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