如何在QML中制作sprite sheet 精灵表单的动画

效果：

1，添加精灵表单到工程。打开qml.qrc，右键单击添加-添加存在文件--选择准好的sprite sheet图纸在这里下载。

2，在main.qml中创建新的矩形窗口

Rectangle
{
anchors.fill:parent
color:"white"
}

3，创建AnimatedSprite对象

AnimatedSprite{
   id:sprite;
   width:128;
   height:128;
   anchors.centerIn:parent;
   source:"qrc:///horse_1.png";
   frameCount:11;
   frameWidth:128;
   frameHeight:128;
   frameRate:25;
   loops:Animation.Infinite;
   running:true;
}

4，添加交互，点击播放，再点击，停止

//创建交互的感应
    MouseArea{
    anchors.fill: parent;
    //设置点击停止播放
        onClicked:
            if(sprite.paused){
            sprite.resume();
            }else{
            sprite.pause();
            }
    }

5,使骏马横穿屏幕，并将之前的坐标定位修改

     //anchors.centerIn:parent;
       x:-128;
       y:height/2;

    //使动画横穿屏幕
    NumberAnimation{
        target:sprite;
        property: "x";
        easing.type: Easing.Linear
        from:-128;
        to:512;
        duration: 3500;
        loops: Animation.Infinite;
        running: true;

    }

完整代码：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //创建舞台（其实就是一个白色的矩形框）
    Rectangle{
    anchors.fill: parent
    color:"white"
    }
    //创建sprintsheet
    AnimatedSprite{
       id:sprite;
       width:128;
       height:128;
       //anchors.centerIn:parent;
       x:-128;
       y:height/2;
       source:"qrc:///horse_1.png";
       frameCount:11;
       frameWidth:128;
       frameHeight:128;
       frameRate:25;
       loops:Animation.Infinite;
       running:true;
    }
    //使动画横穿屏幕
    NumberAnimation{
        target:sprite;
        property: "x";
        easing.type: Easing.Linear
        from:-128;
        to:512;
        duration: 3500;
        loops: Animation.Infinite;
        running: true;

    }
    //创建交互的感应
    MouseArea{
    anchors.fill: parent;
    //设置点击停止播放
        onClicked:
            if(sprite.paused){
            sprite.resume();
            }else{
            sprite.pause();
            }
    }

}

总结：这种方法经常会用在游戏中，展示角色动画，特效动画等等。会依次播放单帧的图片。