Animations with dynamic content
-
Hello,
I'm new to the animations in QML, and am not sure how to integrate behaviors and animations into my use case.
I have a list of custom QtQuick items (written in C++). I want to arrange them in a grid. The list of items is dynamic; items can be added and removed at runtime. I can also select an item, in which case it should be zoomed in.
I want to animate the following:
- When I add or remove an item, the grid readjusts itself. This should be animated to show the transition between old and new arrangement. (Some ease in - ease out curve perhaps.)
- When I select an item, the unselected items should be pulled into the background and have their opacity set to 10%, while the selected item should be zoomed to cover the screen. So, the other items are still visible, but barely, and they are clearly in the back.
The way I see this I'd need a Component with a bunch of states and several numerical properties in the 0..1 range: one property for linearly interpolating between an old and a new item arrangement, and one parameter for linearly interpolating between "all items 100% opaque and equally arranged" and "the N-1 unselected items at 10% opacity and moved in the back & the selected item 100% opaque and maximized in the front". Transitions between the states would then make use of Behaviors and Animation objects.
Am I on the right path here?
-
I recommend checking out the built-in components first.
To make a dynamic list of items, control them using MVP. Here is a summary of how models work in QML. Since you already have your items in C++, it might be advisable to use a C++ model based on QAbstractItemModel.
Regarding item placement and animations, see GridView, ListView. In some cases, a Repeater could work better, or a Flow.
And when it comes to showing single item expanded on the whole screen - maybe use StackView for that? Your grid could be on one page, and expanded views would pop in and out on demand.
-
Ah, good point, thanks! Using ListModel and GridView certainly makes sense. I'll check that out. Can there be a transition between the two views? I want to avoid that suddenly, the selected item is expanded - there should be a transition, where the selected item expands until it is maximized (with an ease in / ease out curve).
Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.
-
Ah, good point, thanks! Using ListModel and GridView certainly makes sense. I'll check that out. Can there be a transition between the two views? I want to avoid that suddenly, the selected item is expanded - there should be a transition, where the selected item expands until it is maximized (with an ease in / ease out curve).
Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.
@dv__ said in QML animations with dynamic content:
Ah, good point, thanks! Using ListModel and GridView certainly makes sense. I'll check that out. Can there be a transition between the two views? I want to avoid that suddenly, the selected item is expanded - there should be a transition, where the selected item expands until it is maximized (with an ease in / ease out curve).
Yes, see the documentation. You can animate adding, removing, moving items in a grid. And about expanding the item - here I would rather recommend creating a different component for the "big" element. Then you can animate the expansion while the base grid would actually stay unchanged.
Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.
Yes, using the models is supported by all positioners like GridView, ListView, PathView (that one allows you to position them really arbitrarily). If you want to show a view with more advanced grid (like Microsoft's tiles, for example, where they can all be of different sizes), there are external QML extensions that can help. I/m sure I've seen some here on forums, but I can't find it now :|
-
Ah, good point, thanks! Using ListModel and GridView certainly makes sense. I'll check that out. Can there be a transition between the two views? I want to avoid that suddenly, the selected item is expanded - there should be a transition, where the selected item expands until it is maximized (with an ease in / ease out curve).
Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.
@dv__ said in QML animations with dynamic content:
Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.
To do this I'd use a raw
Itemcontainer with aRepeaterand manual positioning in the delegates.
