Question

我想用QML图像元素height属性制作QML动画。但Image高度属性的负值在Timer中不起作用。

你能告诉我这个动画有什么问题吗？

import QtQuick 1.1

Rectangle {
    width: 300
    height: 300

    property int mySize: 10

    Image {
        x: 150; y: 150
        width: 20
        height: -mySize       // animation does not work in Timer, Why?
        //height: mySize      // animation works in Timer
        source: "Bar.jpg"
    }
    Timer {
        interval: 200
        running: true
        repeat: true
        onTriggered: mySize +=5
    }
}

Answer 1

首先，（回答你的问题），你不能使用负面大小。请改用scaling，它支持负值。

Scale {
    yScale: ...                // <-- change this value; 1 = original size

    Image {
        x: 150; y: 150
        width: 20; height: 10  // <-- use constant size
        source: "Bar.jpg"
    }
}

其次，你应该阅读animations in QML。在QML中，您不需要计时器来实现动画。这个想法是你只告诉要动画的属性的开始和结束值，并激活这个动画。您还可以配置动画的速度/持续时间，甚至是缓动曲线（最后减慢动画的速度和弹跳......等奇特的东西）。一个例子可能是：

import QtQuick 1.1

Rectangle {
    width: 300; height:300

    Scale {
        Image {
            x: 150; y: 150
            width: 20; height: 10
            source: "Bar.jpg"
        }

        NumberAnimation on yScale {
            from: 1
            to: -1
            running: ...     // <-- Animation is running while expression is true
        }
    }
}

或者，如果您不想在Animation.running上使用带有属性绑定的表达式，您还可以使用方法Animation.start()，stop()等。（设置ID为动画可以通过JavaScript进行寻址。）

但是理解和使用表达式中的属性绑定是QML的主要部分，因此您应该尝试使用表达式表达您想要的内容，而不是使用方法调用，事件，条件等。这就是QML的方式以及为什么它是美丽的。 ;）

qml图像大小为负值

1 个答案: