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

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

上代码

@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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/997131.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存