Dealing with animations



  • Hello,

    Please take a look at this example I'm trying to understand it completely.

    import QtQuick 2.8
    
    Rectangle {
        id: root
        width: 100
        height: 100
        clip: true
        property real value: 0.0
        property int pointCount: 100
        property string title
        signal clicked()
    
        property alias easingType: anim.easing.type
    
    
        Image {
            anchors.fill: parent
            source: "blueprint.jpg"
        }
    
        Rectangle {
            anchors.fill: view
            anchors.leftMargin: -8
            anchors.rightMargin: -8
            color: 'transparent'
            border.color: "#53d769"
            border.width: 4
            opacity: 0.5
    
        }
    
    
        NumberAnimation {
            id: anim
            target: root
            property: 'value'
            from: 0
            to: 1
            duration: 3000
        }
    
        ListModel {
            id: valueModel
        }
    
        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})
                }
            }
        }
    
        PathView {
            id: view
            anchors.fill: parent
            anchors.topMargin: root.height*0.2
            anchors.bottomMargin: root.height*0.2
            model: valueModel
            pathItemCount: root.pointCount
            delegate: Item {
                width: 4; height: 4
                Rectangle {
                    width: parent.width; height: width; radius: width/2
                    y: -model.value*view.height
                    color: "#ff8800"
                    border.color: Qt.lighter(color, 1.2)
                    opacity: 0.5
                }
            }
            path: Path {
                startX: 0
                startY: view.height
                PathLine {
                    x: view.width
                    y: view.height
                }
            }
        }
    
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            color: '#fff'
            font.pixelSize: 14
            text: root.title
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: root.clicked()
        }
    }
    

    The question on property alias easingType: anim.easing.type is "anim.easing.type". "anim" is the id of the type NumberAnimation, but what are easing and type in it? I consulted the Help but couldn't find such properties.



  • @tomy NumberAnimation is a PropertyAnimation ("Inherits" section in NumberAnimation docs) - see that documentation, there's the 'easing' property group.



  • @tomy Hi,

    easing is a Property of Animation and as "sub-properties" such as type, apmplitude, overshoot etc.

    You can read that here:

    the property alias part is there to make the property available outside the QML-Object/File.



  • Thanks.

    Please look at the NumberAnimation there. It's used for drawing the curves not any animation! (I couldn't find such a feature in its description on Help). As well as, what does its duration do? I changed it from 1000 to 19000 and saw no functional change!
    'value' is a real (float) number (0.0) but when I use '0.0' it doesn't work. And what is its role here please?



  • Isn't there further help!?


  • Qt Champions 2016

    @tomy
    Hi
    Duration is how long (milliseconds)
    it will use to reach the new value
    so in sample
    NumberAnimation on x { to: 50; duration: 1000 }
    it will goto 50 over 1 sec
    You should see it goes slower if you raise it.



  • @mrjj

    Duration is how long (milliseconds)
    it will use to reach the new value
    so in sample
    NumberAnimation on x { to: 50; duration: 1000 }
    it will goto 50 over 1 sec
    You should see it goes slower if you raise it.

    Hi,

    Yes, you're right in that case but the example is something else. First, its property is on a string (which is a number, 0.0), not on x or y!
    Second, its job in this example is seemingly drawing the curves. Isn't it strange?

    Third: Does its duration mean it goes slower/faster on drawing the curve if we use bigger/slower number for that?

    By the way, mrjj, the book really sucks. I don't know how to continue learning QML. :( I also fear the Docs, they are as complicated as that book.


  • Qt Champions 2016

    @tomy
    Well a PropertyAnimation can animate any property so not sure what its so strange.
    what curves ? you mean easing curves ?

    The duration says how long the animation should last.
    so a low value will often make sit seems faster. but it also depends
    on how big change will be needed. ( for the x,y, what being animated)

    Well the book is what is it. I dont think i ever saw one that
    would explain all in great details all the time.
    Maybe some youtube video could help.



  • @mrjj

    you mean easing curves ?

    Yes.

    The duration says how long the animation should last.
    so a low value will often make sit seems faster. but it also depends
    on how big change will be needed. ( for the x,y, what being animated)

    Yes, I'm familiar with duration but it doesn't work for the example. As I said, I tested it for both 1000 and 19000, no changes! If possible please you run that example yourself.
    Again, what does a property on a string which is a value which is zero mean please? If we change that zero (0.0) to -5 or +5, again no changes happen as well!

    If you run the example and work on those items we talked about here, you will figure out what I mean.


  • Qt Champions 2016

    Hi
    easing curves are not drawn.
    They define how the animation is calculated.
    if values are straight interpolated or it should follow a curve giving
    a much smoother effect.

    You can try
    http://doc.qt.io/qt-5/qtwidgets-animation-easing-example.html

    to get a feel what is type of ease curve does.



  • @mrjj
    Hi,
    Thanks for your time. But that example is much more complicated the my own one! :)

    If you answer the questions (I've asked more than three times here on this thread) about simple things, I think it would also be helpful. :)

    1- Why isn't the property on x or y but a string with a floating point value 0.0?
    2- Why isn't there any change if we don't use 0.0 but a negative number, say, -5, or a positive one, say, +5, or farther?

    3- Why isn't there any change when we alter the duration and make big difference?


  • Qt Champions 2016

    Hi
    Oh it was just ment as a way to play with the different ease curves to see the effect.

    1: i think they just use a string to make it easier to say valueModel.append() later on.
    it expects a string. not a float/real.

    2: the aimation is set up with
    from: 0
    to: 1
    the string value is not used for that.

    3: i dont know what samples does so i cant tell.



  • HI, let me see if I can help you.
    @tomy said in Dealing with animations:

    1- Why isn't the property on x or y but a string with a floating point value 0.0?
    The property property is basicaly the reference what property shall be targeted for the animation, its referenced as a string.
    Would you want to change the x value you would have to write property: "x" for y property: "y" for x and y properties: "x,y"

    Why is it a string instead of the property, well no idea, but my best guess is, if its a propery you would have to reference it with an ID e.g myItem.x. But that is lost of you convoluted QML obejects. And everything but an Item is convoluted.

    2- Why isn't there any change if we don't use 0.0 but a negative number, say, -5, or a positive one, say, +5, or farther?

    3- Why isn't there any change when we alter the duration and make big difference?

    No idea, I find this example very confusing and hard to read.
    Have you tried the Qt Quick Examples - Animation ? I think that would be better for getting started in QML-Animations



  • @J-Hilk
    Hi, Thanks, you did.

    but my best guess is, if its a propery you would have to reference it with an ID e.g myItem.x.

    Did you mean that 'value' acts here like a unique property making the property independent of need to refer to a specific item's property?

    No idea, I find this example very confusing and hard to read.

    So do I. I'm highly astonished why there isn't any good reference appropriate for newcomers of QML!! It's a hardship.
    Thanks also for the example. I'm appreciative of that but it's too long for this level of me (hundreds of lines of code with several components including many types and new items). I would need a simpler one.
    Anyway, if Docs is the only reference for learning QML in your point of view too, which is better than that online book, where to start from? Some point that much resembles a step-by-step route from beginning to the end (similar to a book).



  • @tomy said in Dealing with animations:

    Did you mean that 'value' acts here like a unique property making the property independent of need to refer to a specific item's property?

    It basically looks for a specific property name, in this case value of your QML-Object and all its "base-classes" and binds the animation to that property, if it can find one appropriatly named.

    I would guess a process similar to Qt4 SignalSlot

    Thanks also for the example. I'm appreciative of that but it's too long for this level of me (hundreds of lines of code with several components including many types and new items). I would need a simpler one.

    of course the example covers more or less the whole area of property animations. For your current case, you should simply look into Transitions.qml. Thats 133 Lines of code dealing with 3 Rectangels a logo and NumberAnimation and states. You should be able to simply copy and paste that into a clean new project.

    Anyway, if Docs is the only reference for learning QML in your point of view too, which is better than that online book, where to start from? Some point that much resembles a step-by-step route from beginning to the end (similar to a book).

    In the end it really depends on you, your time available and the money you're willing to spend.

    There are a couple Qt-certificated Partners that offer small group training sessions, KDAB comes to my mind here. Really good and usually on the point, but very expensive.

    What I usually do is the following:

    • I set in mind a specific goal I want to archive.
    • If its new territory, do a quick google search on the topic.
    • Spend some time going through examples, trying to understand them.
    • Create a basic working program with the examples and/or the docu
    • If that is more difficult than expected => recreate the example by hand
    • Refine and expand the code until the previously set goal is reached

    this usually takes some time, but I can also remember stuff years later ;-)


  • Qt Champions 2016


  • administrators

    @tomy
    You might want to take a look at the QML book https://qmlbook.github.io/en/
    Chapter 5 talks about animations.


  • Qt Champions 2016

    @tekojo
    I think he is already using the book but feels its not as detailed step by step as he would like.
    As far as I could find, it is the book for learning QML.



  • @tomy said in Dealing with animations:

    @mrjj
    Hi,
    Thanks for your time. But that example is much more complicated the my own one! :)

    If you answer the questions (I've asked more than three times here on this thread) about simple things, I think it would also be helpful. :)

    1- Why isn't the property on x or y but a string with a floating point value 0.0?
    2- Why isn't there any change if we don't use 0.0 but a negative number, say, -5, or a positive one, say, +5, or farther?

    3- Why isn't there any change when we alter the duration and make big difference?

    Easing is the curve that is used during your animation, have a look at this doc about easing.

    I advise you also to run this example , and to see how easing change your animation.

    1- Why isn't the property on x or y but a string with a floating point value 0.0?

    The string is used in property to know which property we need to animate , see this link

    property : string

    These properties are used as a set to determine which properties should be animated. The singular and plural forms are functionally identical, e.g.

    NumberAnimation { target: theItem; property: "x"; to: 500 }

    2- Why isn't there any change if we don't use 0.0 but a negative number, say, -5, or a positive one, say, +5, or farther?

    Because the -5 that you are writing is just an initial value, after that you are telling in NumberAnimation that value must be from 0 to 1.

    NumberAnimation {
        id: anim
        target: root
        property: 'value'
        from: 0
        to: 1
        duration: 3000
    }
    

    3- Why isn't there any change when we alter the duration and make big difference?

    Cause your animation is driven by AnimationController (in your case the timer is not used at all) and the Qt Doc says that :

    Normally animations are driven by an internal timer, but the AnimationController allows the given animation to be driven by a progress value explicitly.

    As @tekojo said qmlbook is a good one to start qml.

    I don't know what are you doing exactly , but for my personal opinion you don't have to use AnimationController at all. you can do a lot of funny animation only with (NumberAnimation , SequentialAnimation, ParallelAnimation)

    Take a look in this Qt Quick Example

    I hope this can help you , and if not ,you can tell me what do you want to achieve , and i will try to help you !



  • @J.Hilk
    Thank you for all of your suggestions. I appreciate them.



  • @tekojo
    Thanks, but I think I'm reading that book and getting stuck in it often! :)



  • @mostefa
    Thank you very much. It was helpful and I appreciate you.
    The book you (and the other guy) suggested is the one I'm currently reading.



  • @mostefa

    I want to explain the first parts of the code based on my understanding and if possible, you please state your idea on it.

    Rectangle {
        id: root
        width: 100
        height: 100
        clip: true
        property real value: 0.0
        property int pointCount: 100
        property string title
        signal clicked()
    
        property alias easingType: anim.easing.type
    
    
        Image {
            anchors.fill: parent
            source: "blueprint.jpg"
        }
    
        Rectangle {
            anchors.fill: view
            anchors.leftMargin: -8
            anchors.rightMargin: -8
            color: 'transparent'
            border.color: "#53d769"
            border.width: 4
            opacity: 0.5
    
        }
    
        NumberAnimation {
            id: anim
            target: root
            property: "value"
            from: 0
            to: 1
        }
    

    First we have a squared rectangle (100, 100) that limits all painting to its borders. And it has some properties (of types real, int, string, signal and alias) which will be used later on the code. Until now that rectangle won't be shown because it hasn't a color.

    On Image, the blue square like one of these will fit onto the previous rectangle.

    After these two items, we reach the next Rectangle with the color transparent. This rectangle is mostly for drawing two top and down lines to act like two x-axes for the curve.
    The next object is NumberAnimation. It specifies the root as its target and the property as 'value' to be used by the AnimationController. It also sets the range to be used for making the curve from 0 to 1. I remove the duration property.

    Up to this point, is all of the above comprehension about each section correct please?



  • @tomy said in Dealing with animations:

    @mostefa

    I want to explain the first parts of the code based on my understanding and if possible, you please state your idea on it.

    Rectangle {
        id: root
        width: 100
        height: 100
        clip: true
        property real value: 0.0
        property int pointCount: 100
        property string title
        signal clicked()
    
        property alias easingType: anim.easing.type
    
    
        Image {
            anchors.fill: parent
            source: "blueprint.jpg"
        }
    
        Rectangle {
            anchors.fill: view
            anchors.leftMargin: -8
            anchors.rightMargin: -8
            color: 'transparent'
            border.color: "#53d769"
            border.width: 4
            opacity: 0.5
    
        }
    
        NumberAnimation {
            id: anim
            target: root
            property: "value"
            from: 0
            to: 1
        }
    

    First we have a squared rectangle (100, 100) that limits all painting to its borders. And it has some properties (of types real, int, string, signal and alias) which will be used later on the code. Until now that rectangle won't be shown because it hasn't a color.

    On Image, the blue square like one of these will fit onto the previous rectangle.

    After these two items, we reach the next Rectangle with the color transparent. This rectangle is mostly for drawing two top and down lines to act like two x-axes for the curve.
    The next object is NumberAnimation. It specifies the root as its target and the property as 'value' to be used by the AnimationController. It also sets the range to be used for making the curve from 0 to 1. I remove the duration property.

    Up to this point, is all of the above comprehension about each section correct please?

    For me i think that all your explanation is correct ! =)



  • @mostefa
    Thank you.



  • @tomy said in Dealing with animations:

    @mostefa
    Thank you.

    You are welcome =)



  • @tomy This is going to be off-topic, but I thought maybe I could help in another way.

    Maybe the problem is not so much the book (which really is problematic in some ways) but your learning strategy. You seem to want to understand every detail when you see it. It's a good thing but can lead to situation where you get stuck with things which are actually irrelevant for you at the moment. You have said you need and want to learn QML. Why? For what do you need it? Do you want to learn to animate cool visual things? Or do you want to create a working and practical user interface for some application which you need? If it's the latter, you don't need animations at all and can read the animation part of the book with a cursory glance. Nobody can expect to read a book with a new subject area and understand it all. There's much in Qt or even just in the QML part of it which you will never need or use. There's also much you don't need to know actively, for example you don't need to create grouped properties or attached properties right away, you just need to recognize them when you see them and use something which someone else has created.

    It's important to learn meta-learning skills, i.e. learn to how to learn effectively. One part of it is knowing what to not learn at the moment and just let some things be and go forward. Sometimes I read a book (not necessarily about programming) of which I understand maybe 10% or less. But when I read more and more I will understand those things which I didn't previously understood, and I wouldn't have understood them if I hadn't previously read that 90% which I didn't understand back then. Giving up isn't a bad thing if you know when and how to do it. Don't give up your greater goals, learn to give up some details if they hinder you from going forward.

    Another important thing is that if you don't have a personal task it's more difficult to learn. Just going through some examples which someone has made up is tedious, at least for me. I need some short-term goal, for example a user interface which does something for me which I actually want or need. Then I can search for things which are actually relevant for me and I can integrate them into my own task. The feeling when you get something done for your own needs is much better than when going through made-up examples. Do you have something specific you want to do with QML?



  • @Eeli-K

    I appreciate your good talks. That's very kind of you.
    I will make them remained in my mind.



  • 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?



  • @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.



  • @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!



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



  • @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?



  • @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.



  • @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



  • @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.



  • 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.


  • administrators

    @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.