QML动画和效果

Question

想象我们的箭头图像如下：

但是我们要从这张图片制作一个动画：

---

问题

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

---

Answer 1

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

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

从那里，您可以使用与下面类似的概念，但是箭头会不断增大。我相信您将能够找到一种图像模式，该模式在垂直方向上适合图像，而在水平方向上则不可以。我将从尝试fillMode开始：Image.TileHorizo​​ntally。

将此作为伪代码进行处理，目前我无法使用计算机来运行它。

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 }
          }
   }
}