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:parentcontentWidth: image.width; contentHeight: image.height//设置可浮动的内容尺寸Image {id: image;source: "qrc:/image/5a01c793cad612fd15711845.png"}}
如果只在一个区域中显示 的话，把clip设置为true
Rectangle{id:rect1width: 600height: 600Flickable {anchors.fill:parentcontentWidth: image.width; contentHeight: image.heightImage {id: image;source: "qrc:/image/5a01c793cad612fd15711845.png"}clip: true}}添加右侧和底部滑块
Rectangle{id:rect1width: 600height: 600Flickable {id:flickable1anchors.fill:parentcontentWidth: image.width; contentHeight: image.heightImage {id: image;source: "qrc:/image/5a01c793cad612fd15711845.png"}clip: true}//右侧滑块Rectangle{id:scrollbaranchors.right: flickable1.right //设置位置y:flickable1.visibleArea.yPosition*flickable1.heightwidth: 10 //设置滑块宽度height: flickable1.visibleArea.heightRatio*flickable1.heightcolor: "black" //设置滑块颜色}//底部滑块Rectangle{id:scrollbar1anchors.bottom:flickable1.bottomx:flickable1.visibleArea.xPosition*flickable1.heightheight: 10width: flickable1.visibleArea.widthRatio*flickable1.widthcolor: "black"}}rebound 反弹的使用，当拖动后返回时，遇到边界会有反弹效果
Flickable {width: 150; height: 150contentWidth: 300; contentHeight: 300rebound: Transition { //设置反弹效果NumberAnimation {properties: "x,y"duration: 1000easing.type: Easing.OutBounce}}Rectangle {width: 300; height: 300gradient: Gradient {GradientStop { position: 0.0; color: "lightsteelblue" }GradientStop { position: 1.0; color: "blue" }}}}
Flipable（翻转）
翻转是一种可以在正面和背面之间明显“翻转”的物品，就像卡片一样。它可以与旋转、状态和过渡类型一起使用以产生翻转效果。
属性：
| front | 正面 |
| back | 反面 |
| side | 可翻转的一侧当前可见 Flipable.front Flipable.back |
例子；设置正反面，并旋转360°
Flipable{id:flipable1x:200;y:200width: 400;height: 400property bool flipped: false //判断是否翻面front: Image{id:image1;source:"qrc:/image/apic26488.jpg"}//正面back:Image {id: image2;source: "qrc:/image/zzpic23859.jpg"}//反面transform: Rotation { //设置旋转的轴id:rotationorigin.x:flipable1.width/2origin.y:flipable1.height/2axis{x:0;y:1;z:0}angle:0}states:State{ //设置状态name:"back"PropertyChanges {target: rotation;angle:360}when:flipable1.flipped}transitions: Transition { //设置过渡NumberAnimation{target: rotationproperty: "angle"duration: 5000}}MouseArea{anchors.fill:parentonPressed: {flipable1.flipped=!flipable1.flipped}}}参考资料：
Flickable QML Type | Qt Quick 5.15.12