Comment déclencher l'animation d'un élément dans une ListView

Question

J'essaie de déclencher une SequentialAnimation sur une donnée Item d'un ListView.

Par exemple:

ApplicationWindow { 
    id: window 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 

    ListModel { 
     id: modelList 
     ListElement {} 
     ListElement {} 
     ListElement {} 
    } 

    ListView { 
     width: window.width 
     height: window.height 

     model: modelList 
     delegate: Rectangle { 
      width: window.width 
      height: window.height/10 
      color: "red" 
      radius : 10 
      SequentialAnimation on color { //Should be only triggered when button clicked 
       ColorAnimation { to: "yellow"; duration: 1000 } 
       ColorAnimation { to: "red"; duration: 1000 } 
      } 

      Button { 
       text: "trigger animation" 
       anchors{ 
        right: parent.right 
        top: parent.top 
        bottom: parent.bottom 
        margins: 10 
       } 

       onClicked: { 
        //Trigger SequentialAnimation 
       } 
      } 
     } 
    } 
} 

J'essaie de déclencher le Animationlorsque vous cliquez sur le bouton mais je ne sais pas comment utiliser un condition sur un Animation. Comment pourrais-je procéder?

Answer 1

Utilisez l'animation on property uniquement si vous souhaitez que les modifications soient automatiquement animées.

Dans votre cas, vous devez retirer la partie on color, puis donner l'animation d'un id: yourAnimation, et sur le bouton cliquez sur yourAnimation.start()

En fait, il semble que on color est également possible, en sautant le réglage de la cible:

SequentialAnimation on color { 
    id: yourAnimation 
    ColorAnimation { to: "yellow"; duration: 1000 } 
    ColorAnimation { to: "red"; duration: 1000 } 
    running: false 
}