一.CABasicAnimation基本動(dòng)畫方式實(shí)現(xiàn)

1.工程鏈接

鏈接:
https://pan.baidu.com/s/1CthDU1zMykmJlnEpp9mk8w 密碼:r0kj

2.開發(fā)流程

1.創(chuàng)建UIScrollView的一個(gè)對象 ，并且取消掉邊界的回彈效果和橫向和縱向的滾動(dòng)條

    //滾動(dòng)視圖
    UIScrollView *scroll = [[UIScrollView alloc] 
                                          initWithFrame:self.view.bounds];
    //設(shè)置邊界是否有回彈效果
    scroll.bounces = NO;
    //隱藏橫向和縱向的滾動(dòng)條
    scroll.showsHorizontalScrollIndicator = NO;
    scroll.showsVerticalScrollIndicator = NO;
    //顯示
    [self.view addSubview:scroll];

2.創(chuàng)建UIImageView的一個(gè)對象，設(shè)置填充模式為按照寬高比縮放填充，并且設(shè)置好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];
    
    //設(shè)置顯示范圍
    scroll.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height);

3.設(shè)置基本動(dòng)畫，并且允許動(dòng)畫自動(dòng)返回，重復(fù)次數(shù)為CGFLOAT_MAX

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //當(dāng)前顯示的是圖片的最左端，往左移動(dòng)，才會(huì)顯示圖片的右邊區(qū)域
    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.運(yùn)行結(jié)果

滾動(dòng)背景

二.KVO方式實(shí)現(xiàn)

1.工程鏈接

鏈接:
https://pan.baidu.com/s/1M24W6fanRQYWgsSUM8Pu5Q 密碼:vx5w

2.開發(fā)流程

1.創(chuàng)建UIScrollView的一個(gè)對象 ，并且取消掉邊界的回彈效果和橫向和縱向的滾動(dòng)條

    //滾動(dòng)視圖
    UIScrollView *scroll = [[UIScrollView alloc] 
                                          initWithFrame:self.view.bounds];
    //設(shè)置邊界是否有回彈效果
    scroll.bounces = NO;
    //隱藏橫向和縱向的滾動(dòng)條
    scroll.showsHorizontalScrollIndicator = NO;
    scroll.showsVerticalScrollIndicator = NO;
    //顯示
    [self.view addSubview:scroll];

2.創(chuàng)建UIImageView的一個(gè)對象，設(shè)置填充模式為按照寬高比縮放填充，并且設(shè)置好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];
    
    //設(shè)置顯示范圍
    scroll.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height);

3.監(jiān)聽temp屬性值得變化

//監(jiān)聽temp屬性值的變化
    [self addObserver:self forKeyPath:@"temp" 
             options:NSKeyValueObservingOptionNew context:nil];

4.kvo觸發(fā)的事件

//kvo觸發(fā)的事件
- (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.改變屬性的值，觸發(fā)監(jiān)聽事件

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //當(dāng)前顯示的是圖片的最左端，往左移動(dòng)，才會(huì)顯示圖片的右邊區(qū)域
    
    //改變屬性的值 觸發(fā) 監(jiān)聽事件
    self.temp = 1;
}

3.運(yùn)行結(jié)果

滾動(dòng)背景