ipad - KineticJS のシンプルなアニメーションがモバイル デバイスで機能しない

Question

誰かがこれに対する解決策を見つけるのを手伝ってくれるかどうか疑問に思っていました. KineticJS を使用して非常に単純なアニメーションを作成しました。デスクトップではすべて完璧に動作しますが、残念ながらモバイル デバイス (iPhone、iPad、Android) では動作しません。

その結果、パフォーマンスが低下しますが、最も重要なのは形状が歪むことです。

解像度またはビューポートに関係があると思われますが、よくわかりません。

プレビューは www.bartvanhelsdingen.com にあります

どんな提案でも大歓迎です。

以下はコードです：

var shapes = {
    sizes: [30, 40, 50, 55, 60, 80],
    gradients: [
        [0, '#fdfaee', 1, '#524f43'],
        [0, '#a39175', 1, '#dbae5e'],
        [0, '#b4c188', 1, '#f3de7c'],
        [0, '#eaf2ef', 1, '#587c71'],
        [0, '#a39175', 1, '#dbae5e'],
        [0, '#61845c', 1, '#b4b092']
    ],
},
dims = {
    width: 300,
    height: 500
},
stage = new Kinetic.Stage({
    container: 'animation',
    width: dims.width,
    height: dims.height,
    x: 0,
    y: 0,
    draggable: false
});

function getRandomColor() {
    return colors[getRandomFromInterval(0, colors.length - 1)];
}

function getRandomGradient() {
    return gradients[getRandomFromInterval(0, gradients.length - 1)];
}

function getRandomFromInterval(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function getRandomSpeed() {
    var speed = getRandomFromInterval(1, 1);
    return getRandomFromInterval(0, 1) ? speed : speed * -1;
}

function createGroup(x, y, size, strokeWidth) {
    return new Kinetic.Group({
        x: x,
        y: y,
        width: size,
        height: size,
        opacity: 0,
        draggable: false,
        clipFunc: function (canvas) {
            var context = canvas.getContext();
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, size);
            context.lineTo(size, size);
            context.lineTo(size, 0);
            context.rect(strokeWidth, strokeWidth, size - strokeWidth * 2, size - strokeWidth * 2);
        }

    });
}

function createShape(size, gradient, strokeWidth, cornerRadius) {
    return new Kinetic.Rect({
        x: 0,
        y: 0,
        width: size,
        height: size,
        fillLinearGradientStartPoint: [size, 0],
        fillLinearGradientEndPoint: [size, size],
        fillLinearGradientColorStops: gradient,
        opacity: 1,
        lineJoin: 'bevel',
        strokeWidth: 0,
        cornerRadius: cornerRadius
    });
}
var layer = new Kinetic.Layer(),
    animAttribs = [];

for (var n = 0; n < 6; n++) {
    var size = shapes.sizes[n],
        strokeWidth = Math.ceil(size * 0.12),
        cornerRadius = Math.ceil(size * 0.04),
        gradient = shapes.gradients[n],
        x = getRandomFromInterval(size, dims.width) - size,
        y = getRandomFromInterval(size, dims.height) - size;

    var group = createGroup(x, y, size, strokeWidth);

    var shape = createShape(size, gradient, strokeWidth, cornerRadius);

    animAttribs.push({
        nextChange: getRandomFromInterval(1, 3) * 1000,
        startTime: 1000,
        duration: 0,
        x: getRandomSpeed(),
        y: getRandomSpeed()
    });

    group.add(shape);
    layer.add(group);
}

stage.add(layer);

anim = new Kinetic.Animation(function (frame) {
    var time = frame.time,
        timeDiff = frame.timeDiff,
        frameRate = frame.frameRate;
    for (var n = 0; n < layer.getChildren().length; n++) {
        var shape = layer.getChildren()[n],
            opacity = shape.getOpacity() + 0.01 > 1 ? 1 : shape.getOpacity() + 0.01,
            attribs = animAttribs[n],
            x, y;

        if (attribs.duration >= attribs.nextChange) {
            attribs.x = getRandomSpeed();
            attribs.y = getRandomSpeed();
            attribs.nextChange = getRandomFromInterval(3, 5) * 1000;
            attribs.duration = 0;
        }

        if (time >= attribs.startTime) {
            if (shape.getX() + attribs.x + shape.getWidth() >= stage.getWidth() || shape.getX() + attribs.x - shape.getWidth() / 2 <= 0) {
                attribs.x *= -1;
            }
            if (shape.getY() + attribs.y + shape.getHeight() >= stage.getHeight() || shape.getY() + attribs.y - shape.getHeight() / 2 <= 0) {
                attribs.y *= -1;
            }
            x = shape.getX() + attribs.x;
            y = shape.getY() + attribs.y;
            attribs.duration += timeDiff;
            shape.setOpacity(opacity);
            shape.setX(x);
            shape.setY(y);
        }

    }
}, layer);
anim.start();