Splash Screen Suggestion

[Red-Luci4]

Should there be Continuous-Rotation-Animation or Image-Sequence-Animation in the Splash Screen?

Hello everyone,
I recently made my Manjaro look like BigSur, after watching this video- https://www.youtube.com/watch?v=tVLdq8IMllY

But I can't help but notice that in the Splash Screen Animation looks kinda weird, because it's not a single circular line, but it rotates smoothly like this:

So I looked into the .qml code, and it only uses one image and a rotate-animation using QtQuick library, but there are some unused image sequence file.

Then I knew what to do, so I modified the code,

From doing this: = ❌

To do this: = ✅

And now it looks kinda neat and not out of place.

So tell me if this change is nice or if you have some suggestions of your own.

Thank you.

[gtlsgamr]

Hi, do you mind telling how you did this? I would like to implement it also.

[Red-Luci4]

Hi, do you mind telling how you did this? I would like to implement it also.

Sure dude,

Finding your necessary files:

step 1 :

locate your custom “theme folder” location, more specifically the “looks and feel” folder, my folder is located in (because I've installed it locally) : /home/luci4/.local/share/plasma/look-and-feel/

step 2 :

Choose the custom theme you want to modify, I have the following:

1. Apple-Venture-Dark
2. com.github.vinceliuice.WhiteSur-dark

NOTE: you can choose any of the above because both are almost the same except for the splash background, in my case I choose the second one.

step 3 :

Navigate to {Theme folder}/contents/splash/ :

NOTE: you should see a file called splash.qml and a folder called images

Create and Modify the required files:

step 1 :

Back up your existing file and folder

step 2:

Create necessary Extra files,

1. Go to 'images' folder- {Theme folder}/contents/splash/images ( you should find images named : loading-00.svg to loading-11.svg)
2. Make a copy of loading-00.svg to loading-12.svg. NOTE: now you should have 13 files from – loading-00.svg to loading-12.svg - where the images loading-00.svg and loading-12.svg look alike.
3. Now remove all the extra 'zeros' in the file names. E.g., rename loading-00.svg to loading-0.svg, loading-01.svg to loading-1.svg, and so on.

step 3:

Modify the splash.qml

1. Go to the 'splash' folder – {Theme folder}/contents/splash ( you should find a .qml file called – Splash.qml**)
2. open the Splash.qml in any text editor
3. find this code: (its a container with id:busyIndicator) Image { id: busyIndicator //in the middle of the remaining space y: parent.height - (parent.height - logo.y) / 2 - height/2 anchors.horizontalCenter: parent.horizontalCenter source: "images/loading-00.svg" sourceSize.height: units.gridUnit * 1.5 sourceSize.width: units.gridUnit * 1.5 RotationAnimator on rotation { id: rotationAnimator from: 0 to: 360 duration: 800 loops: Animation.Infinite }
4. replace it with the following: Image { id: busyIndicator //in the middle of the remaining space property int currentImage:0 y: parent.height - (parent.height - logo.y) / 2 - height/2 anchors.horizontalCenter: parent.horizontalCenter source: "images/loading-"+currentImage+".svg" sourceSize.height: units.gridUnit * 1.5 sourceSize.width: units.gridUnit * 1.5 NumberAnimation on currentImage { from: 0 to: 12 duration: 1012 loops: Animation.Infinite }

after modifying, try previewing in the settings

[gtlsgamr]

Seems to be failing for some reason. I cannot find the logs either. I guess I will leave it be.

[Red-Luci4]

Can you send me your .qml file?

[Red-Luci4]

https://github.com/vinceliuice/WhiteSur-kde/issues/76#issuecomment-1369460780

Or you can replace your loading-00.svg with this : Loading PNG