☰

如何使用 javascript 和 qml 制作动画？

tag-icon • tag-icon application-development ubuntu-touch
如何使用 javascript 和 qml 制作动画？

我搜索了互联网但找不到有关如何在 Ubuntu SDK 中为 UI 对象制作动画的简单指南。

有人可以解释一下所需的不同部分以及它们如何协同工作吗？

答案1

QtQuick 提供了丰富的过渡和动画库，您可以找到这里. 它基本上涉及以指定的时间间隔改变对象的属性。

下面是一个代码示例，用于使矩形块向侧面移动。

     Rectangle {
        id: rect
        color: "Green"
        width: units.gu(20)
        height: width
        x: units.gu(0)
        y: units.gu(0)

        MouseArea {
            anchors.fill: parent
            onClicked: rectAnimation.start()
        }

        NumberAnimation {
            id: rectAnimation
            target: rect
            property: "y"
            from: units.gu(0)
            to: units.gu(20)
            duration: 500
        }
    }

您可以根据对象状态、行为等各种因素触发动画。例如，如果您希望矩形以流畅的方式增加其大小，则可以定义以下行为，

Behavior on width {
    NumberAnimation { duration: 500 }
}

QtQuick 功能强大。我强烈建议您阅读官方 Qt 文档，了解可用的不同类型的动画及其触发器。

注意：虽然开发 Ubuntu Touch 应用程序需要 Ubuntu SDK，但值得知道的是，Ubuntu SDK 本身使用 Qt，因此如果您将来搜索 QML 解决方案而不是 Ubuntu SDK 解决方案，您将获得更多结果。

相关内容