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组件初始化期间仅绑定一次。调用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的{{1}}处理程序中明确设置。

Answer 2

正如笔记一样，因为我试图解决类似的问题，搜索了这个问题并决定必须有另一种处理动画属性初始化的方法。在 Qt 5 中，您可以使用PropertyAction立即初始化某些属性。

来自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的效果非常好。

不使用状态多次播放QML动画

2 个答案: