我正在尝试使用UILabel创建打字机动画效果,但是找不到任何答案。 UILabel是否是正确的对象? 我想要将一系列字符串打印到屏幕上,例如“登录中...打开文件夹...正在重新启动系统...”等。 我应该提醒一下,我对编码很新,并且尝试搜索文档和API参考,但没有成功。 如果值得一提的话,我目前正在学习SWIFT。
根据这个答案: UILabel的逐字动画?
我已经将其更新到Swift 4,并使用DispatchWorkItem解决了CPU动画问题,以创建一个队列。
Swift 4
extension UILabel {
func setTextWithTypeAnimation(typedText: String, characterDelay: TimeInterval = 5.0) {
text = ""
var writingTask: DispatchWorkItem?
writingTask = DispatchWorkItem { [weak weakSelf = self] in
for character in typedText {
DispatchQueue.main.async {
weakSelf?.text!.append(character)
}
Thread.sleep(forTimeInterval: characterDelay/100)
}
}
if let task = writingTask {
let queue = DispatchQueue(label: "typespeed", qos: DispatchQoS.userInteractive)
queue.asyncAfter(deadline: .now() + 0.05, execute: task)
}
}
}
使用方法
label.setTextWithTypeAnimation(typedText: text, characterDelay: 10) //less delay is faster
Swift 5func setTyping(text: String, characterDelay: TimeInterval = 5.0) {
self.text = ""
let writingTask = DispatchWorkItem { [weak self] in
text.forEach { char in
DispatchQueue.main.async {
self?.text?.append(char)
}
Thread.sleep(forTimeInterval: characterDelay/100)
}
}
let queue: DispatchQueue = .init(label: "typespeed", qos: .userInteractive)
queue.asyncAfter(deadline: .now() + 0.05, execute: writingTask)
}
用法
label.setTyping(text: "Your text")
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myTypeWriter: UITextField!
let myText = Array("Hello World !!!".characters)
var myCounter = 0
var timer:NSTimer?
func fireTimer(){
timer = NSTimer.scheduledTimerWithTimeInterval(0.5, target: self, selector: "typeLetter", userInfo: nil, repeats: true)
}
func typeLetter(){
if myCounter < myText.count {
myTypeWriter.text = myTypeWriter.text! + String(myText[myCounter])
let randomInterval = Double((arc4random_uniform(8)+1))/20
timer?.invalidate()
timer = NSTimer.scheduledTimerWithTimeInterval(randomInterval, target: self, selector: "typeLetter", userInfo: nil, repeats: false)
} else {
timer?.invalidate()
}
myCounter++
}
override func viewDidLoad() {
super.viewDidLoad()
fireTimer()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
我写了一个UILabel的子类,名为CLTypingLabel,可在GitHub上获取。这个子类可以满足你的需求。
安装CocoaPods后,将以下内容添加到您的Podfile中以使用它:
pod 'CLTypingLabel'
将标签的类从UILabel更改为CLTypingLabel;
@IBOutlet weak var myTypeWriterLabel: CLTypingLabel!
在运行时,设置标签的文本将自动触发动画:
myTypeWriterLabel.text = "This is a demo of typing label animation..."
myTypeWriterLabel.charInterval = 0.08 //optional, default is 0.1
myTypeWriterLabel.pauseTyping() //this will pause the typing animation
myTypeWriterLabel.continueTyping() //this will continue paused typing animation
此外,Cocoapods配套了一个示例项目CLTypingLabel
。使用计时器实现打字机效果动画的我的版本:
var text = "text"
_ = Timer.scheduledTimer(
withTimeInterval: 0.1,
repeats: true
) { [weak self] timer in
let char = text.removeFirst()
self?.yourLabel.text?.append(char.description)
if text.isEmpty {
timer.invalidate()
}
}