QML入门----图形动画基础（一）

一、图形动画基础

1.颜色

有多种表示方式

• SVG：“red”
• 十六进制：#RRGGBB
• Qt函数：Qt.rgba(1, 0, 0, 1)

2.渐变（Gradient）

使用渐变开销较大，建议只在静态项目中使用。

二、图片

1.图片

Image {
    id: image
    width: 200; height: 200
    fillMode: Image.Stretch
    //实际保存在内存中图片大小为100 * 100像素，可以提高性能。可以应对加载大图片时，内存过大的问题
    sourceSize.width: 100; sourceSize.height: 100
    source: "http://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"

	//可以获取到图片的进度状态，加载完，正在加载
    onStatusChanged: {
        if (image.status === Image.Ready)
            console.log("ready")
        else if (image.status === Image.Loading)
            console.log("loading")
    }
    //图片翻转，镜像
	mirror: true
}

2.边界图片

利用图片创建边框，BorderImage会将原图片分成九个区域。四个角不进行缩放，其他区域可以进行缩放或者平铺。

3.动态图片

AnimatedImage类型，用来播放一系列帧的图片动画，如GIF

当前帧：currentFrame
动画总长度：frameCount ，返回帧的总个数
开始：playing
暂停： paused

三、缩放、旋转、平移变换

1.使用属性

scale：缩放，值小于1缩小，值大于1放大，值负数镜像显示，值默认是1正常显示
rotation：顺时针旋转的度数，默认值为0，负值则会逆时针旋转。旋转也是transformOrigin指定中心点

Rectangle {
    width: 100; height: 100
    color: "lightgrey"

    Rectangle {
        width: 25; height: 25
        color: "red"
    }

    Rectangle {
        width: 25; height: 25
        color: "yellow"
        //x、y控制控件左上角的显示位置
        x: 25; y: 25

		//scal: 控制缩放
		//scale: 1.8
    }
}

加了缩放，默认原点是当前项目的中心，如果想向上图一样小正方形尖对尖，可以设置项目原点在左上角。

 Rectangle {
        width: 25; height: 25
        color: "yellow"
        x: 25; y: 25
		//scal: 控制缩放
		scale: 1.8
		transformOrigin: "TopLeft"
		//rotation控制旋转
		//rotation: 90
    }

2.高级变换 （Transform）

可以Rotation、Scale、Translate，例如，以Y轴旋转45度

Row {
    x: 10; y: 10; spacing: 10

    Image {
        id: name; source: "cat.jpg"
    }

    Image {
        id: name1; source: "cat.jpg"
        transform: Rotation {
            //指定原点
            origin.x: 30; origin.y: 30
            //代表X轴 Y轴 Z轴，可实现3D效果
            axis {
                x: 0; y: 1; z: 0
            }
            //旋转角度
            angle: 45
        }
    }
}

例如，将图片在X轴方向放大2倍

	Image {
        x:20; y:10; source: "cat.jpg"
        transform: Scale {
            origin.x: 25; origin.y: 25
            xScale: 2
        }
    }

平移使用Translate，提供了x和y属性

四、状态改变使用过渡

一个button在按压和释放时，背景颜色进行变换

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        //按压状态
        onPressed: button.state = "PRESSED"
        //释放状态
        onReleased: button.state = "RELEASED"
    }

	//states属性是一个包含了该项目所有状态的列表
    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]
    
	//transitions：可以在不同状态间切换时进行过渡动画
    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

五、使用默认行为动画

每点击一次，矩形的长宽增大50

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    //Behavior：当width这个属性变化时，就会应用这个动画
    Behavior on width {
        NumberAnimation { id: anim1; duration: 1000 }
    }

    Behavior on height {
        NumberAnimation { id: anim2; duration: 1000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect.width += 50; rect.height += 50
        }
    }
}

六、并行或顺序动画组

SequentialAnimation可以保证动画组顺序执行，ParallelAnimation并行执行

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        running: true
        //顺序执行：先变小宽，在变小高。这两个独立动画加入到动画组后，必须作为一个整体，开始或停止
        NumberAnimation { target: rect; property: "width"; to: 30; duration: 1000 }
        NumberAnimation { target: rect; property: "height"; to: 30; duration: 1000 }
    }
}

七、动画师动画

不同于上面的普通动画类型，有几个特殊的动画类型，只不过很类似。如ColorAnimation、ScaleAnimator、ScaleAnimator等。如下图的并行动画，不仅颜色变，缩放也同时变。

	ParallelAnimation {
        ColorAnimation {
            target: mixBox
            property: "color"
            from: "forestgreen"
            to: "lightsteelblue";
            duration: 1000
        }
        ScaleAnimator {
            target: mixBox
            from: 2
            to: 1
            duration: 1000
        }
        running: true
    }

八、控制动画的执行

1.动画回放

Animation类型包含了start、stop、resume（恢复）、pause（暂停）、resart（重新开始）、complete（完毕）。
需要注意的是stop是从当前位置停下来，complete是将动画执行完毕。

//宽从100增加到500，设置定时器，使其在500毫秒时暂停，此时宽应该增加至300处，实现了动画的暂停
Rectangle {
    width:100; height: 300
    color: "red"
    NumberAnimation on width{
        id: an
        to:500; duration: 1000
    }

    Timer {
        interval: 500; running: true
        onTriggered: {
            an.pause()
        }
    }
}

2.缓和曲线

使用它，可以有效简化动画效果的创建过程，如反弹效果、加速、减速、循环动画。QT中有示例，Easing Curves. 它包含了几十种效果图，如下图这个，斜率先高后平然后在高。速度在变化。

九、精灵动画

Sprite 精灵引擎是一个随机状态机，如果一张图片包含了多个帧，精灵引擎就可以使用该图片来创建动画。就像QQ飞车中的休闲区，人物有时站立，有时坐着，有时跑，并且可以控制动作时间比例，以至于人物会一直移动，不会看起来很呆板。

十、拖拽和弹动（Flickable）

通过这个弹动效果类型，可以在规定的区域显示更多的内容。回弹的效果也可以单独设置，可以通过flickableDirection来控制弹动的方向。flickDeceleration可设置弹动速度。

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height
    
    Image {
        id: image
        source: "cat.jpg"
    }
}

contentWidth，contentHeight设置可以进行拖拽的大小，也是在Flickable中显示的内容。Flickable不会自动裁剪它的内容，你可以自己设置clip属性，将其裁剪，不显示设置以外的区域。如下图，只在200,200的范围内拖拽弹动。

Rectangle {
    width: 360 ; height: 360
    color: "blue"
    
    Flickable {
        width: 200; height: 200
        contentWidth: image.width; contentHeight: image.height
        clip: true
        
        Image {
            id: image
            source: "cat.jpg"
        }
    }
}

十一、翻转效果（Flipable）

通过使用Rotation、State、Transition实现翻转。如下图，设置正面和反面图片，正面图片平铺，点击后，会翻转，再点击，就会初始化为正面。

Flipable {
    id: flipable
    width: 240
    height: 240
    
    property bool flipped: false
    
    front: Image { source: "cat.jpg"; anchors.centerIn: parent }
    back: Image { source: "ball.gif"; anchors.centerIn: parent }
    
    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        //绕Y轴旋转
        axis.x: 0; axis.y: 1; axis.z: 0
        angle: 0    // 默认初始化角度
    }
    
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        //属性值变为true后，触发翻转180度
        when: flipable.flipped
    }
    
    transitions: Transition {
    	//翻转持续4秒中
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }
    
    MouseArea {
        anchors.fill: parent
        //每点一次，flipped属性值变化
        onClicked: flipable.flipped = !flipable.flipped
    }
}