时间戳

首页 > 解决方案 > 结合使用 Animators 和 PropertyAnimation 的 QML 过渡动画

qt - 结合使用 Animators 和 PropertyAnimation 的 QML 过渡动画

问题描述

在状态转换动画中使用 QML Animatiors 时遇到一些问题。这是我的工作示例代码。在此示例中，如果我决定不为 OpacityAnimator 提供“来自”属性（原因是我希望它考虑当前属性值），则动画师不会为属性设置动画。

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property bool isOpen: false
    Button {
        anchors.centerIn: parent
        text: "Fade Animation Open Layer "
        onClicked: {
            isOpen = true;
            overlay.state = "open";
        }
    }
    Rectangle {
        id: overlay
        anchors.fill: parent
        color: "green"
        visible: isOpen
        opacity: 0
        Button {
            anchors.centerIn: parent
            text: "Close Overlay"
            onClicked: {
                overlay.state = "close"
            }
        }

        state: "close"
        states: [
            State {
                name: "hidden"
            },
            State {
                name: "visible"
            }
        ]
        transitions: [
            Transition {
                from: "close"
                to: "open"
                OpacityAnimator {
                    target: overlay
                    from: 0.0
                    to: 1.0
                    duration: 600
                    easing.type: Easing.OutCubic
                }


            },
            Transition {
                from: "open"
                to: "close"
                SequentialAnimation {
                    OpacityAnimator {
                        target: overlay
                        //from: overlay.opacity
                        to: 0.0
                        duration: 600
                        easing.type: Easing.OutCubic
                    }
                    ScriptAction {
                        script: {
                            isOpen = false;
                        }
                    }

                }
            }
        ]
    }
}

如果我改用 PropertyAnimation，淡入淡出效果绝对没问题。因此，我只是深入研究了 Animator Code 并从 qquickanimator.cpp 的 apply 函数中找到了以下片段，并假设这意味着如果未指定“from”，则应该从目标的属性值和注释中获取它魔术线像 PropertyAnimation 一样工作。但它不是这样工作的

    if (isFromDefined)
        job->setFrom(from);
    else if (action.fromValue.isValid())
        job->setFrom(action.fromValue.toReal());
    else
        job->setFrom(action.property.read().toReal());

// This magic line is in sync with what PropertyAnimation does
// and prevents the animation to end up in the "completeList"
// which forces action.toValue to be written directly to
// the item when a transition is cancelled.
 action.fromValue = action.toValue;

所以我的问题是：

  1. 它是 Qt Animator 中的错误还是我在这里遗漏了什么？
  2. 是否可以将 PropertyAnimation 和 Animators(Opacity,Scale) 在分组动画（顺序或并行）中组合为状态转换，前提是 Animators 范围是场景图，对于 PropertyAnimation，它是目标对象

标签： qtanimationqmlqt5

解决方案

from有关Animator的属性，请参阅文档中的此注释：

如果 Animator 是在一个 Transition 或 Behavior 中定义的，则该值默认为在 Transition 的起始状态中定义的值，或者是触发 Behavior 时属性的当前值。

我认为这意味着它将使用来自状态的to值而不是目标上的当前值。似乎状态机正在跟踪和使用转换如何离开事物而不是当前值。1.0open

您from: overlay.opacity应该解决该行为吗？

推荐阅读