Animation System

[FelixKratz]

I imagine a system where selected properties could be modified exactly as in the --set domain, but with a duration and an easing function. The syntax would look something like this:

sketchybar --animate <function> <duration>

where sketchybar would animate the transition from the current values to the final values with the given animation parametery by interpolating between them with the easing function.

This would work well for colors and coordinates (y_offset, paddings, etc...) I think.
I would likely hard code some nice easing functions, such as a truncated exponential or a truncated tanh etc..

Are there additional ideas I should take into consideration while designing this?

[gronk-droid]

hi there @FelixKratz. from what I have going on in my configuration right now, this is what i have for an animation-esque charging animation:

items/system.sh

#!/bin/bash
CHARGING=$(pmset -g batt | grep 'AC Power')
if [[ ${CHARGING} != "" ]]; then
    BATT_SCRIPT="$PLUGIN_DIR/charging.sh"
    BATT_ICON_SIZE="$FONT:Regular:26.0"
else
    BATT_SCRIPT="$PLUGIN_DIR/battery.sh"
    BATT_ICON_SIZE="$FONT:Regular:13.0"
fi



sketchybar  --clone     system.label      label_template                                \
            --set       system.label      label=sys                                     \
                                          label.align=center                            \
                                          position=left                                 \
                                          drawing=on                                    \
                                          script="$PLUGIN_DIR/window_title.sh"          \
            --subscribe system.label      front_app_switched                            \
                                                                                        \
            --add       item              battery left                                  \
            --set       battery           update_freq=100                               \
                                          script="$BATT_SCRIPT"                         \
                                          icon.font="$BATT_ICON_SIZE"                   \
                                          label.font="$FONT:Bold Italic:14.0"           \
                                          background.height=$SEGMENT_HEIGHT             \
                                          label.padding_right=0                         \
                                                                                        \
            --add       item               system.caffeinate left                       \
            --set       system.caffeinate  update_freq=100                              \
                                           icon=$LOADING                                \
                                           label.drawing=off                            \
                                           script="$PLUGIN_DIR/caffeinate.sh"           \
            --subscribe system.caffeinate  mouse.clicked                                \
                                                                                        \
            --add       item               system.yabai_float left                      \
            --set       system.yabai_float script="$PLUGIN_DIR/yabai_float.sh"          \
                                           label.drawing=off                            \
                                           updates=on                                   \
            --subscribe system.yabai_float front_app_switched window_focus mouse.clicked\
                                                                                        \
            --add       bracket            system                                       \
                                           system.label                                 \
                                           battery                                      \
                                           system.caffeinate                            \
                                           system.yabai_float                           \
                                                                                        \
            --set       system             background.drawing=on

plugins/battery.sh

#!/bin/bash

BATT_PERCENT=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
CHARGING=$(pmset -g batt | grep 'AC Power')

sketchybar --set ${NAME} icon.color=0xff2d2a2e

case ${BATT_PERCENT} in
    100) ICON="" ;;
    9[0-9]) ICON="" ;;
    8[0-9]) ICON="" ;;
    7[0-9]) ICON="" ;;
    6[0-9]) ICON="" ;;
    5[0-9]) ICON="" ;;
    4[0-9]) ICON="" ;;
    3[0-9]) ICON="" ;;
    2[0-9]) ICON="" ;;
    1[0-9]) ICON="" ;;
    *) ICON=""
esac

sketchybar --set ${NAME} icon="${ICON}"
sketchybar --set ${NAME} label="${BATT_PERCENT}%"

plugins/charging.sh

#!/bin/bash

BATT_PERCENT=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
CHARGING=$(pmset -g batt | grep 'AC Power')

sketchybar --set ${NAME} icon.color=0xff2d2a2e

while [[ ${CHARGING} != "" ]]; do
    sketchybar --set ${NAME} label="${BATT_PERCENT}%"
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
    sleep .5
    sketchybar --set ${NAME} icon=""
done

thanks to @ut0mt8 for the code in this comment.

i know this is separate from the implementation you are describing, but i found this to be a related enough topic to share for anyone else looking at this. it required a nerdfont to be installed, but something like this where the trigger between charging/not charging changing how an element on the bar looks is exactly what this sort of thing would be great for, as well as the bar itself being responsive/animating.

tl;dr: a big upvote for this feature!

[FelixKratz]

I have achieved a first implementation of the animation system (d440b00) and implemented it for the --bar properties so far. It is easy to extend the new animation system to the remaining properties and I will do that shortly.

The experimental (and undocumented) syntax for those that want to try the animation system early is:

sketchybar --animate <curve> <steps> --bar <property>=<value> ... <property>=<value>

so basically, the --animate command with the animation curve and steps (where currently only linear is implemented) can be inserted into any batched command and the animation will be applied to all properties which are set in this specific command.

Please tell me what you think about this implementation.

E.g. try:

sketchybar --animate linear 50 --bar y_offset=20 margin=10 blur_radius=30

[FelixKratz]

Since f71192c the tanh animation function is available, e.g. for a nice startup animation like this:

animation.mp4

Next steps for this are:

• Color transition animations
• Animations for all --set commands
• Performance Optimizations ("Picky" Bar Redrawing #129)

[FelixKratz]

Since 4bb1b51 all --set commands can be animated.
Color transitions coming soon.

[yorhodes]

awesome work!

[FelixKratz]

Since 9eeacd3 all color transitions can be animated, e.g. for a space switching animation like this:

animation.mp4