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.typeis "anim.easing.type". "anim" is the id of the typeNumberAnimation, but what are easing and type in it? I consulted the Help but couldn't find such properties. -
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? -
@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.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.
-
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.
@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. -
@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.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.
-
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.htmlto get a feel what is type of ease curve does.
-
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.htmlto 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?
-
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.
-
@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?
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?
Thepropertyproperty 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 writeproperty: "x"for yproperty: "y"for x and yproperties: "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 anItemis 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
Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct
Q: What's that?
A: It's blue light.
Q: What does it do?
A: It turns blue. -
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?
Thepropertyproperty 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 writeproperty: "x"for yproperty: "y"for x and yproperties: "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 anItemis 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
propertyindependent 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). -
@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
propertyindependent 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
propertyindependent of need to refer to a specific item's property?It basically looks for a specific property name, in this case
valueof 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 andNumberAnimationandstates. 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 ;-)
Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct
Q: What's that?
A: It's blue light.
Q: What does it do?
A: It turns blue. -
Hi
Maybe this one is is worth checking out
https://www.amazon.com/Getting-started-Quick-multidevice-applications-ebook/dp/B01B9DV54G -
@tomy
You might want to take a look at the QML book https://qmlbook.github.io/en/
Chapter 5 talks about animations. -
@tomy
You might want to take a look at the QML book https://qmlbook.github.io/en/
Chapter 5 talks about 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?
@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
AnimationControllerat 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 !
-
@tomy said in Dealing with animations:
Did you mean that 'value' acts here like a unique property making the
propertyindependent of need to refer to a specific item's property?It basically looks for a specific property name, in this case
valueof 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 andNumberAnimationandstates. 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 ;-)
-
@tomy
You might want to take a look at the QML book https://qmlbook.github.io/en/
Chapter 5 talks about animations. -
@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
AnimationControllerat 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 !
