insightsCircleAnimation.js

/**
 * Hyperloop Module
 * Copyright (c) 2015 by Appcelerator, Inc. and subject to the
 * Appcelerator Platform Subscription agreement.
 */

var Hyperloop = require('hyperloop');
var UIView = require('UIView');
var CGRect = require('CGRect');
var CGPoint = require('CGPoint');
var UIColor = require('UIColor');
var UIBezierPath = require('UIBezierPath');
var CAShapeLayer = require('CAShapeLayer');
var CABasicAnimation = require('CABasicAnimation');
var CAMediaTimingFunction = require('CAMediaTimingFunction');

/** Utility Functions **/
function DEGREES_TO_RADIANS(angle) { return (Number(angle) / 180.0 * Math.PI) };
function RGB_TO_HEX(r, g, b) {
		function componentToHex(c) {	var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex;}
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

/** App Window **/
function Window(_navigationController) {

	var win, labelView, shapes=[];
	var pathData = [
		{radius: 100, startAngle:270, endAngle: 89, lineWidth: 50, duration: 0.15, title: 'iOS', value:'300', lblTop: 320, lblLeft: 320},
		{radius: 100, startAngle:90, endAngle: 180, lineWidth: 30, duration: 0.15, title: 'Android', value:'100', lblTop: 400, lblLeft: 50},
		{radius: 100, startAngle:181, endAngle: 269, lineWidth: 10,duration: 0.15, title: 'Windows', value:'50', lblTop: 190, lblLeft: 30}
	];

	var colors = [
		{red:0.74, green:0.05, blue:0, alpha:1},
		{red:0.99, green:0.62, blue:0.14, alpha:1},
		{red:0.02, green:0.48, blue:1, alpha:1}
	];

	function startAnimation(view){

		var color = Math.floor(Math.random()*(colors.length));
		Ti.API.info(color);

		for(var i=0;i<pathData.length; i++){
			animateSection(view, pathData[i].radius, pathData[i].startAngle, pathData[i].endAngle, pathData[i].lineWidth, pathData[i].duration, colors[color]);
			animateLabel(pathData[i].title, pathData[i].value, pathData[i].lblTop, pathData[i].lblLeft, colors[color]);
		}

		animateRing();
	}

	function animateSection(view, radius, startAngle, endAngle, lineWidth, duration, color) {

		var rect = view.frame;
		var centerPoint = CGPoint.Make(rect.width / 2, rect.height / 2);

		var path = UIBezierPath.bezierPath();
		path.addArcWithCenterRadiusStartAngleEndAngleClockwise(centerPoint, radius, DEGREES_TO_RADIANS(startAngle), DEGREES_TO_RADIANS(endAngle), true);

		var shapeLayer = CAShapeLayer.layer();
		shapeLayer.path = path.getCGPath();
		shapeLayer.strokeColor = UIColor.colorWithRedGreenBlueAlpha(color.red, color.green, color.blue, color.alpha).getCGColor();
		shapeLayer.fillColor = UIColor.clearColor().getCGColor();
		shapeLayer.lineWidth = lineWidth;
		shapeLayer.setStrokeStart = 0.0;
		shapeLayer.setStrokeEnd = 1.0;
		view.layer.addSublayer(shapeLayer);

		var pathAnimation = CABasicAnimation.animationWithKeyPath('strokeEnd');
		pathAnimation.duration = duration;
		pathAnimation.fromValue = 0.0;
		pathAnimation.toValue = 1.0;

		shapeLayer.addAnimationForKey(pathAnimation, 'strokeEnd');
		shapes.push(shapeLayer);
	}

	function animateRing(){

		var growAndFade = Ti.UI.createAnimation({
			transform: Ti.UI.create2DMatrix().scale(1.5),
			opacity: 0.0,
			duration: 500
		});


		var ring = Ti.UI.createView({
			backgroundColor: 'transparent',
			borderColor: '#6c6c6c',
			borderWidth: 1,
			borderRadius: 40,
			width: 80,
			height: 80
		});
		win.add(ring);
		ring.animate(growAndFade);

	};

	function animateLabel(title, value, top, left, color){

		 var view = Ti.UI.createView({
			 width: Ti.UI.SIZE,
			 height: Ti.UI.SIZE,
			 layout: 'vertical',
			 opacity: 0.0
		 });
		 labelView.add(view);

		 var titleLbl = Ti.UI.createLabel({
			 text: title,
			 color: RGB_TO_HEX(Math.floor(color.red*255), Math.floor(color.green*255), Math.floor(color.blue*255)),
			 font:{
				 fontSize: 16,
				 fontFamily:"Helvetica"
			 },
			 right: 0
		 });

	 	 var valueLbl = Ti.UI.createLabel({
	 		 text: value,
	 		 color: "#FFF",
	 		 font:{
	 			 fontSize: 20,
	 			 fontFamily:"Helvetica"
	 		 },
			 top:2,
			 right: 0
	 	 });

		 view.add(titleLbl);
		 view.add(valueLbl)

		 var animation = Ti.UI.createAnimation({
			 left: left,
			 top: top,
			 opacity: 1.0,
			 duration: 250
		 });

		 win.add(view);
		 view.animate(animation);
	}

	function clearView(){
		if(shapes.length){
			shapes.forEach(function(layer){
				layer && layer.removeFromSuperlayer();
			});
			shapes=[];
		}

		if(labelView && labelView.children){
			labelView.children.forEach(function(view){
				labelView.remove(view);
				view = null;
			})
		}
	}

	win = Ti.UI.createWindow({
		backgroundColor: '#333'
	});

	var view = UIView.init();
	view.backgroundColor = UIColor.clearColor();
	view.native.applyProperties({
		width: 300,
		height: 300
	});
	win.add(view.native);

	var lbl = Ti.UI.createLabel({
		color: '#ececec',
		text: 'click the circle to start animation',
		bottom: 50
	});
	win.add(lbl);

	labelView = Ti.UI.createView();
	win.add(labelView);

	var btn = Ti.UI.createLabel({
		font:{
			fontSize: 35,
			fontWeight: 'bold'
		},
		height: 80,
		width: 80,
		borderRadius: 40,
		backgroundColor: '#555'
	});
	win.add(btn);

	btn.addEventListener('click', function(e){
		clearView();
		startAnimation(view);
	});

	return win;
}





module.exports = Window;