Swift Animations: Facebook Shimmer using Gradient Masks

  Рет қаралды 43,697

Lets Build That App

Lets Build That App

6 жыл бұрын

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.letsbuildthatapp.com/cour...
Intermediate Training Core Data
www.letsbuildthatapp.com/cour...
Instagram Firebase Course
www.letsbuildthatapp.com/cour...
Facebook Group
/ 1240636442694543
Completed Source Code
www.letsbuildthatapp.com/cour...
Instagram: / buildthatapp
Twitter: / buildthatapp

Пікірлер: 142
@asadjamil7503
@asadjamil7503 6 жыл бұрын
You have any plans to update Instagram Firebase to latest swift 5?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
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
@asadjamil7503
@asadjamil7503 6 жыл бұрын
Lets Build That App that’s great!
@shawnmiller4057
@shawnmiller4057 6 жыл бұрын
you plan on adding any additional lessons to instagram firebase?
@heyrahulrs
@heyrahulrs 6 жыл бұрын
But Swift 5 isn’t released yet🤔🤔
@asadjamil7503
@asadjamil7503 6 жыл бұрын
Rahul 4.2 is released! Apple will be releasing or not?
@johniiibibal8838
@johniiibibal8838 5 жыл бұрын
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!
@tylerrutt17
@tylerrutt17 6 жыл бұрын
Exactly what I've been looking for recently! Thanks!
@andreiamza184
@andreiamza184 6 жыл бұрын
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.
@edysudarto8825
@edysudarto8825 6 жыл бұрын
Damn!! This is awesome. Thanks a lot, what a great thing to learn, it's amazing!!
@meerasayabu3823
@meerasayabu3823 6 жыл бұрын
It's really awesome. Thanks Brian.
@swifty7503
@swifty7503 6 жыл бұрын
Brian you are my hero! Thank you for this video.
@alialnaghmoush
@alialnaghmoush 6 жыл бұрын
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
@ahmdmhasn
@ahmdmhasn 4 жыл бұрын
Thanks Brian.. Perfect as usual!
@albaqawi
@albaqawi 6 жыл бұрын
Awesome so clear and simple
@TheJhuerta88
@TheJhuerta88 6 жыл бұрын
You make it look so easy. 👍🏼👍🏼
@AgamRandhawa
@AgamRandhawa 6 жыл бұрын
just on time Brian.u rock man
@sasniyFriz
@sasniyFriz 4 жыл бұрын
This helped me a lot. Thanks, Brian :)
@ehawkins730
@ehawkins730 6 жыл бұрын
GREAT!!!!!!! thanks Brian!
@tanhuynh432
@tanhuynh432 4 жыл бұрын
Amazing bro!
@andreagualandris2462
@andreagualandris2462 3 жыл бұрын
beautiful tutorial , thank you
@Archetapp
@Archetapp 6 жыл бұрын
Nice one Brian! Was looking into this just the other day & this helps clarify things quite a bit for me. 👌
@krisdundurs6672
@krisdundurs6672 6 жыл бұрын
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 KZfaq iOS community. Thanks, all of you!
@Archetapp
@Archetapp 6 жыл бұрын
Kris Dundurs Thanks Kris! That means a lot. I knew going into this whole KZfaq 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. :]
@malithmnk93
@malithmnk93 6 жыл бұрын
Jared Davidson, nice to see you here...❤️
@mdhasanshaikh6403
@mdhasanshaikh6403 4 жыл бұрын
Jared Davidson Thank you so much for helping us. To learn iOS in such simplified way..💛
@tazihosniomar
@tazihosniomar 6 жыл бұрын
thank you sensei you're the best !
@Joyceview
@Joyceview 6 жыл бұрын
Awesome!!
@seccat
@seccat 6 жыл бұрын
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.
@ssdev1652
@ssdev1652 6 жыл бұрын
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)?
@MrJoeYellow
@MrJoeYellow 6 жыл бұрын
Great tutorial👍
@alcprado
@alcprado 5 жыл бұрын
Man, I wish I had your skills!
@sunsunai13
@sunsunai13 6 жыл бұрын
Nice one Brian
@riklowe
@riklowe 6 жыл бұрын
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
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Gotta love the IRONY!
@djryanashton
@djryanashton 7 ай бұрын
Great! Thanks :)
@cinquain0
@cinquain0 5 жыл бұрын
That video was fire! You need to put up a patreon Brian
@alcprado
@alcprado 5 жыл бұрын
"you can set to whatever color your heart desires" was pretty nice hehee
@abhijithadkar9451
@abhijithadkar9451 6 жыл бұрын
Thankss for thiss....great
@mike_thecatlover
@mike_thecatlover 5 жыл бұрын
Brian everything you explained so clear and simple. Why some original documents make it not easy for human beings to understand?
@cinquain0
@cinquain0 5 жыл бұрын
More fire!
@kevstuckbykevdotcom2743
@kevstuckbykevdotcom2743 5 жыл бұрын
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?
@iFranKim
@iFranKim 6 жыл бұрын
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
@aaravsingh2492
@aaravsingh2492 5 жыл бұрын
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?
@nuno591
@nuno591 5 жыл бұрын
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?
@tanhungnguyen1980
@tanhungnguyen1980 6 жыл бұрын
thank you
@kevinjefferson9849
@kevinjefferson9849 5 жыл бұрын
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
@ak9tgaming714
@ak9tgaming714 5 жыл бұрын
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 :-)
@tonyd6853
@tonyd6853 6 жыл бұрын
Wow this is great! Video chat integration next! lol.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I haven't figured out what is a good video chat feature yet. I'm not part of the snapchat generation.
@doffydonqouite7519
@doffydonqouite7519 6 жыл бұрын
Good day brian !
@amitkumarghodke5998
@amitkumarghodke5998 6 жыл бұрын
nice learned something new. any plan for multi language app? change language within app?
@RehanAli-es5nh
@RehanAli-es5nh 5 жыл бұрын
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.
@SHASHWAT128
@SHASHWAT128 5 жыл бұрын
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! 😎🤘🏻
@ZoepX
@ZoepX 6 жыл бұрын
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.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
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.
@ZoepX
@ZoepX 6 жыл бұрын
Thanks!
@Hackmajoris
@Hackmajoris 6 жыл бұрын
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.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I believe its just a simple frame transform.
@AlfredoElizondoLife
@AlfredoElizondoLife 6 жыл бұрын
You can find that animation on the you tube course on this channel, when he's is making the video player
@mrvfino
@mrvfino 6 жыл бұрын
Hi! I made sample project for that a few weeks ago. :D github.com/markrufino/PopUpCards
@swetajaiswal4222
@swetajaiswal4222 5 жыл бұрын
Hello, could you please upload a tutorial to test Url response using mocking in swift?
@gorilka_
@gorilka_ 6 жыл бұрын
Hey Brian! Why did not you use startPoint and endPoint properties for CAGradientLayer to make it diagonal?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
For my finished app, I had a 60 degree shimmer. Using start and end point is pretty difficult for performing the correct rotation.
@Vankien96
@Vankien96 6 жыл бұрын
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.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
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.
@nizz4m
@nizz4m 5 жыл бұрын
Hope you gonna release the challenge answer. Thank you.
@kev8660
@kev8660 6 жыл бұрын
Hey just a question apart of the content of the video, wich video recorder do you use?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I use monosnap.
@kev8660
@kev8660 6 жыл бұрын
Thank you so much
@amitkumardas5650
@amitkumardas5650 6 жыл бұрын
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.
@charlesm.1638
@charlesm.1638 6 жыл бұрын
WOW!!, Can this be added to the launch screen?
@SSA-X002
@SSA-X002 6 жыл бұрын
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.
@---ml4jd
@---ml4jd 6 жыл бұрын
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.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Hmmm....what do you think?
@kav04
@kav04 6 жыл бұрын
You didn't add - view.addSubview(darkTextlabel) So darkTextlabel doen't work
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Ah, thats why I wasn't seeing it! The demo definitely has it though :)
@heyrahulrs
@heyrahulrs 6 жыл бұрын
I was also wondering the same
@rebellious_703
@rebellious_703 6 жыл бұрын
I waited till end that Brian will fix it but he forgot. Though its awesome video , thanks
@stevengao8345
@stevengao8345 6 жыл бұрын
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
@foodcouplelb
@foodcouplelb 6 жыл бұрын
Hello Brian, can you make a video on infinite scroll/ pagination? Thank you
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Hello Husam, there are some lessons on pagination available here: www.letsbuildthatapp.com/course_video?id=1612
@Theasstasticvillain
@Theasstasticvillain 6 жыл бұрын
Is there a way to blend the gradient more?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Yeah, you can always play with the location numbers of your gradient or provide more colors.
@YogeshPateliOS
@YogeshPateliOS 6 жыл бұрын
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
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
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.
@chimansong8653
@chimansong8653 4 жыл бұрын
I luv u
@ronaldojr3948
@ronaldojr3948 5 жыл бұрын
This reminds me "Slide to unlock"
@makyvionkelly3345
@makyvionkelly3345 4 жыл бұрын
ronaldo Jr on god
@mcnimi
@mcnimi 6 жыл бұрын
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)
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Ah yes indeed. My demo uses a -60 degree tilt so that led me to perform the transform instead.
@thorlarson6150
@thorlarson6150 6 жыл бұрын
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 KZfaq App tutorials except the menu pushes the screen and is not just overlaid on top. Thanks
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Cool, did you check out the "lets build youtube" series already?
@thorlarson6150
@thorlarson6150 6 жыл бұрын
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)
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Yeah there are many ways to build out this type of feature. All of which require a video or a long post :)
4 жыл бұрын
How do you do this in SwiftUI?
@josetony9181
@josetony9181 6 жыл бұрын
Pretty good tutorial!!! I'm an Android developer but I want to switch to iOS, what advices can you give sr.?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Just do it.
@josetony9181
@josetony9181 6 жыл бұрын
Thanks sr.
@MrQouTube
@MrQouTube 6 жыл бұрын
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)
@NiteshKumar-bk1wd
@NiteshKumar-bk1wd 5 жыл бұрын
Its work for tableview Xib ??
@LetsBuildThatApp
@LetsBuildThatApp 5 жыл бұрын
Its work much underd
@watchit387
@watchit387 3 жыл бұрын
why the behind label is not visible
@rlamichhane
@rlamichhane 6 жыл бұрын
🙂🙂
@romualdbrochard8674
@romualdbrochard8674 5 жыл бұрын
`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
@foooo294
@foooo294 6 жыл бұрын
Do you have courses for complete beginners ?
@ehawkins730
@ehawkins730 6 жыл бұрын
Yes he does...check out the site. There are free courses on there for beginners. Helped me tremendously!. Good luck!!
@foooo294
@foooo294 6 жыл бұрын
thanks mate
@gokhandemirer
@gokhandemirer 6 жыл бұрын
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?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I just type out the argument names and hope for the best with autocomplete.
@gokhandemirer
@gokhandemirer 6 жыл бұрын
I understand, but it doesn't work when I use. Thanks
@moalimus
@moalimus 6 жыл бұрын
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.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I see, were you trying to purchase on mobile?
@moalimus
@moalimus 6 жыл бұрын
No, desktop.
@malcolmcollinable
@malcolmcollinable 6 жыл бұрын
Siri triggered at 7:59 lol
@MrTalhakhan01
@MrTalhakhan01 6 жыл бұрын
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!
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I don't think there's any way around this one yet.
@dilsmatchanov
@dilsmatchanov 6 жыл бұрын
Are you gonna update XCode?
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
I have the latest release version of xcode. My laptop is running beta.
@dilsmatchanov
@dilsmatchanov 6 жыл бұрын
Oh XD. Just I noticed that you have a lot of blank lines at the bottom of your editor.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
Yeah, it'll be great to be able to just scroll down with the new xcode.
@samirdesigner3324
@samirdesigner3324 6 жыл бұрын
thanks if make keyboard is good thanks again
@sachinarora7994
@sachinarora7994 6 жыл бұрын
Hey Brian...can I get your Instagram fire base tutorials for free or with some discounts.
@LetsBuildThatApp
@LetsBuildThatApp 6 жыл бұрын
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.
@nizz4m
@nizz4m 6 жыл бұрын
You need a haircut sir 😁
Swift: How to Chain Animations for Impressive Visual Effects
17:21
Lets Build That App
Рет қаралды 53 М.
Swift Animations: Custom Counting Label - CADisplayLink
21:43
Lets Build That App
Рет қаралды 34 М.
No empty
00:35
Mamasoboliha
Рет қаралды 10 МЛН
Useful gadget for styling hair 🤩💖 #gadgets #hairstyle
00:20
FLIP FLOP Hacks
Рет қаралды 10 МЛН
Schoolboy - Часть 2
00:12
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 4,9 МЛН
Swift Animations: Awesome Facebook Pop Up! Press and Hold (Ep 1)
25:16
Lets Build That App
Рет қаралды 32 М.
Mastering Generics: Is This The Most Advanced Swift Code You've Seen?
26:56
Lets Build That App
Рет қаралды 43 М.
SWIFT Уроки: Compositional Layout - Основы(item, group, section)
50:21
Сергей Горбачёв / cmd+B, cmd+R
Рет қаралды 6 М.
When Taylor Swift did better than revenge speech to Kanye! Savage queen💥🔥| VMAs 2009 VS 2015
0:48
꧁𝐀𝐥𝐥 𝐬𝐭𝐮𝐟𝐟 𝐚𝐜𝐜꧂
Рет қаралды 9 МЛН
Swift 4: Easy Trick to Auto Sizing UITextView in Real Time
18:26
Lets Build That App
Рет қаралды 48 М.
iOS Roadmap to Professional Developer: Skills you MUST have!
19:42
Lets Build That App
Рет қаралды 137 М.
Skeleton Loader Shimmer Effect (Swift/iOS)
12:40
Swift Arcade
Рет қаралды 12 М.
Advanced Animations: UIViewPropertyAnimator Blur Effect (Ep 1)
31:58
Lets Build That App
Рет қаралды 22 М.
How to Build a Software Company From Scratch Solo
13:41
Millionaire Millennial
Рет қаралды 459 М.
No empty
00:35
Mamasoboliha
Рет қаралды 10 МЛН