7

QMLで画像ソース間をスムーズに移行する方法を知りたいのですが、試してみました

import QtQuick 1.1
Image {
   id: rect
   source:  "quit.png"
   smooth: true
   MouseArea {
       id: mouseArea
       anchors.fill: parent
       anchors.margins: -10
       hoverEnabled: true         //this line will enable mouseArea.containsMouse
       onClicked: Qt.quit()
   }

    states: State {
        name: "mouse-over"; when: mouseArea.containsMouse
        PropertyChanges { target: rect; scale: 0.8; source :"quit2.png" }
    }

    transitions: Transition {
        NumberAnimation { properties: "scale, source"; easing.type: Easing.InOutQuad; duration: 1000  }
    }
}

しかし、最終的な状態が変化するのと同じように、遷移としてのソースでは機能しません。したがって、1つの画像ソースをフェードインしてフェードインおよびフェードバックさせる方法を知りたいのですが。

4

2 に答える 2

9

最初の画像を別の画像にフェードアウトさせたいですか? 2 つのImageオブジェクトを重ねて配置し、opacityプロパティをアニメーション化するとどうなるでしょうか。

編集:これは私にとってはうまくいきました(Qt Creatorのインストールが少し古くなっているため、QtQuick 1.0を使用しています):

import QtQuick 1.0
Rectangle {
Image {
   id: rect
   source:  "quit.png"
   smooth: true
   opacity: 1
   MouseArea {
       id: mouseArea
       anchors.fill: parent
       anchors.margins: -10
       hoverEnabled: true         //this line will enable mouseArea.containsMouse
       onClicked: Qt.quit()
   }


    states: State {
        name: "mouse-over"; when: mouseArea.containsMouse
        PropertyChanges { target: rect; scale: 0.8; opacity: 0}
        PropertyChanges { target: rect2; scale: 0.8; opacity: 1}
    }

    transitions: Transition {
        NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 1000  }
    }
}

Image {
   id: rect2
   source:  "quit2.png"
   smooth: true
   opacity: 0
   anchors.fill: rect

  }
}

コメントの質問に: アンカーをコピーすることで、画像を他の画像の上に正確に配置できますanchors.fill: rect

于 2012-04-19T11:52:02.550 に答える