QML图像、状态和动画

import QtQuick 2.12

Item {
    Rectangle {
        id: rect
        width: 100
        height: 100
        gradient: Gradient {
            // position定义一个从0.0 - 1.0之间的位置
            // color设置颜色
            GradientStop {position: 0.0; color: "red"}
            GradientStop {position: 0.33; color: "green"}
            GradientStop {position: 1.0; color: "blue"}
        }

        Image {
            width: 120
            height: 120
            // fillMode图片剪裁
            // Image.Stretch 默认， 图片拉伸自适应，图片根据设置的宽度和高度显示，如果没设置宽度和高度，则按图片原大小显示
            // Image.PreserveAspectFit 按比例缩放，不裁剪
            // Image.PreserveAspectCrop 均匀缩放，必要时裁剪
            // Image.TileVertically 水平拉伸，垂直平铺
            // Image.TileHorizontally 垂直拉伸，水平平铺
            // Image.Tile 像贴瓷砖一样
            // Image.Pad 原始图像不做处理
            fillMode: Image.Tile
            // 如果加载图片大，最好在一个低优先级的线程中进行
            asynchronous: true
            // 图片来自网络，则会自动在其他线程中异步加载
            // 图片会在内部进行缓存和共享，如果在几个IMage元素中使用了相同的source，那么会加载该图片的一个备份
            source: "http:://www.exam.com/logo.png"
        }
        // BorderImage 元素通过缩放或平铺图片的各个部分来创建超出图片的边界
        // 一个BorderImage元素将一个源图片分成9格区域（九宫格）
        // 1 2 3
        // 4 5 6
        // 7 8 9
        // 4个角(1, 3, 7, 9)不进行缩放
        // 2和8通过horizontalTileMode属性设置的模式进行缩放
        // 4和6通过verticalTileMode属性设置的模式进行缩放
        // 中间部分(5)会结合horizontalTileMode和verticalTileMode属性设置的模式进行缩放
        // border属性指定了源图片每个边缘的距离
        // horizontalTileMode和verticalTileMode属性可以模式
        // BorderImage.Stretch 拉伸
        // BorderImage.Repeat 平铺但可能修剪最后的图片
        // BorderImage.Round 平铺但是将图片进行缩小来确保最后的图片不进行修剪
        BorderImage {
            id: img
            source: "logo.png"
            width: 100
            height: 100
            border {left: 5; right: 5; top: 5; bottom: 5}
            horizontalTileMode: BorderImage.Stretch
            verticalTileMode: BorderImage.Stretch
        }
        // AnimatedImage可以用来播放包含了一系列帧的图片动画，如gif文件
        AnimatedImage {
            source: "logo.gif"
            // currentFrame 当前帧
            // frameCount 动画总长度
            // playing  播放
            // paused 暂停
        }

        // scale缩放
        // scale小于1，缩小
        // scale大于1，放大
        // scale小于0，显示镜像效果
        scale: 1.5
        // rotation 指定顺时针旋转的度数
        rotation: 30
        //缩放以及旋转都是以transformOrigin属性指定的点为原点进行的
        // transformOrigin一共有9个点(九宫格)
        // 1(TopLeft)    2(Top)     3(TopRight)
        // 4(Left)       5(Center)  6(Right)
        // 7(BottomLeft) 8(Bottom)  9(BottomRight)
        transformOrigin: "TopLeft"

        // transform元素是一个基本对象，无法被直接实例化，
        // 可用transform类型有3个Rotation， Scale， Translate
        transform: [
            // 旋转
            // Rotation提供了坐标轴和原点属性
            // 坐标轴有axis.x, axis.y, axis.z分别表示x轴， y轴， z轴
            // origin.x和origin.y指定原点
            // angle属性可用指定顺时针旋转的度数
            Rotation {
                origin.x: 30
                origin.y: 30
                axis: {x: 0; y: 1; z: 0}
                angle: 12
            },
            // 缩放
            // origin.x和origin.y指定原点
            // xScale和yScale分别用来设置x轴和y轴方向上的缩放比例因子
            Scale {
              origin.x: 25
              origin.y: 25
              xScale: 3
              yScale: 3
            },
            // 偏移
            // x和y分别设置在x轴和y轴方向上的偏移量
            Translate {
                x: 1
                y: 1
            }

        ]

        // 所有基于Item的对象都有一个默认状态
        // 默认状态的状态名称为空字符串
        // 还可以通过states的State对象来为其指定附加状态
        // 每一个状态都有一个在本项目中唯一的名称
        // 对于不是Item派生的对象可以通过StateGroup元素来使用状态
        // 一个项目可以为其state属性指定一个空字符串来明确的将其状态设置为默认状态
        // State可以
        // 使用StateChangeScript运行一些脚本
        // 使用PropertyChanges为一个对象重写现有的信号处理器
        // 使用PropertyChanges为一个项目重定义父项目
        // 使用AnchorChanges修改锚的值
        states: [
            State {
                // when 当动作释放时返回原来的状态
                name: "moved"; when: MouseArea.pressed
                PropertyChanges {
                    target: rect
                    x: 50
                    y: 50
                }
            }

        ]
        MouseArea {
            onClicked: rect.state = "moved"
        }

        // PropertyAnimation是用来为属性提供动画的最基本的动画元素
        // PropertyAnimation可以为real, int, color, rect, point, size, vector3d等属性设置动画
        // NumberAnimation继承自PropertyAnimation， 对real和int提供了更高效的实现
        // Vector3dAnimation继承自PropertyAnimation， 对vector3d提供了更高效的实现
        // ColorAnimation继承自PropertyAnimation， 对color提供了更高效的实现
        // RotationAnimation继承自PropertyAnimation， 对rotation提供了更高效的实现
        // SmoothedAnimation是专门的NumberAnimation， 当目标值改变时在动画中为其提供一个平滑的变化
        // SpringAnimation提供了一个想弹簧一样的动画，可以设置mass, damping, epsilon等属性
        // ParentAnimation用来在改变父项目时产生动画（对应ParentChange）
        // AnchorAnimation用来在改变锚时产生动画（对应AnchorChange）
        // PauseAnimation在动画中间暂停
        // ScriptAction允许在动画中执行javascript，也可以和StateChangeScript一起使用来重用已经存在的脚本
        // PropertyAction在动画中间立即改变一个属性而不对该属性的变化使用动画
        // 动画方式
        // 1、使用属性值源来创建一个动画，可以立即为一个指定的属性使用动画
        // 2、使用行为动画，当要给属性改变值时触发
        // 3、在一个信号处理器中创建，当接收到一个信号时触发
        // 4、作为一个独立动画，可以在脚本中进行，也可以重新绑定到不同对象
        // 5、使用切换，在不同状态间提供动画

        // 1、使用属性值源来创建一个动画，可以立即为一个指定的属性使用动画
        // 要使用“动画 on 属性”语法
        PropertyAnimation on x {to: 50; duration: 1000; loops: Animation.Infinite}

        // 2、使用行为动画，当要给属性改变值时触发
        // 使用Behavior为一个属性改变指定一个默认的动画
        Behavior on x { PropertyAnimation {duration: 500} }

        // 3、在一个信号处理器中创建，当接收到一个信号时触发
        MouseArea {
            onClicked: PropertyAnimation {target: rect; properties: "x,y"; to: 50; duration: 1000}
        }

        // 4、作为一个独立动画，可以在脚本中进行，也可以重新绑定到不同对象
        PropertyAnimation {
            id: animation
            target: rect
            properties: "x,y"
            duration: 1000
        }
        MouseArea {
            onClicked: {
                animation.to = 50
                // 一个独立的动画对象默认是没有运行的，必须使用running属性或者start()和stop()函数来运行
                animation.running = true
            }
        }

        // 5、使用切换，在不同状态间提供动画
        // 要创建一个切换，需要定义一个Transition对象，然后将其添加到项目的transitions
        // 当Rectangle改变到moved状态时，Transition将被触发
        transitions: Transition {
            PropertyAnimation { target: rect; properties: "x,y"; duration: 1000}
        }

        // 组合动画
        // SequentialAnimation中的动画会一个接一个的运行
        // ParallelAnimation中的动画会同时运行
        SequentialAnimation {
            loops: Animation.Infinite
            NumberAnimation {to: rect.height; easing.type: Easing.OutBounce; duration: 2000}
            PauseAnimation {duration: 1000}
            NumberAnimation {to: 0; easing.type: Easing.OutQuad; duration: 2000}
        }
        ParallelAnimation {}


        //Flickable元素可以将其子项目设置在一个可以拖拽和弹动的界面上，使得子项目的视图可以滚动
        //visibleArea属性可以显示滚动条，visibleArea.xPosition, visibleArea.yPosition, visibleArea.widthRatio, visibleArea.heightRatio
        Flickable {
            width: 200
            height: 200
            contentWidth:  100
            contentHeight: 100
            clip: true // Flickable不会自动剪裁它的内容，可以将clip设置为true来隐藏超出区域的内容
        }


        // Flipable可以在其正面和反面进行翻转
        // Flipable有一个flipped的布尔值属性，当在Flipable中的MouseArea上单击鼠标时都会切换该属性的值
        // 当flipped为true时，项目变为back状态，为false时，恢复到默认状态
        Flipable {
            front: Image {source: "front.png"}
            back: Image {source: "back.png"}
        }
    }
}