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

标签: Qt QML
7人阅读 评论(0) 收藏 举报
分类:

前言:

属性值的改变能够通过一个动画来控制,缓冲曲线属性影响了一个属性值改变的插值算法。在已经定义的动画都使用了一种线性的插值算法,因为一个动画的默认缓冲类型是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) 来查看一个缓冲曲线的相关参数。

查看评论

QML动画与过度

动画(Animation)和过度(Transition)元素 Transition - 状态改变的过度动画SequentialAnimation - 串行执行动画ParallelAnimation ...
  • bbdxf
  • bbdxf
  • 2016年09月06日 16:28
  • 843

Unity Mecanim动画的实现(七):动画曲线

通过动画事件,我们可以在动画过程中调用某个函数实现某种特定功能,如果我们需要在动画过程中调用多个函数,则需要在动画过程多个时间点插入动画事件。如果我们需要在动画中一个连续时间段中调用一个函数,则动画事...
  • wkhabc
  • wkhabc
  • 2016年08月12日 23:47
  • 3820

QML官方系列教程——Qt QML

附网址:http://qt-project.org/doc/qt-5/qtqml-index.html Qt QML Qt QML模块为基于QML language开发应用程序和库提供了语言和基础...
  • u011348999
  • u011348999
  • 2014年06月04日 16:59
  • 10405

Qt:在QML中自定义贝塞尔动画曲线

Qt在PropertyAnimation中,已经准备了很多常用的动画曲线,比如说Linear、Quad、Elastic等。这些基本已经可以覆盖我们大部分需求了,但是也不是所有的。 比如说,googl...
  • wsj18808050
  • wsj18808050
  • 2017年06月05日 17:03
  • 1065

Qml之坐标轴的实现及曲线添加

前面一张文章介绍过在利用QPainter接口画可拖动的圆,通过官方介绍: Graphics in Qt 5 is primarily done either through the imperativ...
  • zbc415766331
  • zbc415766331
  • 2015年09月09日 02:14
  • 3445

Unity 曲线编辑器说明

曲线编辑器 曲线有许多不同的用途,在 Unity 中有一些使用可编辑曲线的不同控件。文档地址:https://docs.unity3d.com/Manual/EditingCurves.html ...
  • akof1314
  • akof1314
  • 2016年06月30日 09:26
  • 5564

Unity/Animation -- 调节Animation Curves

Unity的Animation窗口有一项功能强大的Curves视图,我们可以利用Curves实现更加多变的动画效果。...
  • qq_28849871
  • qq_28849871
  • 2017年05月26日 17:03
  • 2118

QML之Animation

       越来越喜欢QML了,太神奇了,所以决定好好的学习下。      1、 Animation      import Qt 4.7 Rectangle { width: 100;...
  • liuhongwei123888
  • liuhongwei123888
  • 2010年12月06日 02:44
  • 5849

自制绘制曲线组件-可局部放大缩小功能(C++ 与 QML结合)

效果图: (录制时看不到鼠标...)首先这个缩放是鼠标放置在曲线的一个点然后开始在这个点展开与收缩,(因为懒所以没有增加横纵坐标的显示,在代码中设置都是0-100)。 绘制曲线是在C++中绘制的...
  • w54a3teg64c7bd
  • w54a3teg64c7bd
  • 2017年02月22日 16:05
  • 775

Precision/Recall和ROC曲线

【Precision/Recall的基本概念】转载自http://www.zhizhihu.com/html/y2010/2137.html。查准率和查全率是信息检索效率评价的两个定量指标,不仅可以用...
  • adminabcd
  • adminabcd
  • 2015年06月12日 20:30
  • 5082
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 2990
    积分: 740
    排名: 6万+
    博客专栏
    文章存档
    最新评论