Swift Animations: Custom Counting Label - CADisplayLink

[@CodeWithChris]

Very cool! I've always wondered how that works. Thanks for demonstrating!!

[@logicalsense6141]

CodeWithChris wow, amazing to see 2 of my favorite developers in 1 video. Note: I am not a developer but enjoyed watching both of your videos very much. Thank you for keeping me interested!

[@sulemanali7268]

both of you worked great i always wondered

[@mcnimi]

thank you for your content brian. i have learned most of my mobile app programming knowledge from you and i have been freelancing successfully for two years now. thank you.

[@w0mblemania]

Good video Brian, thanks. To remove that wobbling text (due to variable-width font digits), we can use: label.font = UIFont.monospacedDigitSystemFont(ofSize: 20, weight: .medium) This will use a monospace font _only_ for the digits, preventing the wobble. Cheers.

[@LetsBuildThatApp]

Awesome, I didn't know about that.

[@iamsanketray]

Did not know that either....awesome

[@shehzadali7087]

Once I was thinking about this animation and realized that UIView.animate will work for it but after watching your video I’m speechless 😶. Thanks a lot for this.

[@keeper_scratch]

So I came up with this solution for animate text challenge, using string range. Declare endStringValue variable, and here is the code that goes into the else block: let stringOffset = Int(percentage * Double(endStringValue.count)) let stringEndIndex = endStringValue.index(endStringValue.startIndex, offsetBy: stringOffset) let stringRange = endStringValue.startIndex..

[@LetsBuildThatApp]

Looks good, there's probably a cleaner way to write the above code in a few more lines instead of stuffing everything in one line though.

[@keeper_scratch]

Yesss, indeed, edited the solution 😉

[@LetsBuildThatApp]

Looks great, my version looks very similar to this. I hate that I have to google this offset/index code every time I need a substring.

[@alcprado]

I got into swift about 2 months ago and I'm loving your tutorials. I have been into many languagues and different channels in KZbin but to me you are in the top 10 in the whole KZbin. Thank you Brian.

[@YogeshPateliOS]

Andre Prado Please Once check my channel too !! I hope my videos are helpful for you :-)

[@fhdmsd]

Really helpful to animate text changes. Thanks for the tutorial. One tip: Instead of using custom logic to control animation time, use CADynamicLink's preferredFramesPerSecond or the newly introduced in iOS 15 preferredFrameRateRange. This will make controlling animation time much easier.

[@dimiutube]

Thanks for showing this, Brian! It's always a pleasure see you coding! Great job!

[@katoji810]

Now, Im a ios dev because of...you !!! Thanks you so much.

[@udaykumareega5333]

I like background score a lot. It will remember you whenever or wherever I listen ha ha..Have been watching your videos since my iOS training.😍😍

[@alexN350z]

Very excellent tutorial, learnt a lot of tricks from this video.

[@PtolemysEye]

I've been wanting to add some unique animations to my apps. Thanks Brian!

[@MrBlaq]

Great tutorial! More animation videos please!

[@hectormejia499]

I love this animations videos! This is the one thing I am the weakest when it comes to programming. Are you thinking about making an advanced (or complete) course on animations? That would be amazing, since I've seen very few (if any) out in the wild. Keep up the great work man!

[@NITINAGAM]

Brian, again you did a great job. Nice and useful animation. Thank you for sharing!!!! Keep it up!

[@shingetzu88]

Thank you for the great tutorial Brian! So glad to see you making iOS stuff again. I hope you keep your focus on iOS and come out w/ more stuff!!!

[@laurencastillo5104]

Great video! You explained everything very well! How do you display the information as an Int instead of a Double?

[@JohanAlbrectsen]

Love this! More animation stuff please!! Arguably the most important thing in an app!

[@awaisfayyaz7671]

Great video Brain, I had seen this video a week ago. Then i wanted to find this video. I forgot that this was posted by you. I tried to find it using titles "animating numbers in swift" but could not find. Then i recalled that it was from your channel and finally found it. I would be great if you rename this video title something like "animating numbers in swift using CADisplayLink". Doing this will help others to find it easily. Especially those that are trying to animate numbers. As always, Great video. :). Keep up the good work Cheers

[@coderacjhp9282]

Thanks Brian 👍🏼 very nice explanation. I used this method for applying face morphing and adjusting the value with UISlider from zero to one in 2.5 seconds. Count-up working well but countdown finishing before animation duration! Do you have any suggestion about fixing this issue?

[@coder_acjhp]

Thank you Brain. Nice job👍

[@viralchauhan9397]

Thanks Sir, I found new area of experiment..

[@santoshjayaswal2451]

You are amazing Brian 😍

[@juanfrancisco9039]

Very cool animation!! How could we make to restart the animation when I tap on the view again?

[@salihgole3990]

Great! Thanks Brian.

[@MoPharaoh]

Great video on one of the most fun topics to learn in iOS! keep them coming :)

[@omidrostami2208]

Hi Brian, do you have the source Code answer for animating the Text challenge as well? my approach is kind of long code to show the codes here, looking to your approach for compare.

[@P_F_D]

Very informative video! I learned a lot from this, and already started incorporating CADisplayLink in my projects! One question though: since CADisplayLink ties the animations to the framerate, what would happen if the framerate goes down and you start dropping frames? (let's say you're on a slow device, lots of activity, etc)

[@LetsBuildThatApp]

If your device is slow, your animation will be slow as well using CADisplayLink. Not much you can do about this.

[@kamrandehghan7645]

Grrrrreat. thanx bro. saved me the day

[@danuff]

OMG....Thank you, this is exactly what I need!!!

[@christofzirkler3369]

Hey Brian, great Video, thanks! I think we should call displayLink.invalidate() once we are done with the animation. Otherwise the handleUpdate() method gets called over and over again.

[@Pepejeria]

or just use pause if you are going to use the displayLink again. Invalidate should be called when the view controller is de-initialized.

[@SevenDeMagnus]

Thanks, prof. Brian. God bless, Proverbs 31

[@cinquain0]

I’m feeling the hat Brian

[@LetsBuildThatApp]

Nike: just do it.

[@nizz4m]

You're amazing as always 🎊👌🏻

[@tmn28100]

Thanks, Brian! :)

[@needmore7249]

I love your Cap

[@th3suffering]

How can you get this to work in a loop for a score counter that can go up and down and changes? Im running into a problem where this wont work past the initial animationDuration. How can i get it to rerun in my loop when the score goes up or down?

[@SudhanshuSrivastavaIndia]

That's really awesome...

[@한정희-i1r]

형 사랑합니다 매번 고마워요

[@mukulbakshi28]

Hello sir. Can you please give a tutorial on the demo you have shown like the text animation of cadisplay link like the textbis written. Please tell me how to do using this.

[@adminoudom]

Nice video ever. Hello sir I am from Cambodia. If sir don't mind. I would you to make more video regarding clear code architecture of IOS development.Thank you.

[@javishfri]

like before watching only for Brian

[@hamzaalmass8826]

Thank you very much , you’re amazing

[@3gzotic]

Great video again thanks a lot Brian :) Also I cant find any good video about emitter layer animations flame, burning, confetti, smoke kind of particle animations so I cant figure it out them completely If you have time could you prepare basic video about emitter layer :)

[@MrMm2004]

kzbin.info/www/bejne/eZiYeK2BqLJ5ba8

[@3gzotic]

Thanks a lot marcus for advise :) I watched video before Its a very good video to figure out how emitter works but I am trying to find some deeper video about emitter layer. I checked a lot in web but i couldnt fing I think Its time to get my hands dirty :)

[@lennartphilipp6699]

Can you please make a video about the challenges? I think some people would really appreciate this (including me)

[@LetsBuildThatApp]

All the answers are already on google, it only takes a few seconds to search for them. I strongly encourage people to learn how to go google for answers.

[@juanfrancisco9039]

Hey, I don't know if you still check the comments, but I'm trying to relaunch this animation after clicking a button or something else, but no luck, how could I do this?

[@ModMyTech]

Awesome brudda!

[@JunaidKhan-ny8tu]

hi Brian , how I can do the animation that you described from 2:17 to 2:42 . Its amazing but didn't figure it out :-(

[@LetsBuildThatApp]

I remember using a percentage to calculate the range of the string that I'm animation, its somewhat tricky if you don't get the new line characters correct.

[@linhnguyenthe5727]

For second challenge i think i will add each character like you add from start to end value.

[@kelvinfok]

Brian, when can we see some of that styled hair in the "Obj-C Getting Started" video?

[@LetsBuildThatApp]

I've been on a lazy hair month, finally got a hair cut though.

[@pradeepchandrasekaran272]

Hi, How to animate the label on viewwillappear?

[@godwinebikwo6544]

Any new courses on LBTA coming soon?

[@LetsBuildThatApp]

Doing a little bit of contracting work nowadays. Might be taking a break from doing courses for a month or two.

[@godwinebikwo6544]

@@LetsBuildThatApp ok bro Good luck and anticipating your return.

[@JacksMacintosh]

So I may be misunderstanding this, but it seems like the display link, once the label reaches the target value, is just constantly setting the label's text to the endvalue, 60 times a second. Does that have any hit on performance? can you just call a sort of "break" statement once it reaches the end? Thanks! :)

[@LetsBuildThatApp]

Yes, at the end of the video I mention as a challenge to remove the display link once the animation is done.

[@user-pr6up2vw9r]

But what is about performance? Why do you need this to be called each 60 times per a second. Is not it better to use NSTimer or dispatch_after with certain amount of time you need? I guess this is better for performance.

[@kav04]

you should read documentation - it says it doesnt make animation perself, it just synchronize drawing to the refresh rate of the display. The refreshing 60 fr per second already exist actually it always exist

[@user-pr6up2vw9r]

This is not animation actually. You don't need this periodic code be called so often. Otherwise there should not be needed in NSDate to check time.

[@thetechsack]

displayLink.remove(from: .main, forMode: .defaultRunLoopMode)

[@ibrshimnasser2001]

Can I do something like this for x in 1...999{ label.text = "\(x!)" }

[@LetsBuildThatApp]

Sure, you can give that a try and see what happens :)

[@P_F_D]

that entire loop would execute almost instantly. You would need some sort of mechanism to delay each loop execution. One possible way to do it would be to call a function recursively using a DispatchQueue.main.AsyncAfter or "performSelector after delay" method, but CADisplayLink is certainly preferred and a lot less "hackey"

[@BloodletterQuill]

Wait...did I miss the point were you actually stop the animation? Right now it will just keep running forever in the background? Sure we don't see it counting up but it will never stop looping?

[@LetsBuildThatApp]

Yes, at the very end of the video I challenge you to figure that step out on your own. I think I'm moving away from providing all the answers and requiring people to think a little on these exercises. I want this to be an engagement experience after learning the core concepts.

[@BloodletterQuill]

Ok must have missed it :) thx

[@TheSmellOfCode]

That's a great approach.

[@P_F_D]

You can add a check to call .invalidate() on the displaylink when elapsedTime passes the duration

[@YonghuaChen-b9t]

animation definitely can be a university half-year course TnT

[@LetsBuildThatApp]

Yeah definitely a lot of fun can be had with animations. It’s one of my favorite topics.

[@yashbhatt8581]

brian please provide link for the intro music .

[@LetsBuildThatApp]

Its called Dream, it is available for free on youtube.

[@SSA-X002]

good stuff, thank you!

[@magic0x0]

Great!!

[@heyrahulrs]

Awesome!

[@user-pr6up2vw9r]

Why don't use dispatch after or NSTimer for that?

[@Pepejeria]

Never use NSTimer for animations.

[@bdj0107tt]

Please do a “How to make a game on IOS with Swift” tutorial.

[@mryup6100]

yah i agree

[@MrSaud58]

Please I want an example 2:17 to 2:42 Show the letters, character, and the next character

[@LetsBuildThatApp]

For the character animation, you can do it with 3 more lines of code. Its honestly pretty simple if you just think about it a little bit.

[@MrSaud58]

Thank you, I do not care about animation I want to write a letter and then next letter to the end Letters

[@LetsBuildThatApp]

Isn’t that the animation? One char after another.

[@MrSaud58]

I want a code : char after another

[@shink303]

Please make a bonus video on how to display the text like you showed as an example. i'm having the hardest time trying to figure it out.

[@akilawasala]

Thanks a lot

[@iwintersun]

Sup dude, I don't know if you still check the comments because the video is almost a year old but something I noticed is the handleupdate function is still getting called each frame and that's not good. How to stop it from running after it finished counting?!

[@LetsBuildThatApp]

You would invalidate the timer. Google search the answer bud.

[@iwintersun]

Lets Build That App Thx for answering dude. Keep up the awesome work.

[@alexN350z]

It probably should be countingLabel.frame = view.bounds, just keep good practice for everyone.

[@LetsBuildThatApp]

Definitely. I didn’t want to get into what bounds vs frame meant.

[@arindamsantra2148]

sir need some tutorial on animation.

[@ammarahmad9004]

I use this "dispalyLink.preferredFramesPerSecond = " to reduce the frame rate in text animation, and it's work, did this effective way to do it???

[@LetsBuildThatApp]

Good job, lots of different properties to explore.

[@mehmedtukulic3376]

Guys , don' forget to remove the link from main thread after animation.

[@samsonlohasaptawee531]

how to reset elapsedTime

[@samirdesigner3324]

how to change app language without changing device language in ios

[@kav04]

I end up with this solution for the second challenge - @objc func handleUpdate2() { let now = Date() let elapsedTime = now.timeIntervalSince(animationStartTime) let countingText = myText.allPrefixes1[ Int(elapsedTime) * 4 ] countingLabel.text = "\(countingText)" } extension String { var allPrefixes1: [Substring] { return [""] + self.indices.map { index in self[...index] } } }

[@LetsBuildThatApp]

Looks good, I'd recommend use the range and index methods of String to calculate the amount of text that should be shown.

[@zhuzi_2037]

怎么又回到Swift了，不是React Native吗?

[@LetsBuildThatApp]

如果没记错的话 我是没拍过RN对吧

[@rickywitherspoon2861]

Here it is in SwiftUI:

[@rickywitherspoon2861]

struct ContentView : View { @ObservedObject var displayLink = DisplayLinkManager() var body : some View{ Text(displayLink.value).onAppear{ self.displayLink.run(startValue: 0, endValue: 2000000, duration: 5) } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } class DisplayLinkManager: ObservableObject{ @Published var value = "" var startValue: Double! var endValue: Double! var duration: Double! var asInteger : Bool! let animationStartDate = Date() var displayLink: CADisplayLink? func configureDisplayLink(){ } func run(startValue : Double, endValue : Double, duration: Double, asInteger : Bool = true){ self.startValue = startValue self.endValue = endValue self.duration = duration self.asInteger = asInteger let displayLink = CADisplayLink(target: self, selector: #selector(handleUpdate)) displayLink.add(to: .main, forMode: .default) } @objc func handleUpdate() { let now = Date() let elapsedTime = now.timeIntervalSince(animationStartDate) if elapsedTime > duration { value = String(format: "%.\(asInteger ? 0 : 3)f", endValue) displayLink?.invalidate() displayLink = nil } else { let percentage = elapsedTime / duration let newValue = startValue + percentage * (endValue - startValue) value = String(format: "%.\(asInteger ? 0 : 3)f", newValue) } } }

[@fawadfarooq]

Both challenge in one code var startText = " " let endText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." var startValue = 0 @objc func handleUpdate(){ let endTextValue = endText.count - 1 let index = endText.index(endText.startIndex, offsetBy: startValue) self.countinglabel.text = "\(startText)" startText += String(endText[index]) startValue += 1 if startValue > endTextValue{ displayLink?.invalidate() } print(endTextValue) }

[@MrSaud58]

let alertController = UIAlertController(title: "Thanks", message: "Excellent teacher", preferredStyle: .Alert) let defaultAction = UIAlertAction(title: "I love you", style: .Default, handler: nil) alertController.addAction(defaultAction) presentViewController(alertController, animated: true, completion: nil)

[@David-pi9dl]

Thanks a lot

[@Sam-lk1ci]

Awesome!

[@Sam-lk1ci]

Awesome!

[@alexeykhomych1743]

thanks a lot