Animation: part 2

[yshui]

What

This PR adds a scripting system that supports simple easing curves, and simple arithmetic. And a animation system based on scripts.

This PR also adds a shim to support old fading configs on top of this new animation system.

Why

Originally my plan was to implement animations on top of just easing curves, but I slowly realized that this is not flexible enough. Suppose I want to have windows fly out when closed, how do I define the end point of the animation curve? It's not straightforward, because to move the window completely off-screen, the end Y coordinate will depend on the height of the window.

Sure, I can have some predefined values, like "upwards-off-screen", to mean a Y coordinate that will move the window off the top edge of the screen. But it's impossible to anticipate what kind of animation users might want. So I thought, we might as well to go for maximal customizability.

So for this example, you would write a script like this:

animations = ({
    triggers = ["close", "hide"];
    offset-y = {
        timing = "1s linear";
        start = 0;
        end = "-window-height - window-y";
    };
    opacity = 1; # This is needed because when a window is closed, it's opacity automatically becomes 0
})

Showcase

TODO

1. Presets

Although you can define all kinds of animations with this system, I do understand not everybody would want to learn how to use this, if all they want is just some simple animations. The plan is to add a "preset" system, so users can config simple animations, like "fly-out", "fade-out", etc., without needing to write these scripts.

2. Bugs

There are still many bugs to be crushed here.

3. Documentation

We need to explain how the script works. Explain what's the syntax for curves, for simple arithmetic expressions. And warn users about common pitfall (e.g. you need to explicit set opacity = 1;, otherwise your window disappears).

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 79.22078% with 272 lines in your changes are missing coverage. Please review.

Project coverage is 44.19%. Comparing base (02a7c71) to head (6624f09).

:exclamation: Current head 6624f09 differs from pull request most recent head 91ffbb4

Please upload reports for the commit 91ffbb4 to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #1253      +/-   ##
==========================================
+ Coverage   41.03%   44.19%   +3.15%     
==========================================
  Files          59       60       +1     
  Lines       12277    13256     +979     
==========================================
+ Hits         5038     5858     +820     
- Misses       7239     7398     +159     

Files	Coverage Δ
src/common.h	44.82% <ø> (ø)
src/config.c	51.56% <ø> (ø)
src/config.h	23.52% <ø> (ø)
src/renderer/layout.c	97.97% <100.00%> (+0.95%)	:arrow_up:
src/utils.h	32.07% <100.00%> (+2.66%)	:arrow_up:
src/win.h	97.61% <ø> (-2.39%)	:arrow_down:
src/dbus.c	25.12% <0.00%> (ø)
src/event.c	69.77% <83.33%> (-0.32%)	:arrow_down:
src/renderer/damage.c	89.71% <71.42%> (-0.69%)	:arrow_down:
src/backend/gl/gl_common.h	5.35% <0.00%> (ø)
... and 14 more

... and 7 files with indirect coverage changes

[yshui]

Configuring animation is not currently easy, and it's entirely undocumented. So if you want to try this branch, here are some configurations to try:

slide in/out

https://github.com/yshui/picom/assets/366851/773e4fd3-aa4f-491a-833f-0822a991c248

animations = ({
    triggers = ["close", "hide"];
    offset-x = {
        timing = "0.2s cubic-bezier(0.21, 0.02, 0.76, 0.36)";
        start = "0";
        end = "-window-width";
    };
    shadow-offset-x = "offset-x";
    crop-x = "window-x";
    opacity = 1;
    blur-opacity = "opacity";
    shadow-opacity = "opacity";
},
{
    triggers = ["open", "show"];
    offset-x = {
        timing = "0.2s cubic-bezier(0.24, 0.64, 0.79, 0.98)";
        start = "-window-width";
        end = "0";
    };
    shadow-offset-x = "offset-x";
    crop-x = "window-x";
})

appear/disappear

https://github.com/yshui/picom/assets/366851/eaa4c64b-1bf0-4c07-93e3-43d034796772

animations = ({
    triggers = ["close", "hide"];
    opacity = {
        timing = "0.2s linear";
        start = "window-raw-opacity-before";
        end = "window-raw-opacity";
    };
    blur-opacity = "opacity";
    shadow-opacity = "opacity";
    offset-x = "(1 - scale-x) / 2 * window-width";
    offset-y = "(1 - scale-y) / 2 * window-height";
    scale-x = {
        timing = "0.2s cubic-bezier(0.21, 0.02, 0.76, 0.36)";
        start = 1;
        end = 1.04;
    };
    scale-y = "scale-x";
    shadow-scale-x = "scale-x";
    shadow-scale-y = "scale-y";
    shadow-offset-x = "offset-x";
    shadow-offset-y = "offset-y";
},
{
    triggers = ["open", "show"];
    opacity = {
        timing = "0.2s linear";
        start = "window-raw-opacity-before";
        end = "window-raw-opacity";
    };
    blur-opacity = "opacity";
    shadow-opacity = "opacity";
    offset-x = "(1 - scale-x) / 2 * window-width";
    offset-y = "(1 - scale-y) / 2 * window-height";
    scale-x = {
        timing = "0.2s cubic-bezier(0.24, 0.64, 0.79, 0.98)";
        start = 1.04;
        end = 1;
    };
    scale-y = "scale-x";
    shadow-scale-x = "scale-x";
    shadow-scale-y = "scale-y";
    shadow-offset-x = "offset-x";
    shadow-offset-y = "offset-y";
})

fly in/out

https://github.com/yshui/picom/assets/366851/e06cf716-c9cd-4304-856f-24abcd7b8d12

animations = ({
    triggers = ["close", "hide"];
    offset-y = {
        timing = "0.24s cubic-bezier(0.05, 0, 0.69, -0.05)";
        start = 0;
        end = "- window-height - window-y";
    };
    shadow-offset-y = "-offset-y / 40";
    shadow-offset-x = "shadow-offset-y";
    opacity = 1;
    shadow-opacity = {
        start = "window-raw-opacity-before";
        end = "window-raw-opacity";
        timing = "0.2s linear 0.03s";
    };
    shadow-scale-x = {
        start = 1; end = 1.2;
        timing = "0.4s";
    };
    shadow-scale-y = "shadow-scale-x";
    blur-opacity = 1;
},
{
    triggers = ["open", "show"];
    offset-y = {
        timing = "0.4s cubic-bezier(0.17, 0.67, 0.68, 1.03)";
        end = 0;
        start = "- window-height - window-y";
    };
    shadow-offset-y = "-offset-y / 40";
    shadow-offset-x = "shadow-offset-y";
    opacity = 1;
    shadow-opacity = {
        start = "window-raw-opacity-before";
        end = "window-raw-opacity";
        timing = "0.2s linear 0.08s";
    };
    shadow-scale-x = {
        start = 1.04; end = 1;
        timing = "0.4s";
    };
    shadow-scale-y = "shadow-scale-x";
    blur-opacity = 1;
})

[natrys]

These look cool. Would it be possible to animate workspace/desktop switch with these in a WM agnostic way?

[yshui]

@natrys that's unfortunately impossible due to X11 limitations. however, I plan to add some external interfaces with which you might be able to create custom animations (including workspace switches) for your specific window manager.

[pijulius]

This is getting very very good @yshui already played around with it and love it! thank you so much for all your hard work! will fork your repo and try contribute to it from here on instead of having another outdated repo.

Thanks again for this and your work on picom!

[darkelectron]

I like how smooth these are. One thing that is “missing” is wintype specific animation. I'm not sure if you have considered them/those.

Can't wait for the next one (update).

[yshui]

@darkelectron a rule based system will be added later.

[polluxcodes]

These look great! I have been running it for the last few hours without any noticable issues or artifacts.

One feature that I would like that I don't see at the moment is the ability to animate windows moving from one part of the screen to another. Is that part of the roadmap currently?

Edit: After closer inspection, there seems to be a significant reduction in performance with this version of picom. While running, it has an idle CPU load of 5% even without any ongoing animations or refreshes. For comparison, the version from next idles at well under 1% CPU load. For context, I am running this on an AMD Ryzen 7040HS.

[yshui]

While running, it has an idle CPU load of 5% even without any ongoing animations or refreshes

Interesting, I can't reproduce that here. Even when I was playing a video, picom is still using about the same amount of CPU as older versions (for reference it's ~2% on my computer).

[yshui]

the ability to animate windows moving from one part of the screen to another.

It will be supported, but there will be no way to distinguish window moving itself vs you manually moving the window, again because of X11 limitations.

[polluxcodes]

Interesting, I can't reproduce that here. Even when I was playing a video, picom is still using about the same amount of CPU as older versions (for reference it's ~2% on my computer).

It seems that the issue is not present on my computer anymore, and I am now getting comparable performance between next and this version. I'm not sure if it is related to the new commits, or if something on my computer changed. If I notice it again after the feature is merged, I'll try and get some details and create an issue.

[enderprism]

will workspace animations be supported?

[pijulius]

will workspace animations be supported?

Working on something right now, will see what @yshui thinks about it as he may have better ideas

[pijulius]

Hi @yshui added quick implementation for desktop/workspace switching, please check it out https://github.com/yshui/picom/pull/1262

not sure what you had in mind for this but the above is how I had it working before and works now here too with not much change required so thanks for your integration of animations as its very powerful!

[yshui]

Alright, let's merge this!

[DarioDarko]

[ 20.05.2024 00:08:40.431 c2_parse_target WARN ] Type specifier is deprecated. Type "a" specified on target "_NET_WM_STATE" will be ignored, you can remove it. [ 20.05.2024 00:08:40.431 c2_parse_target WARN ] Format specifier is deprecated. Format "32" specified on target "_NET_WM_STATE" will be ignored, you can remove it. [ 20.05.2024 00:08:40.431 c2_parse_target WARN ] Type specifier is deprecated. Type "c" specified on target "_GTK_FRAME_EXTENTS" will be ignored, you can remove it. BUG_ON: "err != NULL" zsh: IOT instruction (core dumped) ./picom

im not sure if i did something wrong, i dont compile usually. this is the current next branch

this was my approach of compiling

git clone https://github.com/yshui/picom --branch animation-part2 cd picom meson setup --buildtype=release build ninja -C build cd build cd src ./picom

i use endeavourOS and openbox

thanks for your work btw <3 looking forward to the animations

[yshui]

@DarioDarko can you provide your config file?

[enderprism]

i have this issue as well. commenting out the animation sections doesn't solve it.

System info

• OS: EndeavourOS
• Picom version: latest picom-git from the Chaotic AUR
• WM: i3-wm
• CPU: 12th Gen Intel(R) Core(TM) i5-12450H (12) @ 4,40 GHz
• GPU: NVIDIA GeForce RTX 4050 Laptop

Picom config

picom.conf

[yshui]

@enderprism hmm, i can't reproduce it. do you mind open an issue? please include a --log-level=trace log if you do.

@DarioDarko can you do the same as well? thanks.

[DarioDarko]

i opened the issue

https://github.com/yshui/picom/issues/1263

FIXED :) works now!

[enderprism]

when can we expect documentation on this feature?