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

来源：互联网发布：淘宝李宁乒乓球运动服编辑：程序博客网时间：2024/04/30 13:33

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

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

import QtQuick 2.4import Ubuntu.Components 1.3MainView {    // 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

0 0