在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