QML: Làm thế nào để tạo hiệu ứng chuyển tiếp tốt đẹp giữa các nguồn hình ảnh (một trong những mờ dần vào khác)?

Question

Tôi tự hỏi làm thế nào để làm cho quá trình chuyển đổi trơn tru betwen nguồn hình ảnh trong QML, tôi cố gắng

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

Nhưng Nó không hoạt động trên nguồn như một sự chuyển tiếp cũng giống như sự thay đổi trạng thái cuối cùng .. vì vậy tôi tự hỏi làm thế nào để làm cho nguồn một hình ảnh phai vào andothe và trở lại?

Answer 1

Bạn muốn hình ảnh đầu tiên mờ dần vào hình ảnh khác? Làm thế nào về nếu bạn đặt hai đối tượng Image trên đầu trang của nhau, sau đó kích hoạt thuộc tính opacity?

EDIT: Điều này làm việc cho tôi (tôi đang sử dụng QtQuick 1.0 vì cài đặt Qt Creator của tôi là một chút lỗi thời):

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 

    } 
} 

Để các câu hỏi trong bình luận của bạn: bạn có thể đặt hình ảnh chính xác trên đầu trang của người khác bằng cách sao chép neo thru anchors.fill: rect

Answer 2

đây cũng là một quá trình chuyển đổi cuộn đơn giản giữa các hình ảnh:

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