marquee effect on UILabel by removing and adding letters - Swift 3

Question

Can anyone explain me how can i achieve this effect in Swift 3.0? It's almost a marquee effect but i would like not to slide the UILabel.

It would be great to do it like this

the first letter is removed and the 20th letter is added, later the second letter is removed and 21 is added and so on till the end of the text in a string. I'm a noobling and i really do not know how to even start with it.

see this http://stackoverflow.com/questions/35172267/how-to-use-marquee-feature-in-swift — Anbu.Karthik, Feb 13 '17 at 14:07
hehe funny thing is that even i wrote there how to do it via moving on x axis, but i do not want to move the string from side to side, i would like to remove first letter and add last one like on the gif i uploaded above :) but thanks. — pixelCss, Feb 13 '17 at 15:49
Just some clarifications... Is it necessary to be done by adding/removing the letters or it would be fine if it was visually indistinguishable from your gif? (if I'm getting this right, you _want_ the "step" effect instead of a smooth sliding... correct?) — Alladinian, Feb 13 '17 at 16:40
Exactly :) I would like to remove and show letters from the string. not just smooth sliding from side to side. — pixelCss, Feb 13 '17 at 16:57
You need to keep reference of index of every char in your string in an array. Then substring let's say index 0 from string , make a value x = 0, add array[x+20] to string.If global x is > string.characters.count you need to make x again -1 while you add array[0] in label text and then again make it 0. I think this is the way to go, maybe I will write some code for this, but not today.... Also updating label every time is not the best method. Maybe NSTimer is better. — ares777, Feb 13 '17 at 17:37
Try light weight library for marquee label in swift 3.0 https://github.com/Sahilberi/SwiftyScrollingLabel — Sahil, May 19 '17 at 10:56

Alladinian · Answer 1 · 2018-01-30T11:15:11.413

Sounds like a fun exercise, so here is my take on this:

Please note that is by no means production-ready code, but rather a quick demonstration of the idea behind this. Also the snippet below is written in the context of a playground in order to test things quickly.

import UIKit
import PlaygroundSupport

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 120, height: 30))
let text  = "marquee effect on UILabel by removing letters in front and adding in end in swift 3"
label.lineBreakMode   = .byClipping
label.text            = text
label.backgroundColor = .white
label.textAlignment   = .left

let timer = Timer.scheduledTimer(withTimeInterval: 0.3, repeats: true) { _ in
    DispatchQueue.main.async {
        if let text = label.text, !text.isEmpty {
            let index = text.index(after: text.startIndex)
            label.text = label.text?.substring(from: index)
        }
    }
}

PlaygroundPage.current.liveView = label

Which gets you this:

Some notes on this:

You can use some other mechanism instead of a timer such as a CADisplayLink or a custom animation callback
The effect would work better with a monospaced font
This code doesn't handle a reset when the text is empty or the timer invalidates
The effect works by setting the whole text in the label, set its clipping mode as to display only characters that are inside the bounds of it & finally removing characters from the beginning of the string. I do not see a real reason to do the remove/insert 'dance' that you are describing in the question but this would be something trivial to do...

anyway, I hope that this makes sense :)

marquee effect on UILabel by removing and adding letters - Swift 3

1 Answers1