利用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