Javascript paper.js中的精灵动画

我正在Paper.js上做我的项目

在这一部分，我需要将精灵与动画结合使用

举个例子，我有一艘宇宙飞船，它可以在屏幕上的任何地方出现，而且有时会出现一种混乱的效果

我准备了一张有10帧的spritesheet，我只想使用Paper.js光栅类加载它并在每一帧上设置动画

问题在于位置，我不知道如何计算它们

当我加载光栅时

let slide = new Raster({
    source:   'assets/sprite.png',
    position: [0, 0]
});

当我需要看到第一帧时，我看到了一个很长图像的中心

我的想法是使用带有CONTANTS面具的组（方形）

我可以动态地改变位置，同时为排列设置动画

那有可能吗？ 如果我不能计算光栅相对于遮罩的位置，那就太酷了，但现在对我来说，这似乎是不可能的

有人知道如何用一种简单的方法达到这个目的吗

---

干杯。

我在我的项目中研究过这个问题。关键是使用具有轴心点的组。诚然，这段代码未完成，并且是原始javascript，但它应该会给您一个好主意：

var Sprite = paper.Group.extend({
    _class: 'Sprite',
    initialize: function Sprite(url, size) {
        var maskSize = size || new paper.Size(256, 256);
        var that = this;

        this._raster = new paper.Raster(url);
        this._raster.pivot = new paper.Point();
        this._raster.on('load', function () {
            that._spriteSheetWidth = Math.floor(this.size.width / maskSize.width);
            that.setIndex(that._spriteIndex || 0);
        });
        this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize);

        Sprite.base.call(this, [this._clipRect, this._raster]);

        this.clipped = true;

        // Just use a blank point if you want the position to be in the corner
        this.pivot = new paper.Point(maskSize.divide(2));
    },

    setIndex: function (index) {
        if (typeof this._spriteSheetWidth !== "undefined") {
            // TODO: FINISH SPRITE SHEET IMPLEMENTATION
        }
        this._spriteIndex = index;
    }
});

我实际上不再在我的项目中使用精灵了，所以我从来没有完成过实现。但是复杂的概念应该在上面完成。即paper.js实现轴心点和剪裁遮罩的方式。默认情况下，对象的位置是其边界的中心。。。这是一种不适合的原因有很多，如图像的位置会出现变化，当它加载等。。。或者当路径的内容更改时。因此，我喜欢在制作任何对象后立即将轴设置为

0,0

。下一个关键部分是剪切遮罩仅对组起作用。最后，您可以扩展Group类来创建标准的Sprite类

this.\u raster.position.x

和

this.\u raster.position.y

的正常精灵移动应完成此实现

---

编辑：已完成我的实现

我刚开始在一个项目中使用纸张，并在寻找这个问题的答案。我将探索它，看看我学到了什么。好吧，我做了一个演示，我只是不确定你所说的“为传播设置动画”是什么意思？我自己没有做过，但我相信使用剪辑或“clipMask”是可能的：

var Sprite = paper.Group.extend({
    _class: 'Sprite',
    initialize: function Sprite(url, size) {
        var maskSize = size || new paper.Size(256, 256);
        var that = this;

        this._raster = new paper.Raster(url);
        this._raster.pivot = new paper.Point();
        this._raster.on('load', function () {
            that._spriteSheetWidth = Math.floor(this.size.width / maskSize.width);
            that.setIndex(that._spriteIndex || 0);
        });
        this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize);

        Sprite.base.call(this, [this._clipRect, this._raster]);

        this.clipped = true;

        // Just use a blank point if you want the position to be in the corner
        this.pivot = new paper.Point(maskSize.divide(2));
    },

    setIndex: function (index) {
        if (typeof this._spriteSheetWidth !== "undefined") {
            // TODO: FINISH SPRITE SHEET IMPLEMENTATION
        }
        this._spriteIndex = index;
    }
});