2013-07-23 215 views
1

我想知道是否有人能幫我找到解決方案。 我用KineticJS製作了一個非常簡單的動畫。 所有作品完美的桌面,不幸的是不在移動設備(iPhone,iPad,Android)上。KineticJS簡單的動畫不能在移動設備上工作

結果是一個緩慢的表現,但最重要的是扭曲的形狀。

我懷疑它與分辨率或視口有關,但我不確定。

預覽是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(); 
+0

好的動畫。就像一張紙條一樣,我試着在S3上查看你的網站,我沒有看到任何**的矩形彈出。就好像舞臺沒有加載,或者完全在屏幕之外。希望有所幫助,如果我拿出其他東西,我會告訴你。 – projeqht

+0

阿哈,thanx項目的觀察。我希望我能更多地跟蹤/調試移動設備,但現在缺乏工具。 Thanx – bash2day

回答

0

你所面臨的問題是,clipFunc不是目前正在使用的設備pixelratio != 1

這個問題也出現在this post。 KineticJS的創建者Eric Rowell將這個問題在9月末添加到他的release scedule中。

所以沒有什麼不對您的動畫,他們正在按預期工作,但你不能看到他們,因爲扭曲的剪切區域的

要解決此問題「內定」你可以簡單地替換最後_clip功能在您的kinetic.js與以下內容:context.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);(信貸的去Mark Smits

+0

偉大的,thanx的解釋。動畫現在可見。唯一的麻煩是某些形狀留下痕跡。誰會知道可能是什麼問題? – bash2day

+0

給我以前的評論。在我的三星Galaxy上,跟蹤問題只存在於它的內置互聯網瀏覽器中,在Firefox中運行良好。 – bash2day

+0

android上的firefox是我猜的另一種移動瀏覽器,因爲在我將剪輯pixelRatio添加到_clip函數之前,在我的案例中剪切工作。你可以使用另一個webkit瀏覽器(如chrome或safari)來嘗試它,看看這些痕跡是否可見? 編輯:我剛剛在我的iPad(safari)和Nexus 4(chrome)上試過它,並且在那裏一切看起來都完美無缺;) – irie

相關問題