Swift Animations: Facebook Shimmer using Gradient Masks
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Animations are awesome to build and even more fun to play around with when you get it working correctly. In today's lesson we'll dive into how we can use a CAGradientLayer as a mask to achieve a Facebook Shimmer style animation. Enjoy
Podcasts Course
www.letsbuildt...
Intermediate Training Core Data
www.letsbuildt...
Instagram Firebase Course
www.letsbuildt...
Facebook Group
/ 1240636442694543
Completed Source Code
www.letsbuildt...
Instagram: / buildthatapp
Twitter: / buildthatapp
![[Live] : ONE 168 วันนี้!! "โจนาธาน vs ซุปเปอร์เล็ก"](http://i.ytimg.com/vi/0jIN65KgJsI/mqdefault.jpg)
![POLYCAT - ข้อความรูปยิ้ม [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
You have any plans to update Instagram Firebase to latest swift 5?
Hey Asad, the projects and source code have been updated to Swift 5 for the Instagram Firebase course. Go ahead and download it on the website at www.letsbuildthatapp.com/course/Instagram-Firebase
Lets Build That App that’s great!
you plan on adding any additional lessons to instagram firebase?
But Swift 5 isn’t released yet🤔🤔
Rahul 4.2 is released! Apple will be releasing or not?
Hey Brian - you accidentally removed the add subview of the darkTextLabel at the beginning of the video - right at the time you were saying that copy and paste was dangerous !!! Excellent example of why cut and paste is dangerous - lol
Thanks for another great video
Gotta love the IRONY!
Nice one Brian! Was looking into this just the other day & this helps clarify things quite a bit for me. 👌
Jared Davidson while Brian is amazing with teaching a bit more advanced stuff, I gotta give you a huge thanks as well, Jared. I literally went from zero to getting my foot in the door just from your Swift 2.0 videos back in the day. Been a professional full-time developer for a year now. 🔥 Love the TH-cam iOS community. Thanks, all of you!
Kris Dundurs Thanks Kris! That means a lot. I knew going into this whole TH-cam thing that I wasn’t the best programmer by any means, I was there to share what I know and improve as I go along. Glad I could help you get that foot in the door! That’s the hope I have for all of my tutorials, to at least get people interested and started. :]
Jared Davidson, nice to see you here...❤️
Jared Davidson
Thank you so much for helping us. To learn iOS in such simplified way..💛
Man, I wish I had your skills!
I like the personal challenge at the end, to apply what you have just demonstrated.
I tried to complete the “Kickass Animated Progress Circle”, with multiple views and spinning numbers.... and it was rough.
Thx again. Hope to see you apply this to Flutter, some day.
Holy Sh*t, I've been looking for a guide for this for a long time. I'm glad that I found it on your channel. Love the way you teach. Cheers!
It's really awesome. Thanks Brian.
Dudeeee you are sooo .... mind blowing... today i had that feeling when i saw the same animation in the youtube app on ios.. how i could i implement that in an IOS app and you did this animation. Great man! Keep up working because you are the best on this platform when it comes about IOS Development.
Damn!! This is awesome. Thanks a lot, what a great thing to learn, it's amazing!!
Amazing bro!
"you can set to whatever color your heart desires" was pretty nice hehee
Exactly what I've been looking for recently! Thanks!
Brian You are awesome, Thank you for the wonderful lessons
I am following your lessons and courses and Your lessons have developed me more
Thanks Brian and we look for more lessons and courses
Brian everything you explained so clear and simple. Why some original documents make it not easy for human beings to understand?
If someone's wondering why the "darkTextLabel" isn't showing in the shimmer animation , it's because brian forgot to add view.addSubview(darkTextLabel).
Awesome tutorial though! Thank You Brian :-)
beautiful tutorial , thank you
Brian you are my hero! Thank you for this video.
Great! Thanks :)
Awesome so clear and simple
Thanks Brian.. Perfect as usual!
just on time Brian.u rock man
You make it look so easy. 👍🏼👍🏼
GREAT!!!!!!! thanks Brian!
Hey Brian. Thank you for your work. You know, I have an idea for a new tutorial. You already did it in the past for this app. It is for the new App Store design. There is some elements like these cards - with a nice animation when you press on them. I did try to implement such animation but without any success.
I believe its just a simple frame transform.
You can find that animation on the you tube course on this channel, when he's is making the video player
Hi! I made sample project for that a few weeks ago. :D
github.com/markrufino/PopUpCards
Nice one Brian
This helped me a lot. Thanks, Brian :)
Thanks so much.
With gradient layer if you want to add .clear color, you should use UIColor(white: 1, alpha: 0). because clearColor has a black color channel with an alpha of 0. so it will show black instead of .clear Color.
Not exactly sure about this one. The clearColor seemed pretty clear when I used it. Perhaps the black alpha channel is something I'm not seeing correctly.
Awesome!!
That video was fire! You need to put up a patreon Brian
Great tutorial👍
hey man. it's so good that you're back with yt tutorials. Maybe you can make a course (it can be paid for) focused more on 'production' code aspects (protocol-oriented programming, objects with functions, more advanced enums)?
thank you sensei you're the best !
Wow this is great! Video chat integration next! lol.
I haven't figured out what is a good video chat feature yet. I'm not part of the snapchat generation.
Hope you gonna release the challenge answer. Thank you.
Thankss for thiss....great
More fire!
thank you
You didn't add - view.addSubview(darkTextlabel) So darkTextlabel doen't work
Ah, thats why I wasn't seeing it! The demo definitely has it though :)
I was also wondering the same
I waited till end that Brian will fix it but he forgot. Though its awesome video , thanks
Hey Brian, please show how to implement ARC in your Instagram Firebase course. IMHO every developer should know do's and dont's w.r.t retain cycles.
Nice work Brian! For obvious reasons, loading screens are used very commonly while apps are receiving data from the server. How would you do this shimmer if the size of the views were dependent on the data received?
Good day brian !
This reminds me "Slide to unlock"
ronaldo Jr on god
Hi Brian. I love watching your videos. I like how you explain details well. I'm having a problem with this one for some reason. Im trying to apply this to a few UIButtons and its making the buttons not visible at all and no animation. Any thoughts?
i think you can get diagonal gradient directly from the layer like so:
gradientLayer.startPoint = CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint = CGPoint.init(x: 1, y: 1)
Ah yes indeed. My demo uses a -60 degree tilt so that led me to perform the transform instead.
nice learned something new.
any plan for multi language app? change language within app?
Hello, could you please upload a tutorial to test Url response using mocking in swift?
Hey Brian, I tried to repeat the same animation as per your tutorials but I did it as a presented view controller and it didn't work. After struggling for a while I went to your website to download code and same issues happened, then instead of presenting the VC, I pushed it in a navigation controller and magically it started working. Is there any differences in CALayer animations when I present or push. Can you please help. I am kind of confused why is it giving such different behaviours in these two situations. It would be great if you could throw some light onto this! Thanks. Btw you make great stuff. I am an iOS Developer with 1 year experience and I find your tutorials quite practical. Kudos man! 😎🤘🏻
Hi Brian, nice tutorial as always.. :) one thing I noticed about the animation is that when we touch or swipe or do any gestures on the label the animation lags. Do you also get that?
Hey Brian! Awesome tutorial, I was wondering how this was done. Just one quick question, how do I stop and delete the animation? Since this is supposed to replace a UIActivityIndicatorView. I've tried removing the images from it's superview, making it's isHidden property true, but to no avail. I can stop the animation itself with layer.removeAllAnimations() but no matter what i do, the image does not go away.
Thank you in advance
Hello Brian for the shimmer color or is it possible to have 3 or 4 different color layers go over the shimmer label ? And if so how
Hello Sir can I upload this video in hindi with your permission ?? I’m also youtuber like you but I’m teaching ios in hindi so please reply sir this video is too good Sir :) thank you
Yeah, you should teach the subject with your own style though. The pattern I follow is very unique to the way my brain works, so structure it according to your own cadence.
`gradientLayer.frame` shouldn't be equal to `shinnyTextLabel.bounds` instead of `shinnyTextLabel.frame`? This works here because the label is pinned on top left of the screen so frame and bounds are equivalent, but if you had a padding on the Label, it would also translate its layer inside
nice tutorial, by any chance would you teach us how to do the animation inside facebook the user tap and hold like button, and a line of faces pop out ? no rush been follow you for almost 1.5 years now, just something to put in your mind. : ) thanks
Hello Brian, can you make a video on infinite scroll/ pagination? Thank you
Hello Husam, there are some lessons on pagination available here: www.letsbuildthatapp.com/course_video?id=1612
WOW!!, Can this be added to the launch screen?
not possible, however you can create a false launch screen copying you launch screen into a new viewcontroller's view, users won't notice the transition.
Hey Brian! Why did not you use startPoint and endPoint properties for CAGradientLayer to make it diagonal?
For my finished app, I had a 60 degree shimmer. Using start and end point is pretty difficult for performing the correct rotation.
Quick question: For the Facebook demo on the right side. Did you use a placeholder cell/view that applies the animation or is it the actual cell/view you use for displaying data with the animation on top of its views? I did it with a place holder cell that reflects loading and then swapped it with actual cell I used once the data has been downloaded from web.
You can download the source code for the FB demo with the link in the description. I hacked together two images and put the shimmer animation on top.
Thanks!
Just switched to not using storyboards because of your channel and I’m not going back it’s so much easier without them. I’m wondering if you have any plans on doing a slide in menu implementation without storyboards similar to the menu in the TH-cam App tutorials except the menu pushes the screen and is not just overlaid on top. Thanks
Cool, did you check out the "lets build youtube" series already?
Lets Build That App Yep I watched all of them, but in those videos the menu view shows on top of the current view controller. Is there a way to also change the position of the main screen like the menu is pushing the main screen out of the way? (similar to the popular SWRevealViewController)
Yeah there are many ways to build out this type of feature. All of which require a video or a long post :)
Hi Brain! I tried this animation but my animation didn't work in viewDidLoad. I've to place in viewdidAppear.
Second i tried facebook shimmer animation with simple view. When i placed in tableview it didn't work but on simple view animation works.
Any thoughts on this.
why the behind label is not visible
How do you do this in SwiftUI?
Pretty good tutorial!!!
I'm an Android developer but I want to switch to iOS, what advices can you give sr.?
Just do it.
Thanks sr.
Is there a way to blend the gradient more?
Yeah, you can always play with the location numbers of your gradient or provide more colors.
Hey just a question apart of the content of the video, wich video recorder do you use?
I use monosnap.
Thank you so much
I don't know why but I don't feel comfortable with providing depending variables as string (like in keypath : "transform.translation.x")..
Great tutorial anyways!
I don't think there's any way around this one yet.
hello brain.
i want to ask you a question please.
i want to add some random pictures from the internet in an app.
will there be a problem? since i don't own these pictures?
what exactly is going on regarding this subject.
thank you very much.
Hmmm....what do you think?
Do you have courses for complete beginners ?
Yes he does...check out the site. There are free courses on there for beginners. Helped me tremendously!. Good luck!!
thanks mate
Its work for tableview Xib ??
Its work much underd
Siri triggered at 7:59 lol
UPDATE: (I have completed the purchase but after many tries). Thanks man. Paypal button is not working on the website. I wanted to buy a course but it's not responding.
I see, were you trying to purchase on mobile?
No, desktop.
Hi Brian, I want to ask a question that is not relevant to the subject. How does autocomplete work when we write the name of the argument?
I just type out the argument names and hope for the best with autocomplete.
I understand, but it doesn't work when I use. Thanks
🙂🙂
I luv u
Is it allowed to use this effect in my own app without marking Facebook as the copyright owner? Or is it just neccessary if you use their library (github.com/facebook/Shimmer)
Are you gonna update XCode?
I have the latest release version of xcode. My laptop is running beta.
Oh XD. Just I noticed that you have a lot of blank lines at the bottom of your editor.
Yeah, it'll be great to be able to just scroll down with the new xcode.
thanks
if make keyboard is good
thanks again
Hey Brian...can I get your Instagram fire base tutorials for free or with some discounts.
Hello sachin, the Instagram Firebase course is already at a heavy discount. I'm sure you'll get more than you moneys worth out of all the videos that are available there. Thanks for supporting me and this channel.
You need a haircut sir 😁