QML动画（弹动和翻转效果）

Flickable（弹动）

QML中提供了一个Flickable元素，可以将其子项设置在一个可以拖拽和弹动的界面上，使得子项目的视图可以滚动。在传统的用户界面中，可以使用标准控件（如滚动条和箭头按钮）滚动视图。在某些情况下，还可以通过在移动光标的同时按住鼠标按钮来直接拖动视图。在基于触摸的用户界面中，此拖动操作通常与轻拂操作相辅相成，在用户停止触摸视图后，滚动将继续。

常用属性：

contentWidgth contentWidgth	内容的尺寸（由 Flickable 控制的表面）。这通常应设置为放置在可轻拂中的项目的组合大小
OriginX OriginY	属性保存内容的来源，一般为（0.0）
contentX contentY	属性将表面坐标当前保存在可轻拂的左上角，如果将图像向上轻拂 100 像素，将增加 100，一般为（0.0）
moving movingHorizontally movingVertically	属性描述由于用户拖动或轻拂视图而导致视图当前是水平、垂直还是在任一方向上移动
dragging draggingHorizontally draggingVertically	属性描述由于用户拖动视图而导致视图当前是水平、垂直还是任一个方向移动。
flicking flickingHorizontally  flickingVertically	属性描述由于用户轻拂视图而导致视图当前是水平、垂直还是任任一方向移动
horizontalVelocity verticalVelocity	沿 x 轴和 y 轴的瞬时运动速度
boundsBehavior	属性保存图面是可以拖动到可轻拂对象的边界之外，还是在轻拂时超过可轻拂的边界
boundsMovement	保存可轻拂对象是否将给人一种视图边缘柔和的感觉，而不是硬物理边界
contentItem	轻拂的项目
flickDeceleration	轻拂减速的速率，数字越大，当用户停止通过触摸、触摸板或鼠标滚轮轻拂时，它的速度就越快
horizontalOvershoot	保存水平过冲，即内容被拖动或轻拂超过可轻拂边界的水平距离
verticalOvershoot	保存垂直过冲，即内容被拖动或轻拂超过可轻拂边界的垂直距离
interactive	描述用户是否可以与可轻拂对象交互。用户无法拖动或轻拂非交互式的可轻拂对象。 默认情况下，此属性为 true。
maximumFlickVelocity	可以轻拂视图的最大速度
pixelAligned	像素对齐
rebound	留在内容视图回弹到可轻拂对象的边界时应用于内容视图的过渡

boundsBehavior：enumeration（边界行为）

Flickable.StopAtBounds	内容不能拖动到可轻拂的边界之外，并且轻拂不会超调
Flickable.DragOverBounds	内容可以拖动到可轻拂的边界之外，但轻拂不会超调
Flickable.OvershootBounds	轻拂时内容可以超过边界，但内容不能拖动到可轻拂边界之外
Flickable.DragAndOvershootBounds	内容可以拖动到可轻拂的边界之外，并且在轻拂时可以超过边界

boundsMovement：enumeration（边界移动）

Flickable.StopAtBounds	这允许实现自定义边缘效果，其中内容不跟随拖动或轻拂超出可轻拂边界。水平过冲和垂直过冲的值可用于实现自定义边缘效果。
Flickable.FollowBoundsBehavior (default)	内容是跟随拖动还是超出可轻拂边界的轻拂由  boundsBehavior确定

flickableDirection：enumeration（轻拂方向）

Flickable.AutoFlickDirection（默认）	如果 contentHeight 不等于可轻拂的高度，则允许垂直轻拂。如果内容宽度不等于可轻拂的宽度，则允许水平轻拂。
Flickable.AutoFlickIfNeed	如果 contentHeight 大于 Flickable 的高度，则允许垂直轻拂。如果内容宽度大于可轻拂的宽度，则允许水平轻拂
Flickable.HorizontalFlick	允许水平轻拂
Flickable.VerticalFlick	允许垂直轻拂
Flickable.HorizontalAndVerticalFlick	允许双向轻拂

visibleArea（可见区域）

这些属性描述当前查看区域的位置和大小。大小定义为当前可见的完整视图的百分比，缩放为 0.0 - 1.0。页面位置通常在 0.0（开始）到 1.0 减去大小比（结束）的范围内，即 在 0.0 到 1.0-的范围内。但是，内容可能会拖到正常范围之外，从而导致页面位置也超出正常范围。这些属性通常用于绘制滚动条

visibleArea.heightRatio	高度比
visibleArea.widthRatio	宽度比
visibleArea.xPosition	x位置
visibleArea.yPosition	y位置

信号：

flickEnded()	视图因轻弹而停止移动时，会发出此信号
flickStarted()	当视图被轻拂时，会发出此信号
movementEnded()	视图由于用户交互或生成的 flick（）而停止移动时，将发出此信号。如果轻拂处于活动状态，则一旦轻拂停止，就会发出此信号。如果轻拂未处于活动状态，则当用户停止拖动时将发出此信号 - 即鼠标或触摸释放。
movementStarted()	视图由于用户交互或生成的flick（） 而停止移动时，将发出此信号。如果轻拂处于活动状态，则一旦轻拂停止，就会发出此信号。如果轻拂未处于活动状态，则当用户停止拖动时将发出此信号 - 即鼠标或触摸释放。

函数：

cancelFlick()	取消当前轻拂动画
flick(qreal xVelocity, qreal yVelocity)	以像素/秒为单位水平轻拂 xVelocity 和垂直 yVelocity 轻拂内容。 调用此方法将更新相应的移动和轻弹属性和信号，就像真正的轻弹一样。
resizeContent(）	调整大小内容
returnToBounds()	返回边界，确保内容在规定范围内

简单的创建一个Flickable：

Flickable {
        anchors.fill:parent
        contentWidth: image.width; contentHeight: image.height//设置可浮动的内容尺寸
        Image {
            id: image;
            source: "qrc:/image/5a01c793cad612fd15711845.png"
        }
    }

如果只在一个区域中显示 的话，把clip设置为true

Rectangle{
        id:rect1
        width: 600
        height: 600
        Flickable {
            anchors.fill:parent
            contentWidth: image.width; contentHeight: image.height

            Image {
                id: image;
                source: "qrc:/image/5a01c793cad612fd15711845.png"
            }
            clip: true
        }
    }

添加右侧和底部滑块

Rectangle{
        id:rect1
        width: 600
        height: 600
        Flickable {
            id:flickable1
            anchors.fill:parent
            contentWidth: image.width; contentHeight: image.height

            Image {
                id: image;
                source: "qrc:/image/5a01c793cad612fd15711845.png"
            }
            clip: true
        }
        //右侧滑块
        Rectangle{
            id:scrollbar
            anchors.right: flickable1.right //设置位置
            y:flickable1.visibleArea.yPosition*flickable1.height
            width: 10 //设置滑块宽度
            height: flickable1.visibleArea.heightRatio*flickable1.height
            color: "black" //设置滑块颜色
        }
        //底部滑块
        Rectangle{
            id:scrollbar1
            anchors.bottom:flickable1.bottom
            x:flickable1.visibleArea.xPosition*flickable1.height
            height: 10
            width: flickable1.visibleArea.widthRatio*flickable1.width
            color: "black"
        }
    }

rebound 反弹的使用，当拖动后返回时，遇到边界会有反弹效果

Flickable {
        width: 150; height: 150
        contentWidth: 300; contentHeight: 300

        rebound: Transition { //设置反弹效果
            NumberAnimation {
                properties: "x,y"
                duration: 1000
                easing.type: Easing.OutBounce
            }
        }

        Rectangle {
            width: 300; height: 300
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }
    }

 

Flipable（翻转）

翻转是一种可以在正面和背面之间明显“翻转”的物品，就像卡片一样。它可以与旋转、状态和过渡类型一起使用以产生翻转效果。

属性：

front	正面
back	反面
side	可翻转的一侧当前可见 Flipable.front Flipable.back

例子；设置正反面，并旋转360° 

Flipable{
        id:flipable1
        x:200;y:200
        width: 400;height: 400
        property bool flipped: false  //判断是否翻面
        front: Image{id:image1;source:"qrc:/image/apic26488.jpg"}//正面
        back:Image {id: image2;source: "qrc:/image/zzpic23859.jpg"}//反面

        transform: Rotation { //设置旋转的轴
            id:rotation
            origin.x:flipable1.width/2
            origin.y:flipable1.height/2
            axis{x:0;y:1;z:0}
            angle:0
        }

        states:State{   //设置状态
            name:"back"
            PropertyChanges {target: rotation;angle:360}
            when:flipable1.flipped
        }

        transitions: Transition { //设置过渡
            NumberAnimation{
                target: rotation
                property: "angle"
                duration: 5000
            }
        }
        MouseArea{
            anchors.fill:parent
            onPressed: {
                flipable1.flipped=!flipable1.flipped
            }
        }
    }

 参考资料：

Flickable QML Type | Qt Quick 5.15.12