qt4 qml Flipable、Flickable和状态与动画

来源：互联网发布：詹姆斯沃西生涯数据编辑：程序博客网时间：2024/06/06 00:53

三十七、Flipable、Flickable和状态与动画

一、状态与动画
属性动画使用PropertyAnimation on x{ to:100; duration:1000 }

import QtQuick 1.0Rectangle {width: 300;height: 200Rectangle{    id:page; width:50; height:50    x:0; y:100;    color:"red"    PropertyAnimation on x{ to:100; duration:1000 }    //NumberAnimation on x{ to:100; duration:1000}    PropertyAnimation on color{ to:"blue:"; duration:1000}    //ColorAnimation on color{ to:"blue"; duration:1000}}}

缓冲曲线，在PropertyAnimation里指定 easing.type

import QtQuick 1.0Rectangle {width: 300;height: 200Rectangle{    id:page; width:50; height:50    x:0; y:100;    color:"red"    PropertyAnimation on x{ to:100; duration:1000; easing.type: "InOutElastic"}}}

状态过度动画使用transitions

import QtQuick 1.0Rectangle {    width: 300;height: 200    Rectangle{        id:page; width:50; height:50        x:0; y:100; color:"red"        MouseArea{id:mouseArea; anchors.fill:parent}        states: State {            name: "state1"            when:mouseArea.pressed            PropertyChanges {                target: page                x:100;color:"blue"            }        }        transitions: Transition {            from: ""; to: "state1"            NumberAnimation{property:"x";duration:500}            ColorAnimation{duration:500}        }   }}

并行动画（默认）：将状态过度动画中的 transitions: Transition 中代码改成

        transitions: Transition {            from: ""; to: "state1"            ParallelAnimation{            NumberAnimation{property:"x";duration:500}            ColorAnimation{duration:500}            }        }

序列动画：将状态过度动画中的 transitions: Transition 中代码改成

        transitions: Transition {            from: ""; to: "state1"            SequentialAnimation{            NumberAnimation{property:"x";duration:500}            ColorAnimation{duration:500}            }        }

属性默认动画：使用Behavior{}元素，当鼠标按下，矩形会在500ms内移动到100处

import QtQuick 1.0Rectangle {    width: 300;height: 200    Rectangle{        id:page; width:50; height:50; y:100; color:"red"        x:mouseArea.pressed?100:0;        MouseArea{id:mouseArea; anchors.fill:parent}        Behavior on x { NumberAnimation{ duration:500} }    }}

二、Flipable翻转效果

在Flipable中
使用transform:Rotation指定旋转方式，
在transitions: Transition指出旋转所用时间
在MouseArea中执行flipable.flipped
在back状态里指定当flipable.flipped时进入该状态，该状态是flipable的angle:180

import QtQuick 1.0Rectangle{    width:300; height:250    Flipable{        id:flipable; width:back.width; height:back.height        property int angle : 0  //翻转角度        property bool flipped : false        x: 0        y: 0 //用来标志是否翻转        front: Image { id: image1; fillMode: Image.Tile;source:"7.jpg"}  //指定前面的图片        back: Image {source:"8.jpg"}    //指定背面的图片        transform:Rotation{ //指定原点            origin.x:flipable.width/2; origin.y:flipable.height/2            axis.x:0; axis.y:1; axis.z:0 //指定按y轴旋转            angle:flipable.angle        }        states:State{            name:"back"  //背面的状态            PropertyChanges {target:flipable; angle:180}            when:flipable.flipped        }        transitions: Transition {            NumberAnimation{property:"angle";duration:1000}        }        MouseArea{            anchors.fill:parent            onClicked:flipable.flipped =!flipable.flipped            //当鼠标按下时翻转        }    }}

三、Flickable弹动效果

import QtQuick 1.0Rectangle{    width:200; height:200    Flickable{            width:200        height:200        Image{id: picture; source:"03.png"}        contentWidth:picture.width        contentHeight:picture.height    }}