mohsen
mohsen

Reputation: 1806

NumberAnimation on x don't work in ColumLayout?

I want to animate text on SplashScreen but it don't work but this qml animation work but animation on scale works

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
Page{
    id:splashPage
    Component.onCompleted: {
        txtAnimation.start();
    }
    ColumnLayout{
        id:clm
        anchors.fill: parent
        Image {
            id: icon
            source: "/images/icon.png"
            Layout.preferredHeight: 200
            Layout.preferredWidth: 200
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: (clm.implicitHeight-icon.height)/2
        }
        Text{
            id:txt
            text: "Title under application icon" 
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
        }
        Item {
            Layout.fillHeight: true
        }
    }
    SequentialAnimation{
        id:txtAnimation
        NumberAnimation {
            target: txt
            duration: 1000
            easing.type: Easing.OutElastic
            properties: "x"
            from: -1000
        }
        SequentialAnimation {
            loops: Animation.Infinite
            alwaysRunToEnd: true
            PauseAnimation{
                duration: 600
            }
            PropertyAnimation {
                target: txt
                property: "scale"
                to: 1.0
                duration: 100
            }
            PropertyAnimation {
                target: txt
                property: "scale"
                to: 0.85
                duration: 400
            }
            PropertyAnimation {
                target: txt
                property: "scale"
                to: 1
                duration: 100
            }
        }
    }
}

When I change the NumberAnimation to below it works But in ColumnLayout it don't have x property

        NumberAnimation {
            target: txt
            duration: 1000
            easing.type: Easing.OutElastic
            properties: "x"
            from: -1000
            to:25
        }

I changed the code like below but it don't work too

        Text{
            id:txt
            text: "Title"
            color: "#7f0000"
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
            Behavior on x{
                NumberAnimation {
                    duration: 1000
                    //                    easing.type: Easing.OutElastic
                }
            }
        }

Upvotes: 0

Views: 238

Answers (1)

JarMan
JarMan

Reputation: 8277

The fact that your animation works when you set the to property, but doesn't work without it shows us that it's necessary in this case. So you just need to set it to a value that keeps the text centered horizontally. For that, try this:

    to: (clm.width - txt.width) / 2

Upvotes: 1

Related Questions