Animation（三-缓冲曲线）

缓冲曲线（Easing Curves）概念

• 属性值的改变能够通过一个动画来控制，缓冲曲线属性影响了一个属性值改变的插值算法
• 我们前面已经定义的动画都使用了一种线性的插值算法，因为一个动画的默认缓冲类型是Easing.Linear

• 一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线，所以缓冲类型定义了曲线的变化情况

 

ClickedImage.xml

import QtQuick 2.5

Item {
    id: root
    width: container.childrenRect.width + 16
    height: container.childrenRect.height + 16
    property alias text: label.text
    property alias source: image.source
    signal clicked

    // M1>>
    // ... add a framed rectangle as container
    property bool framed : false

    Rectangle {
        anchors.fill: parent
        color: "white"
        visible: root.framed
    }
    // <<M1

    Column {
        x: 8; y: 8
        id: container
        Image {
            id: image
        }
        Text {
            id: label
            width: image.width
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            color: "#e0e0e0"
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

// <<M1

main.xml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    title: qsTr("Hello World")
    id:root
    color: "black"
    width: 600
    height:340
    // 一系列的缓冲类型
    property variant easings : [
        "Linear","InQuad","OutQuad","InOutQuad",
        "InCubic","InSine","InCirc","InElastic",
        "InBack","InBounce" ]

    Grid{
        id:container
        // 设置 Grid 定位元素的位置
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 16
        // 设置容器的高度
        height: 200
        // 5 行
        columns: 5
        // 容器成员之间的间隙
        spacing: 16

        Repeater{
            model: easings
            ClickedImage{
                framed: true
                text: modelData
                source: "qrc:/new/prefix1/curves/" + modelData + ".png"
                onClicked: {
                    // 在动画上设置缓冲
                    anim.easing.type = modelData
                    // 重启动画
                    anim.restart()
                }
            }
        }
    }

    Rectangle{
        id:square
        color: "green"
        x:40
        y:260
    }

    // 定义动画
    NumberAnimation{
        id: anim
        // ？？？
        target: square
        from: 40
        to: root.width - 40 - square.width
        properties: "x"
        duration: 2000
    }
}

很遗憾，鼓捣了半天没有鼓捣出来~放着以后再回来找原因！