2

heightQMLImage要素プロパティを使用して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では、アニメーションを実装するためにタイマーは必要ありません。アニメーション化するプロパティの開始値と終了値のみを指定し、このアニメーションをアクティブ化するという考え方です。アニメーションの速度/継続時間、さらにはイージングカーブを構成することもできます（最後にアニメーションを遅くしたり、バウンスなどの派手なものを作成したりするために...）。1つの例は次のとおりです。

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のあり方であり、それが美しい理由です。;）

于 2012-10-16T20:55:38.500 に答える