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();

Answer 1

您遇到的问题是clipFunc当前正在处理pixelratio != 1的设备。

此问题也出现在this post中。 KineticJS的创建者Eric Rowell在9月底将这个问题添加到他的release scedule。

因此，您的动画没有任何问题，它们按预期工作，但由于剪裁区域扭曲，您无法看到它们

解决这个问题＆＃34;非官方＆＃34;您只需使用以下内容替换kinetic.js中_clip函数的最后一行：context.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);（此信用转到Mark Smits）

KineticJS简单动画无法在移动设备上运行

1 个答案: