2

我想用 QML Image 元素height属性制作一个 QML 动画。但是 Image height 属性的负值在 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
    }
}
4

1 回答 1

4

首先，（回答您的问题），您不能使用负尺寸。改为使用缩放，它支持负值。

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

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

其次，您显然应该阅读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
        }
    }
}

或者，如果您不想使用属性绑定 on 的表达式Animation.running，也可以使用方法Animation.start()、stop()等。（在动画上设置 id 以使其可从 JavaScript 寻址。）

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

于 2012-10-16T20:55:38.500 回答