Databases
StackOverflow2013
Postsdbo
POKineticJS simple animation not working on mobile devices
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKineticJS simple animation not working on mobile devices
    primarykey
    data
    text
    <p>I was wondering if someone could help me find the solution to this. I've made a very simple animation using KineticJS. All works perfect on desktop, unfortunately not on mobile devices (iPhone, iPad, Android).</p> <p>Result is a slowish performance but most importantly distorted shapes.</p> <p>I suspect it has something to do with resolution or viewport but am not sure.</p> <p>Preview is on www.bartvanhelsdingen.com</p> <p>Any suggestions are highly appreciated.</p> <p>Below is the code: </p> <pre><code>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 &lt; 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 &lt; layer.getChildren().length; n++) { var shape = layer.getChildren()[n], opacity = shape.getOpacity() + 0.01 &gt; 1 ? 1 : shape.getOpacity() + 0.01, attribs = animAttribs[n], x, y; if (attribs.duration &gt;= attribs.nextChange) { attribs.x = getRandomSpeed(); attribs.y = getRandomSpeed(); attribs.nextChange = getRandomFromInterval(3, 5) * 1000; attribs.duration = 0; } if (time &gt;= attribs.startTime) { if (shape.getX() + attribs.x + shape.getWidth() &gt;= stage.getWidth() || shape.getX() + attribs.x - shape.getWidth() / 2 &lt;= 0) { attribs.x *= -1; } if (shape.getY() + attribs.y + shape.getHeight() &gt;= stage.getHeight() || shape.getY() + attribs.y - shape.getHeight() / 2 &lt;= 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(); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USprojeqht
    1. USbash2day
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKineticJS simple animation not working on mobile devices
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POKineticJS simple animation not working on mobile devices
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. CONice animations. Just as a note, I tried looking at your website on my S3 and I didn't see **any** of the rectangles pop up at all. It was as if the stage did not load, or was completely outside of the screen. Hope that helps, I'll let you know if I come up with anything else.
      singulars
      1. POKineticJS simple animation not working on mobile devices
      1. USprojeqht
    2. COAha, thanx projeqht for the observation. I wish I could track/debug the mobile devices more but for now am lacking tools. Thanx
      singulars
      1. POKineticJS simple animation not working on mobile devices
      1. USbash2day
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload