Problem applying animation to InputPanel QML type

Question

I have the following input panel :

        InputPanel{
                id: inputPanel
                visible: false
                y : window.height/2
                width: window.width
                height: window.height/2
                transitions: Transition {

                    NumberAnimation {
                        target: inputPanel
                        property: "height"
                        duration: 500
                        easing.type: Easing.InOutQuad
                    }

                }
            }

But that NumberAnimation has no effect, so are SmoothedAnimation , PathAnimation and SequentialAnimation.
I use Qt 5.14

Any help is appreciated.

If you look at the documentation for `InputPanel`, it says you should not try to set the height as that is automatically calculated to maintain the aspect ratio. Don't you really want to animate it's x/y position instead? — David K. Hess, May 08 '20 at 00:19
@DavidK.Hess I also tried using x/y property .But still no animation.Also if I don't manipulate the width and height directly , it would either cover the other elements in my form or expands to an undesirable size. — Parsa Mousavi, May 08 '20 at 07:45
`Transition` only makes sense when used with `State`s, or rather it will trigger on a state change so your code will never run the animation. — folibis, May 08 '20 at 11:06
@ParsaMousavi "The keyboard size is automatically calculated from the available width; that is, the keyboard maintains the aspect ratio specified by the current style. Therefore the application should only set the width and y coordinates of the InputPanel, and not the height." In other words, if you set the width the size of the thing is fixed. — Timon van der Berg, May 08 '20 at 11:08

Timon van der Berg · Answer 1 · 2020-05-08T13:53:33.663

0

You want a behaviour.

InputPanel {
    Behavior on width {
        NumberAnimation {
            duration: 2000
        }
    }
    width: 400
    active: true
}

As mentioned by folibis, transitions are for state changes.

edited May 08 '20 at 13:53

answered May 08 '20 at 11:14

Timon van der Berg

506
4
10

Still after using "Behavior" I cannot see any animation. – Parsa Mousavi May 08 '20 at 12:19
Try animating `width` instead of `height`. See my updated (tested) example – Timon van der Berg May 08 '20 at 13:54
Nothing yet. Which Qt version do you use? – Parsa Mousavi May 08 '20 at 15:49
I'm using 5.12.7. Have you tried my stripped down example? – Timon van der Berg May 09 '20 at 16:25
Yes.But it didn't work. At least in Qt 5.14. Sorry I haven't 5.12 to test that. – Parsa Mousavi May 09 '20 at 16:31
I used your code exactly as you posted it besides the "id" and "visible : false" property. The latter is to enable the program to show it via a click on some button to better demonstrate the animation. – Parsa Mousavi May 09 '20 at 16:37
Could you please post the code that doesn't work after using Behavior on width? – Skonitsa May 09 '20 at 17:28
@ParsaMousavi Changing `visible` does not change `width` or `height`. Do you want to animate changes in `visible` ? – Timon van der Berg May 10 '20 at 17:55
@TimonvanderBerg Using "visible" as the animation property only causes some delay in showing the keyboard(e.g it appears after 300 ms). But it cannot animate it. – Parsa Mousavi May 10 '20 at 21:33
@Skonitsa I copy-pasted the code in the answer plus the "id" and "visible" property. Nothing more.Nothing less. Furthermore if the target of your comment is someone but the owner of the post which you're commenting on , please add "@target_username" at the beginning of the comment to notify him/her . – Parsa Mousavi May 10 '20 at 21:37
@ParsaMousavi if you want changes in `visible` to be accompanied by animations you should have a look at https://stackoverflow.com/questions/12333112/qml-animations-visible-property-changes – Timon van der Berg May 11 '20 at 05:36
@TimonvanderBerg That works .Nice . Instead of assigning the "stateVisible" to true in that example , I assigned it to "inputPanel.visible" so that if the visibility of the panel changes , the animation triggers. It generates a clean fade effect . Although I wanted the animation to be on the height property , but that's nice.You can post it as the answer or edit your current one. Thanks a lot. – Parsa Mousavi May 11 '20 at 06:50

Problem applying animation to InputPanel QML type

1 Answers1