很多时候设计需要文字滚动效果，如下图所示
上下滚动主要可以使用两种方法：
1.两个label交替出现
import UIKit
import RxSwift
class verticalScrollLabelView: UIView {
var firstLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 12)
label.textColor = .black
label.textAlignment = .center
return label
}()
var secondLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 12)
label.textColor = .black
label.textAlignment = .center
return label
}()
var defaultText: String = "已成功领取"
var disposeBag = DisposeBag.init()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .gray
let width = frame.size.width
let height = frame.size.height
firstLabel.frame = self.bounds
secondLabel.frame = CGRect(x: 0, y: height, width: width, height: height)
firstLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9))\(self.defaultText)"
secondLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9))\(self.defaultText)"
self.addSubview(firstLabel)
self.addSubview(secondLabel)
self.layer.masksToBounds = true
self.layer.cornerRadius = 12.5
let _ = Observable<Int>.interval(RxTimeInterval.seconds(2), scheduler: MainScheduler())
.subscribe(onNext: { [weak self] _ in
guard let self = self else { return }
self.scorll()
}).disposed(by: disposeBag)
}
func scorll() {
let height = firstLabel.frame.size.height
let width = firstLabel.frame.size.width
UIView.animate(withDuration: 1, animations: {
let labelArray = self.subviews
for view in labelArray {
if view.isKind(of: UILabel.self){
let label = view
var rect = label.frame
rect.origin.y -= height
label.frame = rect
}
}
}, completion: {_ in
if (self.firstLabel.frame.origin.y == -height) {
self.firstLabel.frame = CGRect(x: 0, y: height, width: width, height: height)
self.firstLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9)))\(self.defaultText)"
}
if (self.secondLabel.frame.origin.y == -height) {
self.secondLabel.frame = CGRect(x: 0, y: height, width: width, height: height)
self.secondLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9)))\(self.defaultText)"
}
})
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
}
2.使用CATransition动画
self.scrollLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9))已领取"
Timer.scheduledTimer(withTimeInterval: 2, repeats: true) { (timer) in
self.scrollLabel.text = "用户\(Int.random(in: 0...9))\(Int.random(in: 0...9))已领取"
let ca = CATransition()
ca.duration = 1
ca.subtype = CATransitionSubtype.fromTop
ca.type = CATransitionType.push
self.scrollLabel.layer.add(ca, forKey: nil)
}
3.左右滚动
使用JXMarqueeView，用法比较简单就略过了
