UI_UIScrollView图片动画切换【实现每次只加载3张图片,进而减少占用内存,可循环滚动】

#import "ViewController.h"

#define IMAGENUMBER  5
#define SIZE  self.view.bounds.size
@interface ViewController ()
{
    UIScrollView *_scrollerView ;
    UIImageView *_leftImageView ;
    UIImageView *_centerImageVIew;
    UIImageView *_rightImagView;
    UIPageControl *_pageCoontroller;

  //当前索引下标
    NSInteger _curremtIndex;
    
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor =[UIColor brownColor];
    [self createScrollerView];
}

-(void)createScrollerView
{
    _scrollerView =[[UIScrollView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
    
    [self.view addSubview:_scrollerView];

  //创建左,中,右,三个ImageView视图
    _leftImageView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"0.jpg"]];
    _centerImageVIew =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"1.jpg"]];
    _rightImagView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"2.jpg"]];
    
    _leftImageView.frame =CGRectMake(0, 20, SIZE.width, SIZE.height);
    _centerImageVIew.frame =CGRectMake(SIZE.width, 20, SIZE.width, SIZE.height);
    _rightImagView.frame =CGRectMake(SIZE.width*2, 20, SIZE.width, SIZE.height);

  //添加
    [_scrollerView addSubview:_leftImageView];
    [_scrollerView addSubview:_centerImageVIew];
    [_scrollerView addSubview:_rightImagView];
    _scrollerView.contentSize=CGSizeMake(SIZE.width*3, SIZE.height);
    _scrollerView.pagingEnabled=YES;
    _scrollerView.delegate=self;
   _scrollerView.contentOffset=CGPointMake(SIZE.width, 0);

_scrollerView.showsHorizontalScrollIndicator=NO;
    _scrollerView.showsVerticalScrollIndicator=NO;

  //页码指示器
    _pageCoontroller =[[UIPageControl alloc]initWithFrame:CGRectMake((SIZE.width-300)/2, SIZE.height-10, SIZE.width-50, 10)];

_curremtIndex=0;
    _pageCoontroller.numberOfPages=IMAGENUMBER;
    _pageCoontroller.backgroundColor=[UIColor clearColor];
    _pageCoontroller.pageIndicatorTintColor=[UIColor orangeColor];
    _pageCoontroller.currentPageIndicatorTintColor=[UIColor purpleColor];
    _pageCoontroller.currentPage=_curremtIndex;
    [_pageCoontroller addTarget:self action:@selector(NextImageClicked) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_pageCoontroller];
}

-(void)NextImageClicked
{
    NSInteger pageImage =_pageCoontroller.currentPage;
    if (pageImage==_pageCoontroller.currentPage+1) {
        pageImage+=1;
    }else{
        pageImage-=1;
    }
    _curremtIndex=pageImage;
    _scrollerView.contentOffset=CGPointMake(SIZE.width*pageImage, 0);
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self loadImage];
    [UIView animateWithDuration:0.5 animations:^{
          _pageCoontroller.currentPage= _curremtIndex;
     }];
}

-(void)loadImage
{
    //创建动画效果
    CATransition *transaction =[[CATransition alloc]init];
    
    CGPoint offset =_scrollerView.contentOffset;

  //向右滚动
    if (offset.x>300) {

   //动画类型
        transaction.type [email protected]"fade";

  //通过取余运算获取当前索引下标  
        _curremtIndex=(_curremtIndex+1)%IMAGENUMBER;
        NSString *rightImage =[NSString stringWithFormat:@"%li.jpg",_curremtIndex];
        _rightImagView.image=[UIImage imageNamed:rightImage];
    }else{//向左滚动
        [email protected]"fade";
        _curremtIndex=(_curremtIndex-1+IMAGENUMBER)%IMAGENUMBER;
        NSString *leftImage =[NSString stringWithFormat:@"%li.jpg",_curremtIndex];
        _leftImageView.image=[UIImage imageNamed:leftImage];
    }

   //添加动画效果
    [_scrollerView.layer addAnimation:transaction forKey:@"transaction"];
}

时间: 2024-08-06 03:46:32

UI_UIScrollView图片动画切换【实现每次只加载3张图片,进而减少占用内存,可循环滚动】的相关文章

JS获取图片的缩略图,并且动态的加载多张图片

找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js获取缩略图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <st

Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)

列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)中给单元格设置图片. 但有时这些图片要从远程加载,或者要给图片作裁减,添加滤镜等操作.如果这些操作还是直接在主线程中进行,由于上下拖动表格滚动条的时候,单元格渲染是实时进行的.那么单元格便会不断地进行图片加载,渲染,影响效率造成卡顿.如果图片大的话还会浪费流量. 下面通过一个展示“热

Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也就是20张图片,会导致listview滑动卡顿! 这是用户不想看到的,我参考了网易新闻和电子市场等应用,发现它们都是只加载屏幕内的图片,不现实的不加载,于是我也仿照做了一个.我是菜鸟,我承认 呵呵,虽然不见得完全和他们的一样,但是确实解决了翻页时那一刻的卡顿现象. 因为未发现网上有相关文章,希望对朋

为网格布局图片打造的超炫 CSS 加载动画

今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Normalize.css 来替代传统的 CSS 复位: ZURB Foundation 创建具有响应式的网格: Masonry 创建一个动态的网格布局: imagesLoaded 检查是否已加载图像: Infinite Scroll加载更多图片并追加到画廊. 现在,让我们来看看一些实际的代码,这应该是大家

Viewpager图片自动轮播,网络图片加载,图片自动刷新

package com.teffy.viewpager; import java.util.ArrayList; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import android.annotation.SuppressLint; import android.app.Act

移动端俩个DIV切换,上滑加载

<!doctype html><html lang="zh-cn"><head> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="gbk"> <title>随访计划与随访记录app</title> <style> *{ m

如何判断图片(img)是否已经加载成功--基于react

原文地址:http://andrewhfarmer.com/detect-image-load/ 我过去经常会问: 有没有一种方法去判断子类组件是否已经渲染完成? 答案当然是有的啦  componentDidMount(),在react component 已经渲染完成时 就会调用 componentDidMount()方法 如果你对  componentDidMount() 不太熟悉, 那么建议你去看看react组件的生命周期(React Component Lifecycle Methods

专为Android加载图片Fresco:详细图解SimpleDraweeView加载图片基础

Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知: 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片 加载失败时应该呈现图片加载时的图像,当我们重新加载这张图片时,应该呈现重试时图像,直到这张图片加载完成.这些繁琐并且重复的如果得不到简化的话,那 将是一个开发人员的噩梦,现在好了,我们用 Facebook 出品的一个强大的图片加载组件 Fresco 几行代码就可以搞定以

Cocos2d-js 开发记录:图片数据资源等的异步加载

这里说的是在需要的使用加载图片,比如游戏中的某个关卡的图片,不用在游戏一开始就加载(万一用户玩不到那关,岂不是很冤,流量费了那么多),否则载入速度也慢.这种方式加载资源要用到cc.loader官方文档上有介绍(http://www.cocos2d-x.org/docs/manual/framework/html5/v3/cc-loader/zh),主要有 loadJs loadJsWithImg loadTxt loadBinary loadImg loadJson 文档给出了一个例子如下: c