Reputation: 1806
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
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