Qt Quick-当组件状态更改时，设置图像转换动画的最佳方法是什么？

使用Qt Quick，我创建了一个自定义按钮，如下所示：

此按钮还包含多个状态（默认、悬停、按下），并且每个状态之间的转换都设置了动画。我找到了一种使用Qt Quick引擎轻松设置每个属性动画的方法，但图像引擎除外。实际上，我想通过在状态之间执行交叉淡入淡出来设置图像过渡的动画

然而，我找不到一个这样的图像动画师。我找到的唯一方法是向我的按钮添加3个图像，每个状态一个，并设置它们各自的不透明度的动画

下面是我的按钮的代码：

按钮
{
属性bool hoveredBtn:false
属性bool pressedBtn:false
id:btAnimStateDemo
身高：40
anchors.right:父项.right
5.右页边距：5
anchors.left：parent.left
5.leftMargin:5
anchors.top：parent.top
上边距：290
状态：“默认”
//按钮背景
背景：矩形
{
id:btAnimStateDemoBg
锚定。填充：父级
}
//按钮文本
正文
{
id:btanimstatedomext
文本：qsTr（“显示动画状态的按钮（默认、悬停、按下）”）
renderType:Text.NativerEnding
font.bold:正确
水平对齐：Text.AlignHCenter
垂直对齐：Text.AlignVCenter
锚定。填充：父级
}
形象
{
id:BTanimstateDemoteFaultimage
宽度：30
身高：30
anchors.left：parent.left
5.leftMargin:5
.bottom：parent.bottom
下边距：5
anchors.top：parent.top
1.5页边距：5
不透明度：1.0
来源：“Resources/palete.svg”
}
形象
{
id:btanimstatedomhoverimage
宽度：30
身高：30
anchors.left：parent.left
5.leftMargin:5
.bottom：parent.bottom
下边距：5
anchors.top：parent.top
1.5页边距：5
不透明度：0.0
来源：“Resources/Smile.svg”
}
形象
{
id:btAnimStateDemoPressedImage
宽度：30
身高：30
anchors.left：parent.left
5.leftMargin:5
.bottom：parent.bottom
下边距：5
anchors.top：parent.top
1.5页边距：5
不透明度：0.0
来源：“Resources/Woman.svg”
}
//组件状态数组
国家：
[
陈述
{
名称：“默认值”
属性更改{target:btAnimStateDemoBg；颜色：“绿色”}
属性更改{目标：btAnimStateDemoBg；半径：4}
PropertyChanges{target:btanimstatedemdeformultimage；不透明度：1.0}
PropertyChanges{target:btanimstatedmoverimage；不透明度：0.0}
属性更改{target:btanimstatedempressedimage；不透明度：0.0}
},
陈述
{
名称：“悬停”
属性更改{target:btAnimStateDemoBg；颜色：“红色”}
属性更改{目标：btAnimStateDemoBg；半径：10}
PropertyChanges{target:btanimstateDemeFaultimage；不透明度：0.0}
PropertyChanges{target:btanimstatedmoverimage；不透明度：1.0}
属性更改{target:btanimstatedempressedimage；不透明度：0.0}
},
陈述
{
名称：“已按下”
属性更改{target:btAnimStateDemoBg；颜色：“蓝色”}
属性更改{目标：btAnimStateDemoBg；半径：15}
PropertyChanges{target:btanimstateDemeFaultimage；不透明度：0.0}
PropertyChanges{target:btanimstatedmoverimage；不透明度：0.0}
属性更改{目标：btanimstatedempressedimage；不透明度：1.0}
}
]
//状态之间的匹配转换
过渡：
[
过渡
{
从：“*”到：“默认”
ColorAnimation{属性：“颜色”；easing.type:easing.Linear；持续时间：1000}
NumberAnimation{properties:“半径，不透明度”；easing.type:easing.Linear；持续时间：1000}
},
过渡
{
从：“*”到：“悬停”
ColorAnimation{属性：“颜色”；easing.type:easing.Linear；持续时间：1000}
NumberAnimation{properties:“半径，不透明度”；easing.type:easing.Linear；持续时间：1000}
},
过渡
{
从：“*”到：“按下”
ColorAnimation{属性：“颜色”；easing.type:easing.Linear；持续时间：1000}
NumberAnimation{properties:“半径，不透明度”；easing.type:easing.Linear；持续时间：1000}
}
]
//将应用与当前鼠标状态相关的正确状态的鼠标区域
鼠耳
{
锚定。填充：父级
hoverEnabled:true
onenterned:{btAnimStateDemo.state=“HOVERED”；btAnimStateDemo.hoveredBtn=true；}
onExited:{btAnimStateDemo.state=btAnimStateDemo.pressedBtn？“按下”：“默认值”；btAnimStateDemo.hoveredBtn=false；}
onPressed:{btAnimStateDemo.state=“PRESSED”；btAnimStateDemo.pressedBtn=true；}
onReleased:{btAnimStateDemo.state=btAnimStateDemo.hoveredBtn？“悬停”：“默认值”；btAnimStateDemo.pressedBtn=false；}
}
}

上面的代码运行良好，达到了我计划的目的，但在我看来有点复杂。如果像

NumberAnimation

或

ColorAnimation

这样的动画师能够出现在这些图像中，那就太好了，但我发现没有

---

所以我的问题是：有没有比我上面提出的解决方案更简单的方法来设置组件状态之间图像转换的动画？Qt Quick是否建议一位动画师来达到这样的目的？

创建一个精灵表，为每个o指定状态

      Sprite{
          name: "still"
          source: "content/BearSheet.png"
          frameCount: 1
          frameWidth: 256
          frameHeight: 256
          frameDuration: 100
          to: {"still":1, "blink":0.1, "floating":0}
      }

  SequentialAnimation {
      id: anim
      ScriptAction { script: image.goalSprite = "falling"; }
      NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; }
      ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
      PropertyAction { target: image; property: "y"; value: 0 }
  }