Question

我正在测试PIXIjs的简单2D图形，基本上我正在滑动具有一些背景颜色和边框动画的图块，而且我正在掩盖布局的某些部分。虽然它在台式机中效果很好，但它比在移动设备中使用纯css制作的相同幻灯片+动画要慢得多（顺便说一句，我使用的是crosswalk + cordova，因此浏览器总是相同的）对于移动切片和动画颜色，我正在为每个切片调用requestAnimationFrame，并且我已经禁用了PIXI的滚动条：

ticker.autoStart = false;
        ticker.stop();

这种缓慢可能是由于手机上的GPU较弱？或者只是我使用PIXI的方式？

我没有显示完整的代码，因为它很长~800行。

以下是捕获幻灯片后我用于每个图块的例程：

   const animateTileBorderAndText = (tileObj, steps, _color, radius, textSize, strokeThickness, _config) => {
    let pixiTile = tileObj.tile;
    let s = 0;
    let graphicsData = pixiTile.graphicsData[0];
    let shape = graphicsData.shape;
    let textStyle = pixiTile.children[0].style;
    let textInc = (textSize - textStyle.fontSize) / steps;
    let strokeInc = (strokeThickness - textStyle.strokeThickness) / steps;

    let prevColor = graphicsData.fillColor;
    let color = _color !== null ? _color : prevColor;
    let alpha = pixiTile.alpha;
    let h = shape.height;
    let w = shape.width;
    let rad = shape.radius;
    let radiusInc = (radius - rad) / steps;

    let r = (prevColor & 0xFF0000) >> 16;
    let g = (prevColor & 0x00FF00) >> 8;
    let b = prevColor & 0x0000FF;
    let rc = (color & 0xFF0000) >> 16;
    let rg = (color & 0x00FF00) >> 8;
    let rb = color & 0x0000FF;
    let redStep = (rc - r) / steps;
    let greenStep = (rg - g) / steps;
    let blueStep = (rb - b) / steps;
    let paintColor = prevColor;
    let goPaint = color !== prevColor;
    let animate = (t) => {
        if (s === steps) {
            textStyle.fontSize = textSize;
            textStyle.strokeThickness = strokeThickness;

            //pixiTile.tint = color;
            if (!_config.SEMAPHORES.slide) {
                _config.SEMAPHORES.slide = true;
                PUBSUB.publish(_config.SLIDE_CODE, _config.torusModel.getData());
            }


            return true;
        }


        if (goPaint) {
            r += redStep;
            g += greenStep;
            b += blueStep;
            paintColor = (r << 16) + (g << 8) + b;
        }

        textStyle.fontSize += textInc;
        textStyle.strokeThickness += strokeInc;
        pixiTile.clear()
        pixiTile.beginFill(paintColor, alpha)
        pixiTile.drawRoundedRect(0, 0, h, w, rad + radiusInc * (s + 1))
        pixiTile.endFill();
        s++;
        return requestAnimationFrame(animate);
    };
    return animate();
};

在以下函数之后调用上面的函数，为每个图块调用以使其滑动。

    const slideSingleTile = (tileObj, delta, axe, conf, SEM, tilesMap) => {
    let tile = tileObj.tile;
    let steps = conf.animationSteps;
    SEM.slide = false;
    let s = 0;
    let stepDelta = delta / steps;
    let endPos = tile[axe] + delta;
    let slide = (time) => {
        if (s === steps) {
            tile[axe] = endPos;
            tileObj.resetPosition();

            tilesMap[tileObj.row][tileObj.col] = tileObj;
            return tileObj.onSlideEnd(axe == 'x' ? 0 : 2);
        }
        tile[axe] += stepDelta;
        s++;
        return requestAnimationFrame(slide);
    };

    return slide();
};

对于每个手指手势，使用上述两个函数滑动单个列/行（NxM矩阵矩阵）。

这是我第一次使用canvas。我认为画布比DOM动画更快，我对PIXIjs的评论非常好，所以我相信我做错了。

有人可以帮忙吗？

Answer 1

最后，我是一个完全的人... 问题不在于pixijs。

基本上我强迫60fps！完成动画的步骤数设置为12，意味着60FPS时使用200ms动画（使用requestAnimationFrame），但在低端设备中，它显然会变慢。 Css动画以定时作为参数工作，因此它自动使FPS适应设备硬件。

为了解决这个问题，我正在调整动画期间的步数，基本上如果动画花费的时间超过200毫秒，我只是按比例减少步数。

我希望这对于刚刚开始开发canvas的css动画的每个Web开发人员都有帮助。

与css

1 个答案: