一张图片实现无限滑动(类似走马灯)效果

上代码

@interface ViewController ()
@property (nonatomic, strong) UIImageView *iv1st;
@property (nonatomic, strong) UIImageView *iv2nd;
@end

@implementation ViewController

-(void)startMove
{
       
    UIImageView *iv1st = [[UIImageView alloc] init];
    iv1st.image = [UIImage imageNamed:@"长图片.jpg"];
    iv1st.frame = [self imgTopFrame];
    _iv1st = iv1st;
    [self.view addSubview:iv1st];
    
    UIImageView *iv2nd = [[UIImageView alloc] init];
    iv2nd.image = [UIImage imageNamed:@"长图片.jpg"];
    iv2nd.frame = [self imgVeryBottomFrame];
    _iv2nd = iv2nd;
    [self.view addSubview:iv2nd];
    
    [self iv1stAnimation];
}
// 图床设置为和屏幕等宽 计算出对应的图床高度
- (CGFloat)imgH {
    // 1125 7116  长图宽高比
    CGFloat w = self.view.bounds.size.width;
    
    CGFloat imgH = floor(w * (7116.0 / 1125.0));
    
    return imgH;
}

// 图片顶部和屏幕顶部对齐 时 长图的frame
- (CGRect)imgTopFrame {
    CGFloat w = self.view.bounds.size.width;
    
    return CGRectMake(0, 0, w, [self imgH]);
}

// 图片底部和屏幕底部对齐 时 长图的frame
- (CGRect)imgAnimateFinalFrame {
    CGFloat w = self.view.bounds.size.width;
    CGFloat h = self.view.bounds.size.height;
    return CGRectMake(0, -([self imgH]-h), w, [self imgH]);
}

// 图片底部和屏幕顶部对齐 时 长图的frame
- (CGRect)imgVeryTopFrame {
    CGFloat w = self.view.bounds.size.width;
    return CGRectMake(0, - [self imgH], w, [self imgH]);
}

// 图片顶部和屏幕底部对齐 时 长图的frame
- (CGRect)imgVeryBottomFrame {
    CGFloat w = self.view.bounds.size.width;
    CGFloat h = self.view.bounds.size.height;
    return CGRectMake(0, h, w, [self imgH]);
}

- (CGFloat)timeForFirstPhase {
    // 假设滑动imgH的距离 需要25秒
    // 那么滑动第一个小段距离的时间为
    CGFloat h = self.view.bounds.size.height;
    CGFloat time = 25 * ([self imgH] - h)/[self imgH];
    return time;
}

- (CGFloat)timeForWholeScreenHeight {
    // 假设滑动imgH的距离 需要25秒
    // 那么滑动一个screenH的时间为
    CGFloat h = self.view.bounds.size.height;
    CGFloat time = 25 * h/[self imgH];
    return time;
}
 
// 第一张图先滑动一小段距离  此时间段内 第二张图是处于等待阶段的
// 第一张长图 从 顶部和屏幕顶部对齐 滑动到 底部和屏幕底部对齐
- (void)iv1stAnimation
{
    __weak typeof(self) weakSelf = self;
    [UIView animateWithDuration:[self timeForFirstPhase]
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
        weakSelf.iv1st.frame = [weakSelf imgAnimateFinalFrame];
                     }
                     completion:^(BOOL finished) {
        [weakSelf iv2ndImgBottomToFinalAnimation];
                     }
    ];
}

// 第二张长图 从 顶部和屏幕底部对齐  执行动画滑动到 底部和屏幕底部对齐
// 同时第一张张图 执行动画 滑动到底部和屏幕顶部对齐 结束后重置frame为 顶部和屏幕底部对齐
- (void)iv2ndImgBottomToFinalAnimation {
    __weak typeof(self) weakSelf = self;
    // 滑动距离为一张长图的高度
    [UIView animateWithDuration:25.0
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
        weakSelf.iv2nd.frame = [weakSelf imgAnimateFinalFrame];
                     }
                     completion:^(BOOL finished) {
        [weakSelf iv1stBottomToFinalAnimation];
                     }
    ];
    [UIView animateWithDuration:[self timeForWholeScreenHeight]
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
        weakSelf.iv1st.frame = [weakSelf imgVeryTopFrame];
                     }
                     completion:^(BOOL finished) {
        weakSelf.iv1st.frame = [weakSelf imgVeryBottomFrame];
                     }
    ];
}

// 第一张长图 从 顶部和屏幕底部对齐  执行动画滑动到 第一张长图底部和屏幕底部
// 同时第二张张图 执行动画 滑动到底部和屏幕顶部对齐 结束后重置frame为 顶部和屏幕底部对齐
- (void)iv1stBottomToFinalAnimation {
    __weak typeof(self) weakSelf = self;
    // 滑动距离为一张长图的高度
    [UIView animateWithDuration:25.0
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
        weakSelf.iv1st.frame = [weakSelf imgAnimateFinalFrame];
                     }
                     completion:^(BOOL finished) {
        [weakSelf iv2ndImgBottomToFinalAnimation];
                     }
    ];
    
    [UIView animateWithDuration:[self timeForWholeScreenHeight]
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
        weakSelf.iv2nd.frame = [weakSelf imgVeryTopFrame];
                     }
                     completion:^(BOOL finished) {
        weakSelf.iv2nd.frame = [weakSelf imgVeryBottomFrame];
                     }
    ];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor grayColor];
    [self startMove];
}

@end

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值