Тёмный

Custom Ionic Splash + Animation 

Fireship
Подписаться 3,3 млн
Просмотров 176 тыс.
50% 1

Learn how to customize your app icon and splash page in Ionic, then add an animation to it. Grab the source code here angularfirebas...
Ionic 3 - ionicframework...
SpinKit - tobiasahlin.com...

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 106   
@Fireship
@Fireship 6 лет назад
This video is more basic than most on my channel, but it's important to think about for native app development. I'm hoping to get a full Native Ionic course launched before March 1st, so stay tuned for the announcement.
@haifzhan
@haifzhan 6 лет назад
Angular Firebase is the course available now?
@brkseries
@brkseries 6 лет назад
can you make an app with woocomarce rest api in ionic please
@albertjjimenezp
@albertjjimenezp 5 лет назад
Amazing, you're awesome tutorial make me happy and also my clients . Keep creating this simple but functional content. greetings from Colombia.
@RyanWisten
@RyanWisten 4 года назад
Sir do you have a used MacBook I want one for studies, I tired using virtual box it’s not getting enough performance. Please help me if you can, it might costly when you ship it though I’m from Sri Lanka my email ranulpasan@gmail.com
@locus1289
@locus1289 3 года назад
How to do it in Ionic React ?
@yvesguilherme
@yvesguilherme 5 лет назад
Thank you! Its working on Ionic 4 with Angular 8
@kush.mikashita
@kush.mikashita 4 года назад
Hey Yves, how did you manage to do it? I tried but I keep on failing
@razakadam74
@razakadam74 6 лет назад
clean and amazing....my favourite channel on youtube. Thanks Jeff
@Fireship
@Fireship 6 лет назад
Glad to hear that! Thank you
@donuts_on_me
@donuts_on_me 6 лет назад
This is awesome. Now if we wanted to add javascript to try some different animations with the splash screen, where would we put it?
@Iustin.pericica
@Iustin.pericica 5 лет назад
Hello! How can i make a custom splash screen using capacitor instead of cordova?
@bosschervz
@bosschervz 4 года назад
Nice! Can you make it in capacitor?
@sghairiakrem8639
@sghairiakrem8639 6 лет назад
Man i was trying your method for two days, still i can't get it to work, im still having a gray screen then the spash picture with the native spinner then a white screen... i'm using ionic 4.
@rashada.b.3878
@rashada.b.3878 5 лет назад
Im using Ionic 4, and i could still see the White screen between the splash screen and animation. Any fixes?
@kirangouds
@kirangouds 6 лет назад
Awesome, Keep making more Ionic tutorials.
@Fireship
@Fireship 6 лет назад
Will do! Thank you.
@mamahlivinus8913
@mamahlivinus8913 6 лет назад
Nice one, keep the flame on
@Philson
@Philson 4 года назад
Somehow, the spinning animation looks janky on iOS.
@MrJerczu
@MrJerczu 6 лет назад
I know this is not a subject of this channel but your form of teaching is very appealing and works for me. Any chance you could make a tutorial that'd actively use JavaScript monad in an example application?
@Fireship
@Fireship 6 лет назад
I've thought about putting videos up on my personal channel that don't fit for AngularFirebase - monads would be a great topic.
@judgewest2000
@judgewest2000 6 лет назад
212 likes - 0 dislikes :) You're doing something right!!
@Fireship
@Fireship 6 лет назад
Thank you! I get all my ideas from the community - really grateful for the feedback and support.
@lilililliilil
@lilililliilil 6 лет назад
Love your Ionic course!!!!!!! I hope to see more :)
@bobthebuilder6715
@bobthebuilder6715 6 лет назад
Hi, Great content! I'm an ionic developer but I get stuck on creating a solid Ionic 2/3 workflow for quality product development especially when working in teams and we creating an Ionic app. Do you have any workflow suggestions? For example, at the movement, my workflow is Jtest for unit testing, Airbnb ESLint style, and on our repo we have a Docker container that runs test and builds before we can merge to the production branch but I'm still not sure if this is rock solid because we don't sign the apk file on that is build on the cloud, anyway I just wanna hear your suggestions on a solid workflow for production app for ionic applications
@ghulamrasul306
@ghulamrasul306 6 лет назад
please upload ionic full training course from beginner to master level...thanks and u such a good person..
@Fireship
@Fireship 6 лет назад
That course is in early preview here: projects.angularfirebase.com/p/ionic-native-with-firebase
@rubenheymans1988
@rubenheymans1988 6 лет назад
awesome as usual
@Fireship
@Fireship 6 лет назад
Thank you Ruben :)
@maximsharakin4489
@maximsharakin4489 5 лет назад
Does the same procedure apply for PWA that would be hosted on a website?
@uwspstar2008
@uwspstar2008 6 лет назад
Great! thanks for sharing this one !!!
@Philson
@Philson 5 лет назад
But why does the animation look so janky on iOS??
@artofeugeneseguiban2773
@artofeugeneseguiban2773 5 лет назад
Hello im new in ionic my problem is in the import { time } from 'rxjs/observable/timer how to import this
@anygames069
@anygames069 5 лет назад
instead of timer . you can use setTimeout(()=> { this.showsplash= false }, 3000);
@igor_dev_
@igor_dev_ 5 лет назад
This worksed for me: import { timer, Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
@JhonInspn
@JhonInspn 5 лет назад
try this: import { timer } from 'rxjs';
@mateenagy
@mateenagy 6 лет назад
Hi! Great tutorial but If I am right you actually wait for the static spalshcreen to foinish and than wait other 3 second to play the custom animation. Isn't it bad for the user if they have to wait 2 different loading animation? I mean that would be a really nice feature if we can use some kind of animation instead of the default circle animation on the static splashscreen.
@dafneolca
@dafneolca 4 года назад
Which IDE do you use / What do you use to preview the App?
@EDeanCole
@EDeanCole 5 лет назад
Can I hire you to create an animated splash page for me. I know NOTHING about Ionic . I just turned my wordpress website into an App . I am a rookie when it comes to this .
@hartnil93
@hartnil93 6 лет назад
great video! love it!
@mukeshphulwani5972
@mukeshphulwani5972 6 лет назад
From which playlist i should start learning angular on your channel
@Fireship
@Fireship 6 лет назад
Everything is non-linear, so it's just a matter of choosing an topic you're interested in. I pack a lot of info into each video.
@MuzammilVersiani
@MuzammilVersiani 6 лет назад
Nice one. How can I generate Splash Screen for TV? Currently my splash screen looks blurry on TV screens.
@WoW540
@WoW540 6 лет назад
Really cool and clear videos:) So I have a general question. In order to use cordova resources command I need to be signed in to my ionic pro account! Whats about that? Is it safe? I mean, deploying my account on ionic pro does it mean that ionic or any1 else might have access to my codebase/code or something? I'm new in coding! Excuse me if that's a really noob question! :) Cheers!
@a-yo9312
@a-yo9312 Месяц назад
I'm a kinda new web dev looking for ionic/capacitor content, then turns out fireship has some, just really old, hey fireship please could you make a recent one please 🥺
@colmillo777
@colmillo777 4 года назад
my app have second white splashScreen,and i don wont, what can i do?
@Pawl0solidus
@Pawl0solidus 5 лет назад
Is it possible to see the splashscreen using just the browser with ionic serve?
@FieelFlying
@FieelFlying 6 лет назад
...what about adding a splash screen to an existing Ionic app (which is 99% of the usecases)...? Your project starts automatically with an existing splash screen being booted at start, why?
@Fireship
@Fireship 6 лет назад
The process is the same. Ionic generates some default graphics with a new project.
@fluffyneck7683
@fluffyneck7683 9 месяцев назад
Hi, do I need to sintall anything how do i make a folder for splash is it on ionic terminal
@juanguillermosandoval151
@juanguillermosandoval151 5 лет назад
I have a question about the loading.io that you mentioned, you need to download the gif I imagine and then set it up as if it was an image but referencing the gif?
@fathiahhusna7191
@fathiahhusna7191 6 лет назад
the splash screen should code before or after deploy the project?
@hanojb6844
@hanojb6844 5 лет назад
Splash is not work ?? iam not able to build your source code some error there
@aldenhernandez2988
@aldenhernandez2988 5 лет назад
I'm still having the same issue, the static image splash screen takes too long to load and display an animated loading icon, but the splash animation works out just fine. I need help.
@locus1289
@locus1289 3 года назад
How to do it in Ionic React ?
@WoW540
@WoW540 6 лет назад
also, i do still see the default splash of ionic! the spinning icon etc.. then fades and makes place for my custom splash! why is that? thanks
@gong127
@gong127 5 лет назад
Im using ionic version 5.2.3 and my splash screen doesnt render for some reason. Any clues? I have set the ShowSplashScreen property in the config.xml file to true already.
@HelmarBaechle
@HelmarBaechle 5 лет назад
getting an error: cannot find - show splash and -initialize App
@directorvcci6285
@directorvcci6285 6 лет назад
I want help in IONIC FRAMEWORK, I am designer, I am facing a major problem here, I designed UI on Illustrator with 1080X1920 px android canvas (this is my first work) where developers (they are also beginners :\ ) are working on ionic framework maybe with different sizes, but here are two major problems. 1)First thing How can I deliver them margins in percentage? because illustrator have margins in units like pixels or inches etc. and it's huge according to their framework. In 1080X1920 canvas it's obviously have margins like 50px, 200px etc. So how can I solve this problem? 2)I am very frustrated with second problem here, when I set font size here in my canvas let's say 36 pt, and when they put into their coding it looks so big to them. So here I want to know how can I deliver font sizes to them or is there any way that I can tell them in proportion?
@valeria-210
@valeria-210 6 лет назад
Excelente! Gracias!
@Fireship
@Fireship 6 лет назад
Thank you :)
@anassaitbelarbi1996
@anassaitbelarbi1996 6 лет назад
Hi , thank u for your video , and i want to Ask about how can hidden the StatusBar when the splashScreen started
@estebanmena7293
@estebanmena7293 6 лет назад
You SR. are so awesome
@mbfhitfmradio4357
@mbfhitfmradio4357 6 лет назад
i am having some issues. i have a this message Error: Template parse errors: Can't bind to 'ngtf' since it isn't a known property of 'div'. ("]*ngtf="showSplash" class= "splash"> "): ng:///AppModule/MyApp.html@0:5 Property binding ngtf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->] How do i resolve it
@ixxcim
@ixxcim 6 лет назад
Thanks man
@siliver01
@siliver01 4 года назад
What if I am using capacitor?
@siddhantpotghante196
@siddhantpotghante196 6 лет назад
Hello, Can you please share, which emulator are you using??
@arthurclaudio773
@arthurclaudio773 6 лет назад
Hi, i want modify my icon app in run time , how do this ?
@satyashodhaka
@satyashodhaka 4 года назад
What is the emulator you are using in this?
@MultiAllan05
@MultiAllan05 6 лет назад
Thanks a lot!
@usamaliaquat4751
@usamaliaquat4751 6 лет назад
ionic cordova run android --prod | This command is not showing white dead page first | and thanks for great idea | I am a big fan of you
@markangelonambatac5791
@markangelonambatac5791 6 лет назад
What software are you using in emulating the apps?
@Fireship
@Fireship 6 лет назад
Just Android Studio and Xcode - the basics. But I really like GenyMotion if you're serious about android development.
@vishalbhosle6570
@vishalbhosle6570 5 лет назад
Hii how you are using iPhone emulator on Linux ??
@lucassrt007
@lucassrt007 6 лет назад
do you have a tutorial that covers phone number login authentication ? -ionic
@gabrielgonzalez5821
@gabrielgonzalez5821 5 лет назад
Hello im new in ionic my problem is: [cordova-res] at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) [ERROR] An error occurred while running subprocess cordova-res.
@beingantonio
@beingantonio 5 лет назад
npm i -g cordova-res run this command
@JhonInspn
@JhonInspn 5 лет назад
You have to install: npm i -g cordova-res. that's all
@anisnursyafiqahbintiabwaha2442
my apps didnt show the splash.png :( it turns out with white blank screen & then the animation out for 3 secs. thats it. what happen? anyone could help?
@UPTOME12
@UPTOME12 6 лет назад
me too
@brkseries
@brkseries 6 лет назад
can you make an app with woocomarce rest api in ionic please
@eypbal
@eypbal 5 лет назад
perfect.. thanks..
@diegosiqueira5920
@diegosiqueira5920 6 лет назад
Thanks! Obrigado!
@indranilpaul3681
@indranilpaul3681 6 лет назад
splash image not showing when i m opening the app in mobile.instead of splash image it' s showing white screen in ionic.
@shabnamshahin4851
@shabnamshahin4851 6 лет назад
i m also facing the same problem.
@anisnursyafiqahbintiabwaha2442
me too :( maybe this tutorial doesnt work on emulator?
@luquinhassvc
@luquinhassvc 5 лет назад
Great, man! How can I run the app on Mobile emulator?
@venkateshcivic
@venkateshcivic 4 года назад
ionic Cordova run android
@Hong0exe
@Hong0exe 6 лет назад
I have one problem, when i start my app first the default splash of ionic shows up and then my custom splash appear... anynone knows why?
@Fireship
@Fireship 6 лет назад
Check the resources folder. Are the images still the ionic defaults? If so, regenerate your custom graphics.
@Hong0exe
@Hong0exe 6 лет назад
Well, the icon fonder has be changed with my icon but in the Splash folder still the default from ionic..
@graceamegboh9101
@graceamegboh9101 4 года назад
mine does not load for long
@whymore2979
@whymore2979 6 лет назад
hey, what's your emulator?
@sj_vlog2
@sj_vlog2 5 лет назад
how do i find timer
@JulioYacot
@JulioYacot 6 лет назад
Great!!! Thx!
@nabilvtuber5726
@nabilvtuber5726 5 лет назад
import { timer } from 'rxjs/Observable/timer'; I have this problem, someone can hep me?
@madhusreechinnadurai2471
@madhusreechinnadurai2471 5 лет назад
import { timer } from 'rxjs';
@deltaphil
@deltaphil 5 лет назад
@@madhusreechinnadurai2471 thanks!
@iharobalasimi
@iharobalasimi 4 года назад
I closed the video when you set z-index to a large number just to ... that's voodoo code
@sameerahmed7333
@sameerahmed7333 5 лет назад
Is this work for ionic 4???
@markwilliamson7610
@markwilliamson7610 5 лет назад
yes but you need an ionic account "Log into your Ionic Appflow account". it uploads your images, converts then, then downloads them and updates your config.xml
@oscardanielhernandez1054
@oscardanielhernandez1054 5 лет назад
You can avoid acc. With cordova-res github.com/ionic-team/cordova-res
@lucasmendonca6343
@lucasmendonca6343 5 лет назад
My sorry, friend, you are programmer, kiss me you!!!
Далее
Improving Your Ionic Splash Screen with Animations
16:25
I tried 5 Firebase alternatives
10:31
Просмотров 795 тыс.
Using Lottie Splash Screen with Capacitor
20:29
Просмотров 25 тыс.
How are holograms possible? | Optics puzzles 5
46:24
Просмотров 147 тыс.
Remix is a NEW JavaScript framework you MUST try
9:10
Просмотров 510 тыс.
JavaScript Pro Tips - Code This, NOT That
12:37
Просмотров 2,5 млн
I Remade YouTube From Scratch Using Just Bash
17:51
Просмотров 21 тыс.