UIUX: Curves Docker / Anim Transform Mask Tasks
Open, NormalPublic

Description

We've made steady progress with the animated curves docker over the course of the last year. We managed to bring more features and streamline some of the UI. However, there are plenty of tasks left to be done and usability concerns to address. I will enumerate the known workflow issues and provide possible solutions. Once a solution is implemented and in master, the issue will be checked off in order to track progress on remaining issues.

Additionally, this will be used as a hub for discussion. If you have any suggestions for the curves docker or animated transform masks' UIUX, please post them in a comments and I will consider adding it to the list of tasks.

  • Ability to independently key desired channels. Right now, when animating animated transform masks, all possible channels get a keyframe. This is less than ideal, as users will want to control which channels they're animating.

    Solution: we will aim for something similar to Blender, though I would like to make adjustments. With blender, when trying to add keys using the insert key hotkey (currently [i] key), the user is shown a dropdown list of combinations.



    With Krita, I propose we do a similar design but show a menu with all options featured as check boxes. When the menu closes, any of the checked channels will be keyed as a single unit w/ undo support. This removes the need to add every possible combination, reducing UI spam.



    This menu will be shown when clicking the popup button to the side of the add scalar keyframe. When clicking the add scalar keyframe button directly, it will add a key to whichever channels were last configured. (Default will be all keyframe channels, like current implementation) For the hotkey, the ideal solution would be to show the menu and then apply the action when the menu closes.

    We might also prevent having no-channels selected, and also default to a singular channel if there aren't multiple options available.
  • Overlapping selections. Currently, having multiple keyframes that overlap on the same value and time can result in multiple keys being selected. It might be nice to come up with a solution to this problem.

    Solution: None yet...
  • Streamline drag and drop experience and selection workflow. Improvements have been made here in the past but it seems like more can be done here.

    Solution: Arguably, dragging selected nodes should only happen when you click near an already selected node. Accidental movements happen when trying to click an additional node, which feels error prone and clunky.
  • Order and colors associated with channels are inconsistent. Additionally, some colors like red/green should be properly associated with x/y position coordinates.

    Solution: Perhaps we should only show curves for "active" layers, and keep the colors unique for each possible scalar channel? This one is unclear to me...
eoinoneill triaged this task as Normal priority.
eoinoneill updated the task description. (Show Details)Feb 25 2021, 4:04 AM

In terms of a UI/UX improvement, I think a really nice thing would be able to add and remove transform mask keyframes without having to open up the curves docker. While some people might want fine tune control, a lot of other people might not want to see the animation curves docker to do animating.

For a potential solution - one thing that we could do is refactor the right-click menu a bit when you click a frame.

Right now when you right click on the frame 0 for a transform mask in the timeline, this is the list of options you get.

Creating a blank frame, as well as pretty much all these options, currently does nothing on transform mask layers. Talking with @woltherav a bit, we had a good idea of potentially calling opacity and transform keyframes "property keyframes". I feel like we could make the UI better with a few changes...

  1. Renaming the actions and tooltips on the curve docker to reflect a better name. Right now the add button has a name "Adds keyframe to control layer opacity". Maybe it could just be something like "Add property keyframe" and "Remove property keyframe"
  2. Create an "activation flag" for property keyframes. We need this to disable menu options when you right click a keyframe on a transform mask.
  3. Add in a few actions from the curves docker to the right-click menu to make adding and removing property frames easier.

We have a couple of other points here:

1.) We have a bunch of suggestions here: https://krita-artists.org/t/krita-5-0-animation-docker/17733/15

The main suggestion that I want us to consider is the prev/next keyframe buttons.
Do we need dedicated buttons for this? Could we have the prev/next frame buttons change into prev/next keyframe while holding ctrl?

and

2.) Animtim was also suggesting that we move the Animation Curves Docker's zoom/navigation buttons to another bar above the Channels List, similar to what we have going on with the Timeline Docker.

I'm not against doing this, although neither place (the titlebar or above the layers/channels) feels like it really makes a ton of sense to me. It might be worth doing just to save some space on the titlebar for other things down the road.

One thing is for sure though, we are very quickly running out of space on the titlebar!