左霖风的博客

一入代码深似海

QML进阶教程:二、缓冲曲线(Easing Curves)

前言:

属性值的改变能够通过一个动画来控制,缓冲曲线属性影响了一个属性值改变的插值算法。在已经定义的动画都使用了一种线性的插值算法,因为一个动画的默认缓冲类型是Easing.Linear。在一个小场景下的x轴与y轴坐标改变可以得到最好
的视觉效果。一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线,所以缓冲类型定义了曲线的变化情况。

代码实例:

// M1>>
// easingtypes.qml

import QtQuick 2.0

DarkSquare {
    id: root
    width: 600
    height: 340

    // A list of easing types
    property variant easings : [
        "Linear", "InQuad", "OutQuad", "InOutQuad",
        "InCubic", "InSine", "InCirc", "InElastic",
        "InBack", "InBounce" ]


    Grid {
        id: container
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 16
        height: 200
        columns: 5
        spacing: 16
        // iterates over the 'easings' list
        Repeater { 
            //设置Repeater的模型
            model: easings
            ClickableImageV3 {
                framed: true
                // the current data entry from 'easings' list
                text: modelData
                source: "curves/" + modelData + ".png"
                onClicked: {
                    // set the easing type on the animation
                    anim.easing.type = modelData
                    // restart the animation
                    anim.restart()
                }
            }
        }
    }

    // The square to be animated
    GreenSquare {
        id: square
        x: 40; y: 260
    }

    // The animation to test the easing types
    NumberAnimation {
        id: anim
        target: square
        from: 40; to: root.width - 40 - square.width
        properties: "x"
        duration: 2000
    }
}
// <<M1

注意:

除了duration属性与easing.type属性,也可以对动画进行微调。例如PropertyAnimation属性,大多数动画都支持附加的easing.amplitude(缓冲振幅) ,easing.overshoot(缓冲溢出) ,easing.period(缓冲周期) ,这些属性允许你对个别的缓冲曲线进行微调。不是所有的缓冲曲线都支持这些参数。可以查看Qt PropertyAnimation文档中的缓冲列表(easing table) 来查看一个缓冲曲线的相关参数。

阅读更多
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_40194498/article/details/79958525
文章标签: Qt QML
个人分类: QT QML
上一篇QML进阶教程:一、动画元素与应用
下一篇QML进阶教程:三、动画分组(Grouped Animations)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭