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

More News

| 21st Jan 2021

Get the Squeeze on Evon Yao

Our people are what make us special, get The Squeeze on the Isobar team.

| 19th Jan 2021

How Physicians Can Put the Care into Virtual Care

Virtual care is here to stay. And it's an opportunity for providers to provide a better patient experience.

| 14th Jan 2021

CES 2021 Loves Stay-at-Home Customer Experiences

Maybe it’s time to rebrand CES as the Consumer Experience Show. What we’re seeing from the 2021 CES is the emergence of connected consumer experiences powering the stay-at-home economy.