QML 动画和效果

Question

假设我们有箭头图像，如下所示：

但我们想用这张图片制作动画：

问题

这个不太优雅的动画是由一组不同的箭头图像创建的。但我想通过 qml 制作相同的动画。你知道任何组件（最好是 qml，但如果你不知道，你可以告诉我 qt 类），我可以用它来帮助我达到那个目的？另一个问题是，从性能的角度来看，搜索任何方法来实现它而不是将图像集组合成 gif 格式是否有意义？

Answer 1

根据箭头有背景的新信息更新。

您需要将箭头裁剪成具有透明背景的图像文件，并将背景作为单独的图像。

从那里，您可以使用与下面类似的概念，但箭头在增长。我相信您将能够找到一种垂直适合图像而不会水平操纵图像的图像模式。我将从尝试 fillMode: Image.TileHorizontally 开始。

将其视为伪代码，我目前无法访问计算机运行。

Image
{
   id: backgroundImage
   source: "background.png"
   Image
   {
      id: arrowWithTransparentBackground
      fillMode: Image.TileHorizontally
      source: "arrow.png"
      anchors.left: parent.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
          SequentialAnimation on width {
              loops: Animation.Infinite
              PropertyAnimation { from 0: to: parent.width }
          }
   }
}

参考旧答案，之前不知道图片有背景：

QML 非常适合大小变化动画。你可以很容易地在你的图像顶部有一个矩形锚定到左侧，它是白色的并且从 0 增长到 arrow.width。

将其视为伪代码，我目前无法访问计算机运行。

Image
{
   id: arrowImage
   source: "arrow.png"
   Rectangle
   {
      color: "white"
      anchors.left: parent.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
          SequentialAnimation on width {
              loops: Animation.Infinite
              PropertyAnimation { from 0: to: parent.width }
          }
   }
}

QML 动画和效果

QML animations and effects

qt

qml

qt-quick

问题