【QML Model-View】ListView-動畫+上移下移（三）

ListView 提供了 add、remove、move、populate、displaced 幾種場景的過渡動畫效果，你 可以通過設定相應的屬性來改變特定場景對應的過渡動畫。這些場景對應的屬性，類型都是 Transition，—個場景也可能有多個屬性，比如新增 Item 會觸發 add 過渡動畫，同時也可能引 起其他 Item 的位置變化，進而觸發 addDisplaced 或 displaced 過渡動畫。

效果

初始化 動畫

ListView 第一次初始化使用 populate 動畫：

// 在ListView第一次執行個體化或者因Model變化而需要建立Item時應用
populate: Transition {
    NumberAnimation {
        property: "opacity"
        from: 0
        to: 1.0
        duration: 1000
    }
}
           

這将産生一個漸顯效果。

add 動畫

add 屬性指定向 ListView 新增一個 Item 時針對該 Item 應用的過渡動畫。其設定了一個 ParallelAnimation，内含一個變換透明度的動畫和一個變換 y 位置的動畫。

// add過渡動畫（新增Item觸發）
add: Transition {
    ParallelAnimation{
        NumberAnimation {
            property: "opacity"
            from: 0
            to: 1.0
            duration: 1000
        }
        NumberAnimation {
            properties: "x,y"
            from: 0
            duration: 1000
        }
    }
}
           

最終的效果是，新增 Item 從 ListView 上方漸現、緩緩下落到特定位置。 需要注意的是，盡量不要在 add 動畫中改變 Item 的高度，因為這樣會引起它下面的其他 Item 被重新布局進而錯放位置，也會帶來性能上的損耗。

displaced 動畫

我點選 “Insert” 按鈕時，新增 Item 下方的那些被迫移位的 Item，沒有明顯的動畫效果。 這是因為 displaced 屬性預設為 null，ListView 沒有提供預設的移位動畫。

displaced 屬性用于指定通用的、由于 Model 變化導緻 Item 被迫移位時的動畫效果，而相應 的 addDisplaced、moveDisplaced、removeDisplaced 則用于指定由特定的 add、move、remove 操作引起的移位動畫。如果你同時指定了 displaced 和 xxxDisplaced，那 xxxDisplaced生效；如果你隻指定 displaced，那隻要有移位發生，displaced 動畫就會被應用。

// 用于指定通用的、由于Model變化導緻Item被迫移位時的動畫效果
displaced: Transition {
    SpringAnimation {
        property: "y"
        spring: 3
        damping: 0.1
        epsilon: 0.25
    }
}
QT開發交流+赀料君羊：714620761           

再運作看看，點選 “Insert” 按鈕，會發現位于新增 Item 下方的那些 Item 會向下移動，來回彈幾次才平靜下來。

remove 動畫

remove 屬性指定将一個 Item 從 ListView 中移除時應用的過渡動畫。當動畫開始執行時， Item 已經被移除，此時任何對該 Item 的引用都是非法的。移除一個 Item 可能會導緻其他 Item 移位，此時會觸發 removeDisplaced 或 displaced 過渡動畫。給 ListView 指定 remove 動畫如下：

// remove過渡動畫（移除Item觸發）
remove: Transition {
    SequentialAnimation{
        NumberAnimation {
            properties: "y"
            to: 0
            duration: 600
        }            
        NumberAnimation {
            property: "opacity"
            to: 0
            duration: 400
        }
    }
}
           

再運作看看，輕按兩下一個 Item，它會先移動到 ListView 頂部，然後再慢慢變得看不見。

move 動畫

move 屬性指定移動一個 Item 時要應用的過渡動畫。

// move過渡動畫（移動Item觸發）
move: Transition {
    NumberAnimation {
        property: "y"
        duration: 700
        easing.type: Easing.InQuart
    }
}           

上移 + 下移

QT開發交流+赀料君羊：714620761

我們以之前的示例為基礎，構造一個專門示範動畫效果的示例，phone_list_animation. qml。我給 footer 添加了 Up 和 Down 按鈕，還增加了 moveUp 和 moveDown 信号，連接配接到 ListView 新增的 moveUp() 和 moveDown() 方法上。新的 footer 元件定義如下：

// 定義footer
Component {
    id: footerView

    Item{
        id: footerRootItem
        width: parent.width
        height: 30

        // 自定義信号
        signal add()
        signal insert()
        signal moveUp()
        signal moveDown()

        // 新增按鈕
        Button {
            id: addOne
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.verticalCenter: parent.verticalCenter
            text: "Add"
            onClicked: footerRootItem.add()
        }

        // 插入按鈕
        Button {
            id: insertOne
            anchors.right: addOne.left
            anchors.rightMargin: 4
            anchors.verticalCenter: parent.verticalCenter
            text: "Insert"
            onClicked: footerRootItem.insert()
        }

        // 下移按鈕
        Button {
            id: moveDown;
            anchors.right: insertOne.left
            anchors.rightMargin: 4
            anchors.verticalCenter: parent.verticalCenter
            text: "Down"
            onClicked: footerRootItem.moveDown()
        }

        // 上移按鈕
        Button {
            id: moveUp;
            anchors.right: moveDown.left
            anchors.rightMargin: 4
            anchors.verticalCenter: parent.verticalCenter
            text: "Up"
            onClicked: footerRootItem.moveUp()
        }
    }
}
           

ListView 新增 moveUp() 和 moveDown() 方法，計算目前 Item 的索引，調用 model 的 move() 方法讓目前 Item 下移一個位置。給 move 屬性設定了一個 Transition 對象。新的 ListView 聲明如下：

// 定義ListView
    ListView {
        id: listView
        anchors.fill: parent
        interactive: false

        delegate: phoneDelegate
        model: phoneModel.createObject(listView)
        header: headerView
        footer: footerView
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }
        
        // 在ListView第一次執行個體化或者因Model變化而需要建立Item時應用
        populate: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1.0
                duration: 1000
            }
        }

        // add過渡動畫（新增Item觸發）
        add: Transition {
            ParallelAnimation{
                NumberAnimation {
                    property: "opacity"
                    from: 0
                    to: 1.0
                    duration: 1000
                }
                NumberAnimation {
                    properties: "x,y"
                    from: 0
                    duration: 1000
                }
            }
        }
        
        // 用于指定通用的、由于Model變化導緻Item被迫移位時的動畫效果
        displaced: Transition {
            SpringAnimation {
                property: "y"
                spring: 3
                damping: 0.1
                epsilon: 0.25
            }
        }
        
        // remove過渡動畫（移除Item觸發）
        remove: Transition {
            SequentialAnimation{
                NumberAnimation {
                    properties: "y"
                    to: 0
                    duration: 600
                }            
                NumberAnimation {
                    property: "opacity"
                    to: 0
                    duration: 400
                }
            }
        }
        
        // move過渡動畫（移動Item觸發）
        move: Transition {
            NumberAnimation {
                property: "y"
                duration: 700
                easing.type: Easing.InQuart
            }
        }
        
        // 新增函數
        function addOne() {
            model.append(
                        {
                            "name": "MX3",
                            "cost": "1799",
                            "manufacturer": "MeiZu"
                        } 
            )
        }
        
        // 插入函數
        function insertOne() {
            model.insert( Math.round(Math.random() * model.count),
                        {
                            "name": "HTC One E8",
                            "cost": "2999",
                            "manufacturer": "HTC"
                        } 
            )
        }
        
        // 上移函數
        function moveUp() {
            if(currentIndex - 1 >= 0){
                model.move(currentIndex, currentIndex - 1, 1)
            }
        }

        // 下移函數
        function moveDown() {
            if(currentIndex + 1 < model.count){
                model.move(currentIndex, currentIndex + 1, 1)
            }
        }
        
        // 連接配接信号槽
        Component.onCompleted: {
            listView.footerItem.add.connect(listView.addOne)
            listView.footerItem.insert.connect(listView.insertOne)
            listView.footerItem.moveUp.connect(listView.moveUp)
            listView.footerItem.moveDown.connect(listView.moveDown)
        }      
    }
}
           

現在可以執行 “qmlscenephone_list_animation.qml” 看看效果了。