Dealing with animations

[tomy]

I want to express my understanding on the rest of the code.
On the way, we reach the ListModel type. It's like a container. After that is AnimationController, which executes its body instructions. So it first clears the container and then adds a hundred floating point numbers (0.0, 0.01, 0.02, ..., 0.99) to the container (using append).

The next executed type (according to the from-top-to-down order) is PathView. Its job is displaying the data (those 100 floating point numbers stored in the ListModel). So the actual draw/design/display of the curve is done by PathView). On delegate it defines how data should be displayed by creating 4x4 orangish rectangles. In fact, it wants to put 100 4x4 rectangles to display the cure. By Path, the type creates a horizontal line (0, 100 to 100, 100). And then it finishes.

The Text type is used for allowing the type EasyingType to have a text property. The MouseArea is used on the component to receive clicks.

What about this part please? Is what I've understood mentioned-above correct?

[Eeli K]

@tomy I think you have understood the purpose of almost all parts correctly, although terminology isn't very clear. Here are some details which aren't crucial:

Types aren't "executed", I'd rather say that objects of those types are created. As I have said earlier (at least I remember having said), the creation order isn't necessarily top-down in implementation, but it's enough for understanding the logic. On the other hand it may be important to understand that Component.onCompleted functions are executed only after the object tree has been created to some point so that objects and their properties can be used in those Component.onCompleted functions, and the order of executing different objects' Component.onCompleted functions is undefined (it's explicitly told in the documentation) and I actually have stumbled on this fact, so it may be important in some situations.

You make one mistake: the last Text element isn't a property. It's just an object which is added to its parent's children list and is one visible object amongst the Image, Rectangle and PathView objects.

[tomy]

@Eeli-K

the last Text element isn't a property. It's just an object which is added to its parent's children list and is one visible object amongst the Image, Rectangle and PathView objects.

Hi,
Yes, I meant that object is used for populating the alias property of the root making it capable of having a property with the name 'title' on its use on the other component.

Would you please take another look at the AnimationControler?

AnimationController {
        id: controller
        animation: anim
        Component.onCompleted: {
            valueModel.clear()
            for(var i=0; i<root.pointCount; i++) {
                progress = i/root.pointCount
                valueModel.append({value: root.value})
            }
        }
    }

In valueModel.append({value: root.value}), the progress values aren't used apparently! What is appended is a constant value, 0.0, which is the value of root!

[tomy]

Still I can't create a good story based on what I comprehended from that component.

[Eeli K]

@tomy In the documentation for AnimationController you can see that it has the 'progress' property which is used here. It would have been better to be explicit about it by writing "controller.progress" instead of "progress". Now look at the NumberAnimation and read its documentation.

Does that help you forward? Can you see what happens to 'value' of root and to valueModel?

[tomy]

@Eeli-K
Yes, I read the documentation on NumberAnimation on Help and also the append function which adds a new item to the end of the list model.
But root.value is a constant, 0.0! In theory there is no benefit of adding many of them to the list, at least in an apparent manner.

PS: sorry for the delay, the situation is too complicated here.

[J.Hilk]

@tomy Maybe I don't understand you, but

property real value: 0.0

is not a constant its a property that is initialized with 0.0

[tomy]

@J.Hilk
Yeah, sorry. I too meant that.
I meant its value doesn't change, it's 0.0, at least from the point of view I see.

[tomy]

Anyway, if the example really sucks and if you advise me to do that, I skip this example and will go to the Grouped Animations section.

[tekojo]

@tomy but you do change the value here:

    NumberAnimation {
        id: anim
        target: root
        property: "value"
        from: 0
        to: 1
    }

When you start the animation it will run root.value from 0 to 1.