iOS 跑马灯

跑马灯效果图

• 几行代码实现跑马灯/ 一个Label搞定跑马灯

  • 要显示的文字text，宽度为width 。
  • label.text = 两份相同text拼接在一起，label 宽度为width * 2
  • label用UIView + CGAffineTransform动画在 width/40 时间内偏移-width长度 （速度 = 40/秒），complete后，将label 复原会起始状态并重新偏移。如此循环。 （视觉错觉产生跑马灯效果）

• 以下为swift 代码：

//这里的  label 要显示的宽度为屏幕宽度
    var stop: Bool = false 
    lazy var lb : UILabel = {
        let lb = UILabel()
        lb.text = self.text.appending(self.text)
        lb.backgroundColor = .red
        lb.textColor = UIColor.white
        lb.font = UIFont.systemFont(ofSize: 14)
//  如果此是self.width 足够显示。lb的宽度就直接设置为要显示的宽度就行了。
//   lb.frame = CGRect(x: 0, y: 100, width:  self.width*2, height: 40)
        self.view.addSubview(lb)
        lb.snp.makeConstraints({ (make) in
            make.top.equalTo(0)
            make.height.equalTo(40)
            make.left.equalTo(0)
            make.width.equalTo(self.width * 2)
        })
        return lb
    }()
    let text:String  = "两姓联姻，一堂缔约，良缘永结，匹配同称。看此日桃花灼灼，宜室宜家，卜他年瓜瓞绵绵，尔昌尔炽。谨以白头之约，书向鸿笺，好将红叶之盟，载明鸳谱。此证          "
    lazy var width: CGFloat = {
        return self.text.size(attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 14)]).width
    }()


//   关键代码 
  func circleText(){
          UIView.animate(withDuration: TimeInterval(self.width/40), delay: 0,       options: .curveLinear, animations: {
            self.lb.transform = .init(translationX: -self.width, y: 0)
        }) { (bool) in
  //  循环调用 。退出Controller 时候 记得移除动画
            if bool {
                 self.lb.transform = .identity
            self.circleText()
            }
           
        }
 }

• 注意：
  • 循环时 要text宽度是否超过label显示在屏幕的宽度，如果不超过， 则不执行循环。
  • 原理如此，具体细节调试根据实际需求进行修改