Start animation with click on mouse area

ChristianSky

Hello,
I think I have a very simple problem, but I'm completely stumped right now.

I have two files:
App.qml
Screen01.ui.qml

In Screen01.ui.qml I have two text elements (freqzency1a & frequency1b) which I want to swap by an animation from left to right.
I have already created an animation id: changeFrequency1 in Screen01.ui.qml.

Additionally I have created a MouseArea in App.qml.

Question:

is the division into the two files so correct?
how can I trigger the animation changeFrequency1 by clicking on the MouseArea?

Thanks a lot
Christian

App.qml

import QtQuick
import QtQuick.Window
import Communication2
import QtQuick.Timeline 1.0

Window {
    width: mainScreen.width
    height: mainScreen.height

    visible: true
    title: "Communication2"

    Screen01 {
        id: mainScreen
    }


    Text {
        id: change1
        x: 180
        y: 115
        color: "#1b9993"
        text: qsTr("< >")
        font.pixelSize: 16

        MouseArea {
            id: change1MouseArea
            x: -10
            y: 0
            width: 46
            height: 26
            hoverEnabled: true
            cursorShape: Qt.SizeHorCursor
        }
    }

}

Screen01.ui.qml

import QtQuick
import QtQuick.Controls
import Communication2
import QtQuick.Studio.Components 1.0

import QtQuick.Timeline 1.0

Rectangle {
    //Item {
    id: root

    width: Constants.width
    height: Constants.height
    color: Constants.backgroundColor

    property string freq1a: "bla1"
    property string freq1b: "bla2"

    Text {
        id: frequency1a
        x: 90
        y: 115
        width: 65
        color: "#ffffff"
        text: root.freq1a
        font.pixelSize: 16
    }

    Text {
        id: frequency1b
        x: 275
        y: 115
        width: 65
        color: "#908a8a"
        text: root.freq1b
        font.pixelSize: 16
    }

    //Beginn of the timeline
    Timeline {
        id: changeFrequency1
        animations: [
            TimelineAnimation {
                id: timelineAnimation
                loops: 1
                duration: 1000
                running: false
                to: 1000
                from: 0
            }
        ]
        startFrame: 0
        endFrame: 1000
        enabled: true

        KeyframeGroup {
            target: frequency1a
            property: "x"
            Keyframe {
                value: 90
                frame: 0
            }

            Keyframe {
                value: 275
                frame: 1000
            }
        }

        KeyframeGroup {
            target: frequency1b
            property: "x"
            Keyframe {
                value: 275
                frame: 0
            }

            Keyframe {
                value: 90
                frame: 1000
            }
        }
    }
}

ChristianSky

@sierdzio please correct me if I am wrong, but could it be that I need:

property alias swapAnimation: timelineAnimation

instead of

 property alias swapAnimation: changeFrequency1

Thank you

Christian

sierdzio

id is not visiblew outside a file. So to make it possible to access your animation outside, export it as a property, for example:

// Screen01
Rectangle {
  property alias swapAnimation: changeFrequency1
  id: root

And now in main.qml:

MouseArea {
  id: change1MouseArea
  onClicked: mainScreen.swapAnimation.start()

ChristianSky

@sierdzio please correct me if I am wrong, but could it be that I need:

property alias swapAnimation: timelineAnimation

instead of

 property alias swapAnimation: changeFrequency1

Thank you

Christian

sierdzio

Most probably, yes.