HTML5 Mobile Web Canvas animation using Phonegap + Kinetic.JS
In this tutorial, I wanted to test the use and integration of KineticJS – an HTML5 Canvas library, with Phonegap […]
25th Jun 2012
HTML5 Mobile Web Canvas animation using Phonegap + Kinetic.JS
In this tutorial, I wanted to test the use and integration of KineticJS – an HTML5 Canvas library, with
Phonegap & JQuery-mobile.
Github: https://github.com/w2davids/phonegap-kineticjs.git
Kinetic.JS: http://www.kineticjs.com/
JQuery-mobile: http://jquerymobile.com/
Phonegap: http://phonegap.com/
File: Android activity – DemoPhonegapKineticJSActivity .java
package demo.kinetic; import com.phonegap.*; import android.os.Bundle; public class DemoPhonegapKineticJSActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } }
var demo1= function() { var stage = new Kinetic.Stage({ container : "container", width : $(document).width() - 20, height : $(document).height() - 100, draggable : true }); var flowerLayer = new Kinetic.Layer(); var lineLayer = new Kinetic.Layer(); var flower = new Kinetic.Group({ x : stage.getWidth() / 2, y : stage.getHeight() / 2 }); // build stem var stem = new Kinetic.Line({ strokeWidth : 10, stroke : "green", points : [{ x : flower.getX(), y : flower.getY() }, { x : stage.getWidth() / 2, y : stage.getHeight() + 10 }] }); // build center var center = new Kinetic.Circle({ x : 0, y : 0, radius : 20, fill : "yellow", stroke : "black", strokeWidth : 4 }); center.on("mousedown", function() { document.body.style.cursor = "pointer"; }); center.on("mouseover", function() { flower.setDraggable(true); this.setFill("orange"); flowerLayer.draw(); }); center.on("mouseout", function() { flower.setDraggable(false); this.setFill("yellow"); flowerLayer.draw(); }); // build petals var numPetals = 10; for (var n = 0; n < numPetals; n++) { // induce scope ( function() { /* * draw custom shape because KineticJS * currently does not support tear drop * geometries */ var petal = new Kinetic.Shape({ drawFunc : function() { var context = this.getContext(); context.globalAlpha = 0.8; context.beginPath(); context.moveTo(-5, -20); context.bezierCurveTo(-40, -90, 40, -90, 5, -20); context.closePath(); this.fill(); this.stroke(); }, fill : "#00dddd", strokeWidth : 4, draggable : true, rotation : 2 * Math.PI * n / numPetals }); petal.on("dragstart", function() { this.moveToTop(); center.moveToTop(); }); petal.on("mouseover", function() { this.setFill("blue"); flowerLayer.draw(); }); petal.on("mouseout", function() { this.setFill("#00dddd"); flowerLayer.draw(); }); flower.add(petal); }()); } stage.on("mouseup", function() { document.body.style.cursor = "default"; }); flower.on("dragmove", function() { stem.attrs.points[0] = this.getPosition(); lineLayer.draw(); }); lineLayer.add(stem); flower.add(center); flowerLayer.add(flower); stage.add(lineLayer); stage.add(flowerLayer); }
var demo2 = function() { function writeMessage(messageLayer, message) { var context = messageLayer.getContext(); messageLayer.clear(); context.font = "18pt Calibri"; context.fillStyle = "black"; context.fillText(message, 10, 25); } // var stage = new Kinetic.Stage({ container : "container2", width : $(document).width() - 20, height : $(document).height() - 100, draggable : true }); // var boxLayer = new Kinetic.Layer(); var messageLayer = new Kinetic.Layer(); var rectX = stage.getWidth() / 2 - 50; var rectY = stage.getHeight() / 2 - 25; var box = new Kinetic.Rect({ x : rectX, y : rectY, width : 100, height : 50, fill : "#00D2FF", stroke : "black", strokeWidth : 4, draggable : true }); // write out drag and drop events box.on("dragstart", function() { writeMessage(messageLayer, "dragstart"); }); box.on("dragend", function() { writeMessage(messageLayer, "dragend"); }); boxLayer.add(box); stage.add(messageLayer); stage.add(boxLayer); var amplitude = 150; var period = 2000; // in ms var centerX = stage.getWidth() / 2 - 80; stage.onFrame(function(frame) { box.setY(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX); boxLayer.draw(); }); //Start Animation document.getElementById('start').addEventListener('click', function() { stage.start(); }, false); // resume transition document.getElementById('stop').addEventListener('click', function() { stage.stop(); }, false); }