Build iOS app with Rive Animations - Full 3-hour course
Рет қаралды 130,777
Күн бұрынDesign and code a SwiftUI app with Rive (rive.app) animated assets, icon animations, custom layouts and interactions
Assets & Source Files: www.dropbox.com/s/crfi96k4571...
00:00:00 Intro designcode.io/swiftui-rive-an...
00:09:46 Background Animation in Rive designcode.io/swiftui-rive-ba...
00:17:59 Button Animation in Rive designcode.io/swiftui-rive-bu...
00:28:41 Custom Fonts designcode.io/swiftui-rive-cu...
00:43:18 Custom Modal designcode.io/swiftui-rive-cu...
00:55:50 Modal Transition designcode.io/swiftui-rive-mo...
01:07:52 Loading and Success Animation designcode.io/swiftui-rive-lo...
01:20:54 Tab Bar Animated Icons designcode.io/swiftui-rive-ta...
01:29:50 Tab Bar Selection designcode.io/swiftui-rive-ta...
01:37:02 Icon Animation in Rive designcode.io/swiftui-rive-ic...
01:50:36 Layout and Card Components designcode.io/swiftui-rive-la...
02:08:24 Side Menu Animated Icons designcode.io/swiftui-rive-si...
02:18:51 Side Menu Selection designcode.io/swiftui-rive-si...
02:29:08 Side Menu Animation designcode.io/swiftui-rive-si...
02:35:38 Main View Animation designcode.io/swiftui-rive-ma...
🚀 Follow this course on Design+Code's website
➡ designcode.io/swiftui-rive
#iosdev #swiftui #animations
@BUdJohnson242 2 жыл бұрын
Wow - Great work Rive on sponsoring this video! Got me hooked on wanting to use that application now! Hope yall continue your partnership and make more videos like this! Would love to see more!
@alikesici7309 7 ай бұрын
Thank you so much to Rive for sponsoring to this video. I will definitely give a try to their platform. It looks like it is super easy to create animations and implement them into IOS apps with SwiftUI. Also your explanations and approach to create design from scratch is super helpful for beginners like me. Thanks.
@rilambang 2 жыл бұрын
Thanks DesignCode and Rive. This means a lot for my SwiftUI learning.
@DesignCodeTeam 2 жыл бұрын
Great to hear! We love SwiftUI
@bayramarif526 Жыл бұрын
I just saw the thumbnail of the video, and immediately subscribed to the channel....Did not even see your other videos... Thank you for your effort
@sebastiandegenaar6010 2 жыл бұрын
This is awesome. Love a flutter version 🙏
@majortom7589 2 жыл бұрын
Great tutorial! It helped me a lot on animation
@henrykoomson5000 2 жыл бұрын
Outstanding Output
@DesignCodeTeam 2 жыл бұрын
Thank you!
@rgenericson5361 2 жыл бұрын
Fantastic! I test drove Rive several years ago, looks like it's come a long way. Nice to see the integration with SwiftUI. I lost interest after discovering all of SwiftUI's animation capabilities. It's very cool to see what's been accomplished so far!
@DesignCodeTeam 2 жыл бұрын
Definitely, in fact their SwiftUI library was made during the making of this course as I helped them with feedback. Lots improvements to come in their editor!
@Applest2oApples 2 жыл бұрын
I don't know, seeing the menu/close icon animate at 1:56 looks like it was be a lot of work to animate with SwiftUI natively by creating position states and computing complicated paths so they layout correctly.
@mauriciocastro2876 2 жыл бұрын
Nice work!
@DesignCodeTeam 2 жыл бұрын
Thanks for watching Mauricio!
@abderrezakbouzidi3920 2 жыл бұрын
Perfect design
@DesignCodeTeam 2 жыл бұрын
Most importantly, I spent a lot of time on making it functional :)
@benhwang6378 2 жыл бұрын
Amazing! Thanks!
@DesignCodeTeam 2 жыл бұрын
You’re welcome!
@pranavbhatt3779 2 жыл бұрын
We need a Flutter version! This is awesome!!
@DesignCodeTeam 2 жыл бұрын
Flutter seems popular in the comments
@VictorHernandez-nz2rs 2 жыл бұрын
Indeed!!! Pleasee
@isaacelinamspielberg5752 2 жыл бұрын
Yes please do. 🥰🥰🥰🥰
@sebastiandegenaar6010 2 жыл бұрын
Please 🙏🙏🙏
@rockingnation Жыл бұрын
Please 🙏. Show us how to do it in Flutter
@moenyo3977 2 жыл бұрын
Thanks Sir !
@DesignCodeTeam 2 жыл бұрын
Most welcome
@testtestme8073 2 жыл бұрын
I was used lottie but you can't create animations in lottie. Rive has its own editor. I loved it
@DesignCodeTeam 2 жыл бұрын
Agreed, it's also much better than having to use AE, a plugin and a third-party library.
@blackmortem1827 Жыл бұрын
awesome video!! For your shapes, what software do you use to make them. when i used canva, it makes the shape a artboard rather than the actual shape, which makes the animation properties difficult.
@michele718 2 жыл бұрын
A Flutter version tutorial would be dope ❤️
@DesignCodeTeam 2 жыл бұрын
Maybe one day!
@dawah17 2 жыл бұрын
amazing
@DesignCodeTeam 2 жыл бұрын
Glad you think so!
@francisbrokering573 4 ай бұрын
Suuuper helpful video! Is it ok if I use the animated background and button for my app?
@musaadanur Жыл бұрын
muazzam
@androidstc1258 2 жыл бұрын
Its best Fantastic good
@DesignCodeTeam 2 жыл бұрын
Thanks a lot 😊
@projectfilm6800 2 жыл бұрын
How can I find for Android (Java, Kotlin) especially left menu
@sibulelemboyi526 Жыл бұрын
I customized "start the course" button. Please tell me, how do I get the animation name? You used "active" and I don't know how to go about it since I am not using the already built button in the rive-assets folder
@DivyanshArya-bc2dx 3 күн бұрын
I mastered flutter and node js in 1 year and earned some money to buy a mac book to start my journey with ios development
@dawah17 2 жыл бұрын
FAntastic
@darealman Жыл бұрын
Awesome
@aibor_io6871 2 жыл бұрын
Wow great tutorial, it would be great if you can also do this for flutter as well
@DesignCodeTeam 2 жыл бұрын
Flutter is a great idea
@x12624 2 жыл бұрын
I upvote this idea. Please make this flutter too. Thanks
@mohamedlemine5344 2 жыл бұрын
Pls make a video about rive animations using flutter
@DesignCodeTeam 2 жыл бұрын
Will definitely think about it
@okeyshourovroy2769 2 жыл бұрын
Please make the same app using flutter too. 🙏🙏🙏
@waynedwayne9569 2 жыл бұрын
Can I export the made animation to protopie to do a prototype on it, I'm a ui designer I don't know how to code? . Thnx for the video
@DesignCodeTeam 2 жыл бұрын
Rive supports formats like mov and GIF so that should work with most tools. I'm sure they'll have a more native support in the future for Figma, Framer, ProtoPie, etc.
@xstapix484 2 жыл бұрын
Очень интересно!
@blessdavies1532 Жыл бұрын
How would you employment FireBase Auth with the check and error Animations.
@mezoelsawy1254 2 жыл бұрын
Amazing, but we need this tutorial and ui on jetpack compose for android please🙏🏻
@DesignCodeTeam 2 жыл бұрын
If there's a lot of interest for Jetpack Compose
@projectfilm6800 2 жыл бұрын
@@DesignCodeTeam yes please
@user-ld2ue1gu9h 8 ай бұрын
How do you get the TabBar to show a different view for each tab when selected?
@evanyang9739 Жыл бұрын
I'm a beginner, and I'd like to know if we can create these modern animations only with SwiftUI without Rive
@saqibrajpoot1694 5 ай бұрын
Appreciate your work folks... And there's a thing that rive package didn't work for me, I have tried so many different way to install package but I'm stuck with it, can anyone help me out
@gronk1 2 жыл бұрын
border-radius:30px; this is whole design
@lothos5546 2 жыл бұрын
thanks ;) wallpaper link?
@faheemahmad3957 2 жыл бұрын
please now do this i flutter
@dleonardo3238 7 ай бұрын
Can you make a jetpack compose one?
@MrLalramchhana 2 жыл бұрын
Looks like we can also used for android using flutter
@piyushgaur3206 2 жыл бұрын
Yeah I am learning it now for developing these kind of apps
@DesignCodeTeam 2 жыл бұрын
Rive works great for Flutter
@ericsoto53 2 ай бұрын
Hi. Currently in highschool learning coding. I’m Very confused with the width and hight since you use an old iPhone model(13) and I’m using the iPhone 15. How could I change it to fit best??
@DesignCodeTeam 2 ай бұрын
Definitely use Spacer to help with adaptive layouts or maxWidth .infinity
@tarungupta419 2 жыл бұрын
i need to use it in Ionic with angular but when im install the rive with ( npm install ng-rive ) it shows an error when importing it in module file
@DesignCodeTeam 2 жыл бұрын
I would contact Rive directly for any issue regarding their libraries. They're pretty responsive!
@MrRiyality 2 жыл бұрын
Do we please get a flutter version?
@DesignCodeTeam 2 жыл бұрын
Will see if there is interest
@howltuskyt2290 Жыл бұрын
Is it just me or dark mode toggle does not work when in side bar animation?...
@nikhilgadudas9466 2 жыл бұрын
please make a video about animations in flutter
@DesignCodeTeam 2 жыл бұрын
If there’s a lot of interest!
@AshNair26 11 ай бұрын
Yes pls!!!
@rohanpatel9797 2 жыл бұрын
Does rive require network connection or is everything included in xcode assets delivered with final app?
@DesignCodeTeam 2 жыл бұрын
Just like any library except the api calls themselves, it doesn’t require a network connection
@rohanpatel9797 2 жыл бұрын
@@DesignCodeTeam ok thank you so much. this video is really helpful and super cool
@the_guidances 2 жыл бұрын
Can I create an animated background with blur inside Rive?
@DesignCodeTeam 2 жыл бұрын
Blur isn't available yet but I believe they're working on that feature and more.
@mixq3358 2 жыл бұрын
I need that wallpaper
@FILMSGOODS 2 жыл бұрын
What program did you use to get the iphone emulator and write the code?
@DesignCodeTeam 2 жыл бұрын
This is using Xcode 13 which comes with the iOS simulator
@FILMSGOODS 2 жыл бұрын
@@DesignCodeTeam ty my friend
@rohanpatel9797 2 жыл бұрын
what font is being used in the app? looks really cool!
@DesignCodeTeam 2 жыл бұрын
Poppins and Inter
@w0mblemania Жыл бұрын
@29:45
@sarcasticdna 2 жыл бұрын
Flutter please 🙏
@haaris3354 2 жыл бұрын
Flutter please
@lebetube 2 жыл бұрын
my xcode code says (No such module 'RiveRuntime') although i imported the package from github. can u help cause i dont want to miss this tutorial
@DesignCodeTeam 2 жыл бұрын
I think the library isn’t loaded properly. Try downloading the source files / projects or restart Xcode
@PrakashChAwal 2 жыл бұрын
Yeah i was also having same problem then i use cocapods to install library.
@abdullahmugais329 Жыл бұрын
The asset File not there there's error
@slide8770 2 жыл бұрын
Where do you get these icons from?
@slide8770 2 жыл бұрын
I mean like the Email Icon and the Lock Icon
@DesignCodeTeam 2 жыл бұрын
The ones in the design are from shape.so
@theebanraj361 2 жыл бұрын
Animated crashed due to fatalError in RiveFile+Extensions.swift at line 19. Like this error coming
@epicfortnitesongs 2 жыл бұрын
yeah I have the exact same issue, someone please help
@orlandosanchezlugo 4 ай бұрын
I’m getting the same. Anyone else was able to fix this issue?
@fortunecookie1729 2 жыл бұрын
when I play the simulator my mac starts running everything in slow motion 😫
@succeeder3044 2 жыл бұрын
will it work with xcode 12?
@DesignCodeTeam 2 жыл бұрын
Yes, it should work with Xcode 12
@aleksd286 2 жыл бұрын
Figma for that ui please
@DesignCodeTeam 2 жыл бұрын
The Figma file is in the Assets file
@RS-mu5cy 2 жыл бұрын
Can I make this for Android?
@DesignCodeTeam 2 жыл бұрын
There is a React Native version: twitter.com/lima_lucas3/status/1531100140769103873?s=20&t=WeaM95s9Gr923PpqV-XG5Q
@stylrart 2 жыл бұрын
how can one do that for a web app?
@DesignCodeTeam 2 жыл бұрын
You can use Flutter or React Native. Or for a site, it would be React (more powerful) or Webflow (simpler)
@geildesignt Жыл бұрын
I prefer Affinity Designer for vector graphics. Figma is to limit imho
@citizen1819 2 жыл бұрын
Great, when android
@DesignCodeTeam 2 жыл бұрын
If there is a lot of interest, it's definitely a possibility
@VitaliFront 10 ай бұрын
doesnt work anymore
@vspianist Ай бұрын
Dude that can't be good for performance right?
@MPRGetProfit 2 жыл бұрын
How to creat audio2face lipsync human face animation
@weihaolin1368 2 жыл бұрын
Amazing tutorial! Thanks! But I have one issue when using check.triggerInput which tells me Extra argument 'stateMachineName' in call. It only has one argument InputName... My RiveRuntime version is 2.0.19.
@DesignCodeTeam 2 жыл бұрын
You don't need to input the extra argument, as annotated in the video
@knoosh 2 жыл бұрын
@@DesignCodeTeam Removed extra code, but when I click on the button, nothing happens
@motivation5987 Жыл бұрын
after check.triggerInput("Error") in next DpQ.main.aA, use isLoading = false, + check.stop() for reload animation. without use try/stateMachineName
@relaxingvibes5560 Жыл бұрын
Value of type 'RiveModel' has no member 'view'
@fortunecookie1729 2 жыл бұрын
my xcode says - Cannot find 'subheadline2' in Scope - Type 'Font.TextStyle' has no member 'footnote2' But I have done everything as it supposed to be at enum TextStyle with their cases *** FIXED*** I just had to delete them, it looks like they are not included anymore at the Documentation from Apple.
@DesignCodeTeam 2 жыл бұрын
Subheadline2 is only from the custom font modifier taught. Apple’s don’t have those.
@warisruzi5688 2 жыл бұрын
I keep on getting this error
@warisruzi5688 2 жыл бұрын
var button = RiveViewModel(fileName: "menu_button", stateMachineName: "State Machine", autoplay: false, animationName: "open") Error -> Extra argument 'animationName' in cell
BalcevMMA_BOXING
Рет қаралды 19 МЛН
Артём Шумейко
Рет қаралды 337 М.
Swiftful Thinking
Рет қаралды 10 М.