Question

import QtQuick 1.0

Rectangle 
{
  width: 100; height: 100
  color: "red"

   MouseArea 
   {
    anchors.fill: parent

    onPressed:
    {
      NumberAnimation 
      { 
        target: parent.x
        to: 50; 
        duration: 1000 
      }
    }
  }
}

我希望这段代码能够在按钮按下事件中移动矩形的x位置，但这没有任何作用。

我哪里错了？

Answer 1

您正在信号处理程序中定义NumberAnimation，它无法正常工作。此外，NumberAnimation目标应该是一个项目，在这里您要定位项目的属性。以下是您的代码更正：

import QtQuick 1.0

Rectangle 
{
  id: rect
  width: 100; height: 100
  color: "red"

   MouseArea 
   {
    anchors.fill: parent

    onPressed:
    {
        animation.start()
    }

    NumberAnimation 
    { 
        id: animation
        target: rect
        property: "x"
        to: 50; 
        duration: 1000 
    }
  }
}

如果您的矩形动画在鼠标释放时应该还原，您可以利用正确的状态定义，并为动画属性设置＆＃34; x＆＃34;在每个州的变化（默认和＆＃34;按下＆＃34;状态之间。这是一个自包含的例子：

import QtQuick 1.0

Rectangle {
  id: root
  width: 360
  height: 200

  Rectangle 
  {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea 
    {
      id: mouse
      anchors.fill: parent
    }

    states: [
      State {
        name: "pressed"
        when: mouse.pressed

        PropertyChanges {
          target: rect
          x: 50
        }
      }
    ]

    Behavior on x {
      NumberAnimation { duration: 1000 } 
    }
  }
}

如果您需要更复杂的动画，请定义正确的Transition。这里的简单Behavior更具可读性。

Answer 2

试试这段代码：

import QtQuick 1.0

Rectangle
{
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent

        onPressed: {
            animation.start();
        }
    }

    NumberAnimation on x {
        id: animation
        running: false

        to: 50
        duration: 1000
    }
}

来自docs：

NumberAnimation是一个专门的PropertyAnimation，用于定义在数值变化时应用的动画。

因此，您不希望在点击上制作动画，但是您想要将动画分配给矩形的x属性并在点击时启动它。

如何在QML中使用鼠标按键事件编写数字动画？

2 个答案: