Qt_QML动画(Animations)___一

动画的解释:
动画被用于属性的改变。
一个动画定义了属性值改变的曲线, 将一个属性值变化从一个值过渡到另一个值。
动画是由一连串的目标属性活动定义的, 平缓的曲线算法能够引发一个定义时间内属性的持续变化。 所有在QtQuick中的动画都由同一个计时器来控制, 因此它们始终都保持同步, 这也提高了动画的性能和显示效果。
动画控制了属性的改变, 每个元素都有大量的属性供你任意使用。

Image {
	x: 40; y: 80
	source: "assets/rocket.png"
	
	// 动画在X轴方向上,逐步移动至240位置,每一次持续4000ms,并永远循环
	NumberAnimation on x {
		to: 240
		duration: 4000
		loops: Animation.Infinite
	}
	// 动画旋转,逐步旋转至360°,每次持续4000ms,并永远循环
	RotationAnimation on rotation {
		to: 360
		duration: 4000
		loops: Animation.Infinite
	}
}

动画元素(Animation Elements)

基础和通用的动画元素:

  • PropertyAnimation(属性动画) - 使用属性值改变播放的动画:easing.amplitude(缓冲振幅),easing.overshoot(缓冲溢出),easing.period(缓冲周期)
  • NumberAnimation(数字动画) - 使用数字改变播放的动画
  • ColorAnimation(颜色动画) - 使用颜色改变播放的动画
  • RotationAnimation(旋转动画) - 使用旋转改变播放的动画

特殊场景使用动画:

  • PauseAnimation(停止动画) - 运行暂停一个动画
  • SequentialAnimation(顺序动画) - 允许动画有序播放
  • ParallelAnimation(并行动画) - 允许动画同时播放
  • AnchorAnimation(锚定动画) - 使用锚定改变播放的动画
  • ParentAnimation(父元素动画) - 使用父对象改变播放的动画
  • SmotthedAnimation(平滑动画) - 跟踪一个平滑值播放的动画
  • SpringAnimation(弹簧动画) - 跟踪一个弹簧变换的值播放的动画
  • PathAnimation(路径动画) - 跟踪一个元素对象的路径的动画
  • Vector3dAnimation(3D容器动画) - 使用QVector3d值改变播放的动画

动画的动作元素

  • PropertyAction(属性动作) - 在播放动画时改变属性
  • ScriptAction( 脚本动作) - 在播放动画时运行脚本

应用动画(Applying Animations)

  • 属性动画 - 在元素完整加载后自动运行
  • 属性动作 - 当属性值改变时自动运行
  • 独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true( 比如通过属性绑定)

缓冲曲线(Easing Curves)
动画的默认缓冲类型是Easing.Linear。
一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线, 所以缓冲类型定义了曲线的变化情况。

注意
不要过度的使用动画。 用户界面动画的设计应该尽量小心, 动画是让界面更加生动而不是充满整个界面。 眼睛对于移动的东西非常敏感, 很容易干扰用户的使用。

动画分组(Grouped Animations)
有两种方法来分组: ParallelAnimation(平行动画)与SequentialAnimation(连续动画)

import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    title: qsTr("Hello World")
    property int duration: 3000

	// 设置背景,天空
    Rectangle {
        id: sky
        width: root.width
        height: root.height * 2 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }

	// 设置背景,草坪
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom

        width: root.width
        height: root.height * 1 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }

	// 添加足球
    Image {
        id: ball
        x: 20; y: 240
        width: 20
        height: 20
        // 添加资源文件,否则找不到
        source: "qrc:/ball.jpg"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20; ball.y = 240
                anim.restart()
            }
        }
    }

	// 组合动画
    ParallelAnimation {
        id: anim
        // Y轴运动,上下运行
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: root.duration * 0.6
            }
        }
        // X轴运动,往左运动
        NumberAnimation { // X1 animation
            target: ball
            properties: "x"
            to: 400
            duration: root.duration
        }

        // 旋转运动
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
       }
    }
}

后续动画还有介绍

你可能感兴趣的:(QT,Qt,Quick)