在Image切换时利用CrossFadeImage来产生动画特效

利用CrossFadeImage能够在我们切换它的source时生产我们所需要的特效．除此之外，它本身就像我们通常所使用的一个QML Image元件．

我们还是可以通过一个先前的例程来展示如何利用这个API来做一些动画效果．首先大家可以查看我先前的文章＂利用SwipeArea来识别手势操作＂．我们可以把它其中的Image换成我们所需要的CrossFadeImage．整个代码如下：

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "swipearea.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    property int index: 1

    Page {
        title: "SwipeArea sample"

        CrossFadeImage {
            id: img
            anchors.fill: parent
            source: "images/image1.jpg"
            fadeDuration: 2000
            fadeStyle: "cross"
        }

        SwipeArea {
            id: swipeleft
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: parent.top
            }

            // SwipeArea.Rightwards
            direction:  SwipeArea.Leftwards

            onDraggingChanged: {
                console.log("dragging: " + dragging)

                if ( dragging ) {
                    index ++;

                    if ( index >= 5) {
                        index = 5
                    }

                    var image = "images/image" + index + ".jpg"
                    console.log("image source: " + image)
                    img.source = image
                }
            }
        }

        SwipeArea {
            id: swiperight
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: parent.top
            }

            // SwipeArea.Rightwards
            direction: SwipeArea.Rightwards

            onDraggingChanged: {
                console.log("dragging1: " + dragging)

                if ( dragging ) {
                    index--

                    if ( index <= 1 ) {
                        index = 1
                    }

                    var image = "images/image" + index + ".jpg"
                    console.log("image source1: " + image)
                    img.source = image
                }
            }
        }
    }
}

运行我们的应用：

  

在我们尝试改变CrossFadeImage的source，我们可以发现我们所需要的动画的效果．当然，我们也可以修改其中的fadeStyle属性来得到我们所需要的另外一种效果．下图是fadeStyle为＂overlay＂时的效果．

整个项目的源码在： https://github.com/liu-xiao-guo/crossfadeimage