qt - QML:如何在图像源之间制作漂亮的过渡效果(一个淡入另一个)？

Question

我想知道如何在 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  }
    }
}

但是它不能像最终状态改变一样在源上作为过渡工作..所以我想知道如何让一个图像源淡入安多斯和回来？

Answer 1

你想让第一张图片淡出到另一张吗？如果你放两个Image怎么样？对象相互叠加，然后为 opacity 设置动画属性(property)？

编辑:这对我有用(我使用 QtQuick 1.0，因为我的 Qt Creator 安装有点过时):

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 复制 anchor 来将图像准确地放在另一个图像的顶部。