Disappearance animation of an image

Question

I have this arrow image:

and I want to animate it as follows:

Is there a component (preferably QML) that can achieve this?

Also, performance wise, is it better to just combine a set of images to gif-format?

Answer 1

Updating based on new information that the arrow has a background.

You need to crop out the arrow to an image file with a transparent background and have the background as a separate image.

From there, you can use a similar concept as below, but with the arrow growing. I believe you will be able to find an image mode that fits the image vertically and does not manipulate it horizontally. I would start by trying fillMode: Image.TileHorizontally.

Treat this as pseudo code, I don't have access to a computer to run this on at the moment.

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

Old answer for reference, before knowing there was a background to the image:

QML very nicely animates size changes. You could easily have a rectangle on top of your image anchored to the left side that is white and grows from 0 to arrow.width.

Treat this as pseudo code, I don't have access to a computer to run this on at the moment.

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