Qt QML：如何在图像源之间实现良好的过渡效果（一个淡入另一个）？

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

---

但它不能像最终状态更改一样在源代码上作为转换工作。。因此，我想知道如何使一个图像源淡入和淡出，然后再淡出？

您希望第一个图像淡入另一个图像吗？如果将两个

图像

对象放置在彼此的顶部，然后设置

不透明度

属性的动画，效果如何

编辑：这对我有效（我使用QtQuick 1.0，因为我的Qt Creator安装有点过时）：

---

对于您评论中的问题：您可以通过复制锚来将图像精确地放置在另一个图像的顶部。fill:rect也可以在图像之间进行简单的滚动转换：

import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")



  Rectangle {
    id: imageRect

    anchors.centerIn: parent
    width: 240
    height: 320
    clip: true

    property int currentIndex: 0
    property var imageSources: [ "imageLeft.jpg", "imageCenter.jpg" ]

    Repeater {
      model: imageRect.imageSources

      Image {
        id: image

        width: parent.width
        height: parent.height

        x: index * parent.width - imageRect.currentIndex * parent.width
        fillMode: Image.PreserveAspectFit
        source: imageRect.imageSources[index]
        Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
      }
    }
  }

  Button {
    id: leftButton
    anchors.bottom: parent.bottom
    text: "left"
    onClicked: if(imageRect.currentIndex > 0) imageRect.currentIndex--
  }

  Button {
    id: rightButton
    anchors.bottom: parent.bottom
    anchors.left: leftButton.right
    text: "right"
    onClicked: if(imageRect.currentIndex < imageRect.imageSources.length - 1) imageRect.currentIndex++
  }

  Button {
    id: addButton
    anchors.bottom: parent.bottom
    anchors.left: rightButton.right
    text: "+"
    onClicked: imageRect.imageSources = [ "imageLeft.jpg", "imageCenter.jpg" , "imageRight.jpg" ]
  }
}

导入QtQuick 2.6
导入QtQuick.Controls 1.4
导入QtQuick.Window 2.2
窗口{
可见：正确
宽度：640
身高：480
标题：qsTr（“你好世界”）
长方形{
id:imageRect
anchors.centerIn:父对象
宽度：240
身高：320
剪辑：对
属性int currentIndex:0
属性变量imageSources:[“imageLeft.jpg”，“imageCenter.jpg”]
中继器{
型号：imageRect.imageSources
形象{
id:图像
宽度：parent.width
高度：parent.height
x:index*parent.width-imageRect.currentIndex*parent.width
fillMode:Image.preserveApectFit
来源：imageRect.imageSources[索引]
x{SpringAnimation{spring:2；阻尼：0.2}上的行为
}
}
}
钮扣{
id:leftButton
.bottom：parent.bottom
文本：“左”
onClicked:if（imageRect.currentIndex>0）imageRect.currentIndex--
}
钮扣{
id:rightButton
.bottom：parent.bottom
锚定。左：左按钮。右
正文：“对”
onClicked:if（imageRect.currentIndex

但是如何将图像放置在另一个图像之上？我想如果删除缩放动画看起来会更好，但这只是为了演示不透明度动画。myWallJSON：我非常确定，在另一个之后声明的任何项目都将绘制在它之上。或者，可以使用设置z深度的z特性。

import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")



  Rectangle {
    id: imageRect

    anchors.centerIn: parent
    width: 240
    height: 320
    clip: true

    property int currentIndex: 0
    property var imageSources: [ "imageLeft.jpg", "imageCenter.jpg" ]

    Repeater {
      model: imageRect.imageSources

      Image {
        id: image

        width: parent.width
        height: parent.height

        x: index * parent.width - imageRect.currentIndex * parent.width
        fillMode: Image.PreserveAspectFit
        source: imageRect.imageSources[index]
        Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
      }
    }
  }

  Button {
    id: leftButton
    anchors.bottom: parent.bottom
    text: "left"
    onClicked: if(imageRect.currentIndex > 0) imageRect.currentIndex--
  }

  Button {
    id: rightButton
    anchors.bottom: parent.bottom
    anchors.left: leftButton.right
    text: "right"
    onClicked: if(imageRect.currentIndex < imageRect.imageSources.length - 1) imageRect.currentIndex++
  }

  Button {
    id: addButton
    anchors.bottom: parent.bottom
    anchors.left: rightButton.right
    text: "+"
    onClicked: imageRect.imageSources = [ "imageLeft.jpg", "imageCenter.jpg" , "imageRight.jpg" ]
  }
}