qml 图像大小负值答案

【问题标题】：qml image size negative valueqml 图像大小负值
【发布时间】：2012-10-16 20:20:05
【问题描述】：

我想使用 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
    }
}

【问题讨论】：

标签： image qt qml image-size

【解决方案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 的方式，也是它美丽的原因。 ;)

【讨论】：