qt - 在不使用状态的情况下多次播放 QML 动画

Question

我试图让 QML 动画在每次单击时都开始，而不使用状态。它在第一次单击时启动，但在第二次单击时不会启动。
有什么原因吗？这是我正在处理的代码。

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 组件初始化期间绑定(bind)一次。当您调用 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 的值属性在 onClicked 中显式设置 MouseArea 的处理程序.