Воспроизведение анимации QML более одного раза без использования состояний

Question

Я пытаюсь заставить анимацию QML запускаться каждый раз, когда на нее нажимают, без использования States.Запускается при первом нажатии, но не запускается при повторном нажатии.Есть ли причина, почему?Вот код, с которым я работаю.

Image {
    id: head;
    source: "vlad.png";
    height: 80;
    width: 90;
    MouseArea {
        anchors.fill: parent
        onClicked: animateHead.start();
        ParallelAnimation {
            id: animateHead;
            NumberAnimation {
                property int randomValueX: 0;
                function randomize(randomValueX) {
                    randomValueX = (Math.floor(Math.random()*210));
                    return randomValueX;
                }
                target: head;
                properties: "x";
                to: randomize(randomValueX);
                duration: 1000;
                easing {
                    type: Easing.OutBack;
                    overshoot: 5
                }
            }
            NumberAnimation {
                property int randomValueY: 0;
                function randomize(randomValueY) {
                    randomValueY = (Math.floor(Math.random()*210));
                    return randomValueY;
                }
                target: head;
                properties: "y";
                to: randomize(randomValueY);
                duration: 700;
                easing {
                    type: Easing.OutBack;
                    overshoot: 5
                }
            }
        }
    }
}

Answer 1

Проблема заключается в том, что значения to свойств двух экземпляров NumberAnimation связаны только один раз во время инициализации компонента QML.Они не пересчитываются при вызове animateHead.start(), и анимации выполняются только в том случае, если значение свойства to отличается от фактического значения анимированного свойства.Вот почему он работает только в первый раз.

Рабочим решением будет:

import QtQuick 1.0

Image {
    id: head;
    source: "vlad.png";
    height: 80;
    width: 90;
    MouseArea {
        anchors.fill: parent
        onClicked: {
            xAnimation.to = Math.floor(Math.random()*210)
            yAnimation.to = Math.floor(Math.random()*210)
            animateHead.start();
        }
        ParallelAnimation {
            id: animateHead;
            NumberAnimation {
                id: xAnimation
                target: head;
                properties: "x";
                duration: 1000;
                easing {
                    type: Easing.OutBack;
                    overshoot: 5
                }
            }
            NumberAnimation {
                id: yAnimation
                target: head;
                properties: "y";
                duration: 1000;
                easing {
                    type: Easing.OutBack;
                    overshoot: 5
                }
            }
        }
    }
}

Здесь значения свойств to явно задаются в обработчике onClickedMouseArea.

Answer 2

Так же, как примечание, поскольку я пытался решить подобную проблему, погуглил этот вопрос и решил, что должен быть другой способ иметь дело с инициализацией анимированного свойства.В Qt 5 вы можете использовать <a href="http://doc.qt.io/qt-5/qml-qtquick-propertyaction.html" rel="nofollow">PropertyAction</a> для мгновенной инициализации некоторых свойств.

Пример из PropertyAction документации типа:

SequentialAnimation {
  PropertyAction { target: img; property: "opacity"; value: .5 }
  NumberAnimation { target: img; property: "width"; to: 300; duration: 1000 }
  PropertyAction { target: img; property: "opacity"; value: 1 }
}

Я не знаюкак бы он взаимодействовал с ParallelAnimation, но он очень хорошо работает с SequentialAnimation.