Ipad KineticJS简单动画不适用于移动设备

我想知道是否有人能帮我找到解决办法。 我用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();

var形状={
尺寸：[30,40,50,55,60,80]，
梯度：[
[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={
宽度：300，
身高：500
},
阶段=新的动力学阶段({
容器：“动画”，
宽度：dims.width，
高度：dims.height，
x:0,，
y:0，
可拖动：错误
});
函数getRandomColor（）{
返回颜色[getRandomFromInterval（0，colors.length-1）]；
}
函数getRandomGradient（）{
返回梯度[getRandomFromInterval（0，gradients.length-1）]；
}
函数getRandomFromInterval（从，到）{
返回Math.floor（Math.random（）*（to-from+1）+from）；
}
函数getRandomSpeed（）{
var速度=getRandomFromInterval（1,1）；
返回getRandomFromInterval（0，1）？速度：速度*-1；
}
函数createGroup（x、y、大小、笔划宽度）{
返回新的动力组({
x:x，
y:y，
宽度：大小，
高度：尺寸，
不透明度：0，
可拖动：错误，
clipFunc:函数（画布）{
var context=canvas.getContext（）；
context.beginPath（）；
context.moveTo（0,0）；
lineTo（0，大小）；
lineTo（大小、大小）；
context.lineTo（大小为0）；
rect（strokeWidth，strokeWidth，size-strokeWidth*2，size-strokeWidth*2）；
}
});
}
函数createShape（大小、渐变、笔划宽度、拐角半径）{
返回新的动力学.Rect({
x:0,，
y:0，
宽度：大小，
高度：尺寸，
fillLinearGradientStartPoint:[大小，0]，
fillLinearGradientEndPoint:[大小，大小]，
fillLinearGradientColorStops:渐变，
不透明度：1，
lineJoin:“倒角”，
冲程宽度：0，
转弯半径：转弯半径
});
}
var layer=新的动能层（），
animAttribs=[]；
对于（变量n=0；n<6；n++）{
变量大小=形状。大小[n]，
冲程宽度=数学单元（尺寸*0.12），
角半径=数学单元（尺寸*0.04），
渐变=形状。渐变[n]，
x=getRandomFromInterval（大小、dims.宽度）-大小，
y=getRandomFromInterval（大小、dims.高度）-大小；
var group=createGroup（x、y、大小、冲程宽度）；
var shape=createShape（大小、渐变、笔划宽度、拐角半径）；
推({
下一次更改：getRandomFromInterval（1,3）*1000，
开始时间：1000，
持续时间：0，
x:getRandomSpeed（），
y:getRandomSpeed（）
});
组。添加（形状）；
层。添加（组）；
}
阶段。添加（层）；
动画=新的动能。动画（功能（帧）{
变量时间=帧时间，
timeDiff=frame.timeDiff，
帧速率=frame.frameRate；
对于（var n=0；n1？1:shape.getOpacity（）+0.01，
attribs=animAttribs[n]，
x、 y；
如果（attribs.duration>=attribs.nextChange）{
attribs.x=getRandomSpeed（）；
attribs.y=getRandomSpeed（）；
attribs.nextChange=getRandomFromInterval（3,5）*1000；
attribs.duration=0；
}
如果（时间>=attribs.startTime）{
如果（shape.getX（）+attribs.x+shape.getWidth（）>=stage.getWidth（）| | shape.getX（）+attribs.x-shape.getWidth（）/2=stage.getHeight（）| | | shape.getY（）+attribs.y-shape.getHeight（）/2您面临的问题是，
clipFunc
目前无法在
像素比率=1的设备上运行

这个问题也出现了。KineticJS的创建者Eric Rowell将这个问题添加到了他9月底的报告中

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

要“非正式地”解决此问题，您只需将动能.js中的
\u clip
函数的最后一行替换为以下内容：
context.setTransform（this.pixelRatio，0，0，this.pixelRatio，0，0）；
（此操作的学分转到）
很好的动画。作为说明，我试着在我的S3上查看你的网站，但我根本没有看到任何矩形弹出。就好像舞台没有加载，或者完全在屏幕之外。希望这能有所帮助，如果我有其他想法，我会让你知道。啊哈，thanx projeqht用于观察。我希望我能跟踪/调试屏幕移动设备更多，但目前我缺乏工具。ThanxGreat，thanx作为解释。动画现在可见。唯一的问题是一些形状会留下痕迹。有人知道可能是什么问题吗？正如我之前的评论。在我的三星galaxy上，痕迹问题只存在于它的内置互联网浏览器中，在firefox.firefo中运行良好我想android上的x是另一种移动浏览器，因为在我将pixelRatio添加到_clip功能之前，clipping就已经在那里起作用了。你能用另一种webkit浏览器（如chrome或safari）试试吗？编辑：我刚刚在我的iPad（safari）和Nexus 4（chrome）上试用过在那里，一切似乎都完美无缺地运转着；）