UIScrollView-滚动背景

一.CABasicAnimation基本动画方式实现

1.工程链接

链接:
https://pan.baidu.com/s/1CthDU1zMykmJlnEpp9mk8w 密码:r0kj

2.开发流程

1.创建UIScrollView的一个对象 ，并且取消掉边界的回弹效果和横向和纵向的滚动条

    //滚动视图
    UIScrollView *scroll = [[UIScrollView alloc] 
                                          initWithFrame:self.view.bounds];
    //设置边界是否有回弹效果
    scroll.bounces = NO;
    //隐藏横向和纵向的滚动条
    scroll.showsHorizontalScrollIndicator = NO;
    scroll.showsVerticalScrollIndicator = NO;
    //显示
    [self.view addSubview:scroll];

2.创建UIImageView的一个对象，设置填充模式为按照宽高比缩放填充，并且设置好scroll的contentSize

    //获得图片
    UIImage *img =[UIImage imageNamed:@"beauty"];
    
    //图片视图
    self.imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width*3, self.view.frame.size.height)];
    _imgView.image = img;
    _imgView.contentMode = UIViewContentModeScaleAspectFill;
    [scroll addSubview:_imgView];
    
    //设置显示范围
    scroll.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height);

3.设置基本动画，并且允许动画自动返回，重复次数为CGFLOAT_MAX

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //当前显示的是图片的最左端，往左移动，才会显示图片的右边区域
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    ani.fromValue = @(0);
    ani.toValue = @(-self.imgView.frame.size.width+self.view.frame.size.width);
    ani.duration = 4;
    ani.autoreverses = YES;
    ani.repeatCount = CGFLOAT_MAX;
    [self.imgView.layer addAnimation:ani forKey:nil];
}

3.运行结果

滚动背景

二.KVO方式实现

1.工程链接

链接:
https://pan.baidu.com/s/1M24W6fanRQYWgsSUM8Pu5Q 密码:vx5w

2.开发流程

1.创建UIScrollView的一个对象 ，并且取消掉边界的回弹效果和横向和纵向的滚动条

    //滚动视图
    UIScrollView *scroll = [[UIScrollView alloc] 
                                          initWithFrame:self.view.bounds];
    //设置边界是否有回弹效果
    scroll.bounces = NO;
    //隐藏横向和纵向的滚动条
    scroll.showsHorizontalScrollIndicator = NO;
    scroll.showsVerticalScrollIndicator = NO;
    //显示
    [self.view addSubview:scroll];

2.创建UIImageView的一个对象，设置填充模式为按照宽高比缩放填充，并且设置好scroll的contentSize

    //获得图片
    UIImage *img =[UIImage imageNamed:@"beauty"];
    
    //图片视图
    self.imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width*3, self.view.frame.size.height)];
    _imgView.image = img;
    _imgView.contentMode = UIViewContentModeScaleAspectFill;
    [scroll addSubview:_imgView];
    
    //设置显示范围
    scroll.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height);

3.监听temp属性值得变化

//监听temp属性值的变化
    [self addObserver:self forKeyPath:@"temp" 
             options:NSKeyValueObservingOptionNew context:nil];

4.kvo触发的事件

//kvo触发的事件
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    [UIView animateWithDuration:4 animations:^{
        self.imgView.transform = CGAffineTransformTranslate(self. imgView.transform, -(self.imgView.frame.size.width-self.view.frame.size.width), 0);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:4 animations:^{
            self.imgView.transform = CGAffineTransformTranslate(self. imgView.transform, self.imgView.frame.size.width-self.view.frame.size.width, 0);
        } completion:^(BOOL finished) {
            //改变属性变量的值
            self.temp = !self.temp;
        }];      
    }];
}

5.改变属性的值，触发监听事件

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //当前显示的是图片的最左端，往左移动，才会显示图片的右边区域
    
    //改变属性的值 触发 监听事件
    self.temp = 1;
}

3.运行结果

滚动背景