More on animations¶
PaiTag entries & AnimationTarget values¶
AnimationTarget values and subsequent animation behavior change depending on the defined
PaiTag. A comprehensive list of animation Tags and Targets can be viewed on the following page:
bflyts, bflans, szs¶
.bflans and their corresponding
.szs are also documented there:
Active and Inactive states¶
We can find specific pairs of
.bflan files for some
.bflyts such as
In the main tutorial section, we worked on
RdtBtnIconGame_Inactive.bflan, but there are a couple others as well, e.g.
<bflyt>panes when the UI element is selected
<bflyt>panes when the UI element is being unselected
.bflan files follow a similar logic, e.g.
<bflyt>_UnFocusKey.bflan. These aren't fully tested nor documented yet.
Edits made for Inactive
.bflans will overwrite the values you might have defined in your
.json layout. For example, if you've set the album button's x-coordinate to
660px in your
.json while it is set to
680px in the Inactive
680px value will take priority over the
660px one and be applied.
It is possible to make looping animations. These can be seen
s JAG layout where selected game icons follow a scale up and down
idle animation. All you have to do to make a looping animation is to set the
Flags value to
the loop) in the
Pai1 section of a
.bflan file. Unfortunately, more complex animations that combine multiple
transformations can't be achieved properly since the flag is applied to the whole
.bflan. More explicitly, a
game icon wouldn't be able to move
10px above AND THEN follow a looping scale up and down. In such a case, the y-displacement would also be looped.
Fade in and fade out animations¶
Let's say I want a blinking cursor for the navigation menu in the settings applet. This involves using
16. I will briefly describe the process but it is basically the same as in the main tutorial:
BtnNav_Root_Active.bflan. As always when creating custom animations, do the proper modifications to the
Pai1sections. Add the
N_BtnFocusKeyentry (cursor pane) to the list, create a
FLVCentry ( not
FLPA!) right under it, and then another entry under
FLVC. I chose to set my key frames as shown on the screenshots below.
- We'll also edit
BtnNav_Root_Inactive.bflan, otherwise navigating the tabs will interrupt the cursor animation and lock it to a certain frame (same behavior as in our previous game icon animation). Considering that, we simply " reset"
N_BtnFocusKey's state (after adding this pane to the list) by setting its alpha channel to
- For each
.bflanfile, create properly named groups in the
BtnNav_Root.bflyt. Don't forget to save all your edits.
- Layout diff, compile and install, and there you go — you now have a working blinking cursor.
Animated backgrounds have been in the trends lately (as of the time of writing). The truth is, there is some intricacy behind animated background themes, so let's make it clear once and for all.
There is no proper nor easy known way to make animated backgrounds. Switch Theme Injector only supports
An alternative solution would be to animate the pane that contains your custom background image. That indeed works,
and there are a few themes that already have achieved this out there. To do so, working with
need to add
L_BgNml to the pane list in
RdtBase_Enter.bflan and make your edits to your convenience. However, this
solution has its limitations:
RdtBase_Enter.bflancontains the home screen unlocking animation. Try to loop your animation using the
Flagsitem and maybe you can guess what will happen (boot loop, UI and sound glitches). The only thing you can do to sort of reproduce a looping behavior is to duplicate your animation pattern all the way through an absurd amount of key frames. Zhi actually did this in his Patterns theme with a frame limit of 64000 (which makes it about 8 minutes). If you are interested in learning the whole process, you can read through his own documentation there. As a side note, you might want to stay tuned for Zhi's next releases because he comes up with quite some good ideas!
You're still stuck with a static background image since there is no support for animated images of any kind, nor for video files
- You could make a collage of frames in a single background (each corner a 360p image). This way you could use an animation to focus on different corners and make it look like your background has four frames. You could make it two frames by putting the images simply next to each other. You will probably have to reduce quality of each picture to ~480p. You will still have to rely on manually adding many frame entries.
- You can make gradient animations by animating Top/Bottom Left/Right corner colors, and not use a background image. Still, manually repeating the frames is required.
- On firmware versions 5.x and below you could very easily loop background animations, as the
loopflag did not affect the 'enter' animation when coming from the lockscreen.
For the other applets (e.g. settings, user page, etc.), there is actually no known way at all to apply any kind of animation to a custom background image.
Animations may overwrite things¶
If you spent some time editing
.json layouts, you may have encountered cases where, no matter what you do, the
changes you make to a pane (e.g. colors, position, etc.), even while having the
C_B patches enabled, lead to
no result. In such cases, chances are that an animation is overwriting your edits.
One notable case is the Redownload Software button at the bottom of the full launcher applet's main
Flauncher.szs). The panes corresponding to this button are
T_Empty, and these won't hide by
simply attaching the
Visible: false property to them. This is due to the
FLVI entries in
that overwrite any modification attempt made within your
.json code. To sort this out, the
KeyFrames values under each
must be set to
1 by default).
|Visible Redownload Software button||Hidden Redownload Software button|
Giving another example, take a look at my Unison R home menu theme: highlighted games have a white rounded card around their icon. These cards' corresponding pane is
RdtBtnIconGame.bflyt. This pane actually has some transparency defined through animations by default. So in order to make this pane fully opaque, we need to look into the animations of
P_BtnBase and change its
KeyFrames value to
255 under the