美文网首页收藏swift
iOS 文字上下滚动

iOS 文字上下滚动

作者: 发家致富_Lie | 来源:发表于2019-12-02 16:55 被阅读0次

文字上下滚动

项目中可能会用到单条数据需要上下滚动显示,下面是一个非常简单的封装Demo,可以根据自己的项目进行自定义修改。

效果如下:

效果图.gif

Demo下载

项目代码

/** 数据 */
@property (nonatomic, copy) NSArray *dataArr;
/** 当前Label */
@property (nonatomic, strong) UILabel *currentLab;
/** 下一个label */
@property (nonatomic, strong) UILabel *nextLab;
/** 定时器 */
@property (nonatomic, strong) NSTimer *timer;
/** 当前下标 */
@property (nonatomic, assign) NSInteger currentIndex;

主要实现思路:通过两个Lab进行动画操作实现上下滚动再进行数据赋值操作

- (void)refreshData {

    if (self.currentIndex == self.dataArr.count - 1) {
       self.currentIndex = -1;
    }
    self.nextLab.text = self.dataArr[self.currentIndex + 1];
    self.currentIndex ++;
}

- (void)rollLab {
    
    [self refreshData];
    __weak typeof(self) weakSelf = self;
    [UIView animateWithDuration:0.5 animations:^{
        weakSelf.currentLab.frame = CGRectMake(0,  - 24, weakSelf.frame.size.width, 24);
        weakSelf.nextLab.frame = CGRectMake(0, 0, weakSelf.frame.size.width, 24);
    } completion:^(BOOL finished) {
        weakSelf.currentLab.text = weakSelf.nextLab.text;
        weakSelf.currentLab.frame = CGRectMake(0, 0, weakSelf.frame.size.width, 24);
        weakSelf.nextLab.frame = CGRectMake(0, 24, weakSelf.frame.size.width, 24);
    }];
}

可根据实际情况进行自定义界面操作,实现原理不变

GitHub地址 :https://github.com/qiuyubude/RollTextView
简书地址:https://www.jianshu.com/p/8744fd855eed
掘金地址:https://juejin.im/post/5de4d1d35188250f9c2472b4

相关文章

网友评论

    本文标题:iOS 文字上下滚动

    本文链接:https://www.haomeiwen.com/subject/hjrfgctx.html