ios通过SDWebImage实现图片加载时的渐变效果

先上效果图:

这些图片是在我限制了网速的情况下加载的:

实现效果

思路解析

想到渐变属性的时候,自然而然的想起CATransition这个类

先看整体的实现代码:

首先找到UIImageView+WebCache.m这个文件中的- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock这个函数(大约在44行处)

修改成这个样子

- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock {
 [self sd_cancelCurrentImageLoad];
 objc_setAssociatedObject(self, &imageURLKey, url, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

 if (!(options & SDWebImageDelayPlaceholder)) {
  dispatch_main_async_safe(^{
   self.image = placeholder;
  });
 }

 if (url) {

  // check if activityView is enabled or not
  if ([self showActivityIndicatorView]) {
   [self addActivityIndicator];
  }

  __weak __typeof(self)wself = self;
  id <SDWebImageOperation> operation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:options progress:progressBlock completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
   [wself removeActivityIndicator];
   if (!wself) return;
   dispatch_main_sync_safe(^{
    if (!wself) return;
    if (image && (options & SDWebImageAvoidAutoSetImage) && completedBlock)
    {
     completedBlock(image, error, cacheType, url);
     return;
    }
    else if (image) {
     CATransition *animation = [CATransition animation];
     animation.duration = .85f;
     animation.type = kCATransitionFade;
     animation.removedOnCompletion = YES;
     [wself.layer addAnimation:animation forKey:@"transition"];
     wself.image = image;
     [wself setNeedsLayout];
    } else {
     if ((options & SDWebImageDelayPlaceholder)) {
      wself.image = placeholder;
      [wself setNeedsLayout];
     }
    }
    if (completedBlock && finished) {
     completedBlock(image, error, cacheType, url);
    }
   });
  }];
  [self.layer removeAnimationForKey:@"transition"];
  [self sd_setImageLoadOperation:operation forKey:@"UIImageViewImageLoad"];
 } else {
  dispatch_main_async_safe(^{
   [self removeActivityIndicator];
   if (completedBlock) {
    NSError *error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey : @"Trying to load a nil url"}];
    completedBlock(nil, error, SDImageCacheTypeNone, url);
   }
  });
 }
}

在大约30行处添加

     CATransition *animation = [CATransition animation];
     animation.duration = .85f;
     animation.type = kCATransitionFade;
     animation.removedOnCompletion = YES;
     [wself.layer addAnimation:animation forKey:@"transition"];

不需要过多解释kCATransitionFade意思是 交叉淡化过渡

这个 type 还有几个兄弟:

  1. kCATransitionFade  //交叉淡化过渡
  2. kCATransitionMoveIn  //移动覆盖原图
  3. kCATransitionPush  //新视图将旧视图推出去
  4. kCATransitionReveal  //底部显出来

因为我们的需求是渐变嘛,所以就使用kCATransitionFade

注意啦

一定要在下载图片的这个Block结束后,把animation去掉[self.layer removeAnimationForKey:@"transition"];

为什么呢,如果你不去掉,在cell复用的时候,会出现加载重复的情况呢。/坏笑 不信的话,你别加呀。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS实现知乎和途家导航栏渐变的文字动画效果

    效果图如下 分析如下: 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad { [super viewDidLoad]; [self.view

  • 总结iOS实现渐变颜色的三种方法

    在iOS开发过程中有的时候会需要用到渐变的颜色,这篇文章总结了三种方法来实现,有需要的朋友们下面来一起看看吧. 一.CAGradientLayer实现渐变 CAGradientLayer是CALayer的一个特殊子类,用于生成颜色渐变的图层,使用较为方便 下面介绍下它的相关属性: colors 渐变的颜色 locations 渐变颜色的分割点 startPoint&endPoint 颜色渐变的方向,范围在(0,0)与(1.0,1.0)之间,如(0,0)(1.0,0)代表水平方向渐变,(0,0)(

  • iOS 页面滑动与标题切换颜色渐变的联动效果实例

    话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心代码 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了 frame就可以直接设置子控件的位置和尺寸 isScrollEnable:是否可以滚动.某些地方该控件是可以滚动的. titles:显示的所有标题 // MARK:- 构造函数 init(frame: CGRect, isScrollEnable : Bool, titles

  • iOS轻松实现导航栏透明渐变

    首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 1.首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundColor为Clear是没用的,你可以试着设置它的clear,但是没用,原因一会儿我们就知道了. 而对于把导航栏设置为透明,网上大多数的方法是: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] for

  • iOS文字渐变色效果的实现方法

    照例先上文字渐变的效果图 实现思路如下 一.创建一个颜色渐变层,渐变图层跟文字控件一样大. 二.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容. 注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明. 2.1 创建一个带有文字的label,label能显示文字. 2.2 设置渐变图层的mask为label图层,就能用文字裁剪渐变图层了.

  • IOS绘制动画颜色渐变折线条

    先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

  • ios通过SDWebImage实现图片加载时的渐变效果

    先上效果图: 这些图片是在我限制了网速的情况下加载的: 实现效果 思路解析 想到渐变属性的时候,自然而然的想起CATransition这个类 先看整体的实现代码: 首先找到UIImageView+WebCache.m这个文件中的- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageD

  • 解决js图片加载时出现404的问题

    运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片.  img标签事件属性 img标签可使用的时间属性有: onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart

  • js实现图片加载淡入淡出效果

    本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下 HTML代码 首先是图片标记的写法: <img data-src="/path/to/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opaci

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • 详解Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,PostProcesser,Image Request 4.渐进式JPEG与动图的显示 最近这两天把Fresco的官方文档算是看了个差不多,就剩下Fresco的基本原理还有结合okHttp等类库如何使用的问题,虽然官方文档给出的功能比较的多,比如说自定义View,缩略图显示等等,这些我也基本就看了个大概,觉

  • Android编程图片加载类ImageLoader定义与用法实例分析

    本文实例讲述了Android编程图片加载类ImageLoader定义与用法.分享给大家供大家参考,具体如下: 解析: 1)图片加载使用单例模式,避免多次调用时产生死锁 2)核心对象 LruCache 图片加载时先判断缓存里是否有图片,如果有,就使用缓存里的 没有就加载网络的,然后置入缓存 3)使用了线程池ExecutorService mThreadPool技术 4)使用了Semaphore 信号来控制变量按照先后顺序执行,避免空指针的问题 如何使用: 在Adapter里加载图片时 复制代码 代

  • iOS 图片加载框架SDWebImage解读

    目的 在使用SDWebImage加载图片时,尤其是加载gif等大图时,SDWebImage会将图片缓存在内存中,这样是非常吃内存的,这时我们就需要在适当的时候去释放一下SDWebImage的内存缓存,才不至于造成APP闪退. SDWebImage提供了 UIImageView.UIButton .MKAnnotationView 的图片下载分类,只要一行代码就可以实现图片异步下载和缓存功能. 这样开发者就无须花太多精力在图片下载细节上,专心处理业务逻辑. SDWebImage 特点 提供 UII

  • iOS程序开发之使用PlaceholderImageView实现优雅的图片加载效果

    说明 1. PlaceHolderImageView基于SDWebImage编写 2. 给定一个图片的urlString,以及一个placeholderImage就可以优雅的显示图片加载效果 效果 源码 PlaceholderImageView.h/.m // // PlaceholderImageView.h // SDWebImageViewPlaceHorder // // Created by YouXianMing on 16/9/14. // Copyright © 2016年 Yo

  • iOS开发中用imageIO渐进加载图片及获取exif的方法

    imageIO完成渐进加载图片 一.常见渐进加载图片模式   目前我们看到的渐进加载主要有以下三种实现方式:   1)  依次从web上加载不同尺寸的图片,从小到大.最开始先拉取一个小缩略图做拉伸显示,然后拉取中等规格的图,拉取完毕直接覆盖显示,最后拉取原图,拉取完成后显示原图.   2)直接从web上拉取最大的图片,每接受一点儿数据就显示一点儿图片,这样就会实现从上到下一点点刷新出来的效果.   3)结合第1种和第2种,先拉取一个缩略图做拉伸显示,然后采用第二种方法直接拉取原图,这样即可以实现

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

随机推荐