QML : 이미지 요소의 페이드 인/페이드 아웃 애니메이션

Question

Image 요소의 소스가 변경 될 때 페이드 인/아웃 애니메이션이 가능합니까? 두 개의 이미지 요소가 필요합니까? 불투명도를 0에서 1로, 또 다른 불투명도를 1에서 0으로 변경 하시겠습니까?

Answer 1

많은 번거 로움없이 이렇게하십시오. 이 방법으로 실행 애니메이션 :

Image { 
    id: toBeCreated 
    NumberAnimation on opacity { 
     id: createAnimation 
     from: 0 
     to: 1 
     duration: 2000 
    } 
    Component.onCompleted: createAnimation.start() 
} 

Image { 
    id: toBeDeleted 
    NumberAnimation on opacity { 
     id: destroyAnimation // start this animation from the function where you want to create new Images 
     to: 0 
     duration: 2000 
     onRunningChanged: { 
      if (!running) { 
       console.log("Destroying...") 
       toBeDeleted.destroy(); 
      } 
     } 
    }  
} 

Answer 2

나는 그에게 조금 늦게 알고 있지만

내가 FadeInOut 이미지 뷰

import QtQuick 2.0 

    Item { 

     property string imageSource : "" 
     property string imageSourceTemp : "" 

     property real parentWidth: 0 
     property real parentHeight: 0 

     onImageSourceChanged: 
     { 

      destroyAnimation.start() 
      createAnimation.start() 


     } 
     Image { 
      id: toBeDeleted 
      source: imageSourceTemp 
      width: parentWidth 
      height: parentHeight 

      NumberAnimation on opacity { 
       id: destroyAnimation 
       to: 0.5 
       duration: 400 
       onRunningChanged: { 
        if (!running) { 

        } 
       } 
      } 
     } 

     Image { 
      id: toBeCreated 
      source: imageSource 
      width: parentWidth 
      height: parentHeight 

      NumberAnimation on opacity { 
       id: createAnimation 
       from: 0 
       to: 1 
       duration: 800 

       onRunningChanged: { 
        if (!running) { 
         imageSourceTemp = imageSource 
        } 
       } 
      } 


     } 

    } 

에 대한

QML 같은 시도 RajaRaviVarma ANS에서 영감을 공유하는 같은 느낌

및 사용 방법

FadeinFadeOutImage { 
     id: song_image 
     imageSource: songImage 
     parentWidth: width 
     parentHeight: height 
     width: 406*scaleFactor 
     height: 406*scaleFactor 
    }