播放GIF图片的内部实现

 
/*
  1 把用户传入的gif图片->NSData
  2 根据该Data创建一个图片数据源(NSData->CFImageSourceRef)
  3 计算该数据源中一共有多少帧,把每一帧数据取出来放到图片数组中
  4 根据得到的数组+计算的动画时间 == 可动画的image
  5 [UIImage animatedImageWithImages:images duration:duration];
   */

     CGImageSourceRef  source =  CGImageSourceCreateWithData (( __bridge CFDataRef )data,  NULL );
    
     size_t  count =  CGImageSourceGetCount (source);
    
     UIImage  *animatedImage;

//如果图片帧数小于等于1,那么就直接把二进制数据转换为图片,并返回图片
    if (count <= 1) {
         animatedImage = [[UIImage alloc] initWithData:data];
     }else {
         //创建可变的空的图片数组
         NSMutableArray *images = [NSMutableArray array];
         //初始化动画播放时间为0
         NSTimeInterval duration = 0.0f;
         // 遍历并且提取所有的动画帧
         for (size_t i = 0; i < count; i++) {
             CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
             // 累加动画时长
             duration += [self sd_frameDurationAtIndex:i source:source];
             // 将图像添加到动画数组
             [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];
             //释放操作
             CGImageRelease(image);
         }
         //计算动画时间
         if (!duration) {
             duration = (1.0f / 10.0f) * count;
     }
         // 建立可动画图像
         animatedImage = [UIImage animatedImageWithImages:images duration:duration];
     }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的纯CSS3实现图片展示特效的示例代码: HTML部分: ``` <div class="image-gallery"> <div class="gallery-item"> <img src="image1.jpg" alt="Image 1"> </div> <div class="gallery-item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="gallery-item"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分: ``` .image-gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .gallery-item { position: relative; width: 300px; height: 200px; margin: 20px; overflow: hidden; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%); transform: translateY(100%); transition: transform 0.5s ease; } .gallery-item:hover::before { transform: translateY(0); } ``` 说明: - `.image-gallery` 使用 Flexbox 布局,使图片列表居中且自适应宽度。 - `.gallery-item` 是每一张图片的容器,使用 `position: relative` 使其内部元素可以使用绝对定位。 - `.gallery-item img` 设置图片宽高为100%,并使用 `object-fit: cover` 让图片自适应容器大小。 - `.gallery-item::before` 使用一个伪元素作为遮罩层,在图片上方覆盖一层白色渐变,模拟图片被遮住的效果。`transform: translateY(100%)` 将遮罩层下移,并使用 `transition` 属性实现动画效果。 - `.gallery-item:hover::before` 鼠标悬停时,将遮罩层上移,显示出完整的图片。 效果如下图所示: ![图片展示特效](https://i.imgur.com/6kcc4r4.gif)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值