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  }
    }
}

но он не работает на источнике как переход так же, как окончательное изменение состояния.. поэтому мне интересно, как заставить один источник изображения исчезнуть в andothe и обратно?

7
qml qt

2 ответов

вы хотите, чтобы первое изображение исчезло в другом? Как насчет, если вы поместите два Image объекты друг над другом, затем анимируйте opacity собственность?

EDIT: это сработало для меня (я использую 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

9

вот также простой переход прокрутки между изображениями:

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" ]
  }
}
0