shadow effect

/*//1. borderColor and borderWidth with borderRadius
var testWin = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var button1 = Ti.UI.createButton({
	top: 100,
	title: 'Change Border radius 20, 30'
});

var button2 = Ti.UI.createButton({
	top: 180,
	title: 'Change Border width 15'
});

const circleImage = Ti.UI.createImageView({
    height:100,
	width:100,
    borderRadius:"50",
    borderColor:'red',
    borderWidth:5,
    image:'https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.tonytextures.com%2Ffree-texture-gallery%2Fsky%2FSky_Clouds_Photo_Texture_A_P1119218.JPG&data=02%7C01%7Cssekhri%40axway.com%7C5c133935b09941e2db0208d8503ff991%7C300f59df78e6436f9b27b64973e34f7d%7C1%7C0%7C637347582993207970&sdata=NDQmctWuZ56B%2FWaoKFk%2BgwK42OdN%2BAwTp9KpfDtDlCI%3D&reserved=0',
    top:280
})

button1.addEventListener('click', function(){
	circleImage.borderRadius = "20, 30";
});

button2.addEventListener('click', function(){
	circleImage.borderWidth = "15";	
});

testWin.add(button1);
testWin.add(button2);
testWin.add(circleImage);
testWin.open();
*/
/*
//2. borderColor and borderWidth with borderRadius and shadow
var testWin = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var button1 = Ti.UI.createButton({
	top: 100,
	title: 'Change Border radius 20, 30'
});

var button2 = Ti.UI.createButton({
	top: 180,
	title: 'Change Border width 15'
});

const circleImage = Ti.UI.createView({
    height:100,
	width:100,
	backgroundColor: 'gray',
    borderRadius:"50",
    borderColor:'red',
    borderWidth:5,
    viewShadowColor: 'red',
	viewShadowRadius:20,
	viewShadowOffset:{x: 10, y: 20},
    top:280
})

button1.addEventListener('click', function(){
	circleImage.borderRadius = "20, 30";
});

button2.addEventListener('click', function(){
	circleImage.borderWidth = "15";	
});

testWin.add(button1);
testWin.add(button2);
testWin.add(circleImage);
testWin.open();
*/
/*
//3 . Shadow on view
var win=Ti.UI.createWindow({
	backgroundColor:'#fff'
});
var view = Ti.UI.createView({
	width:100,
	height:100,
	backgroundColor:'gray',
	viewShadowColor: 'red',
	viewShadowRadius:20,
	viewShadowOffset:{x: 10, y: 20},
    borderRadius:"10 10 10 10" 
});
win.add(view);

var button = Ti.UI.createButton({
	top: 80,
	title: 'Change Shadow'
});
button.addEventListener('click', function(){
  view.backgroundColor = 'yellow';
  view.viewShadowColor = 'green';
  view.viewShadowOffset = {x: -10, y: -20};
  view.viewShadowRadius = 20;
  view.borderRadius = "50";
});
win.add(button);
win.open();
*/

/*
// 4. borderRadius , shadow, backgroundImage, backgroundGradient
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff',
    layout: 'vertical'
});

var radialGradient = Ti.UI.createView({
    top: 80,
    width: 100,
    height: 100,
    borderRadius: "20", //"10, 10, 10, 10", //
    viewShadowColor: 'red',//'#d000',
	viewShadowRadius:20,
	viewShadowOffset:{x: 10, y: 20},
    backgroundImage: 'borderRadius30.png',
    // backgroundGradient: {
    //     type: 'radial',
    //     startPoint: { x: 50, y: 50 },
    //     endPoint: { x: 50, y: 50 },
    //     colors: [ 'red', 'blue'],
    //     startRadius: 50,
    //     endRadius: 0,
    //     backfillStart: true
    // }
});
var linearGradient = Ti.UI.createView({
    top: 50,
    width: 100,
    height: 100,
    borderRadius: "20, 30, 50, 50", //"20", //
//    backgroundImage: 'borderRadius30.png',
    viewShadowColor: 'red',//'#d000',
	viewShadowRadius:20,
	viewShadowOffset:{x: 10, y: 20},
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '50%' },
        endPoint: { x: '100%', y: '50%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ],
    }
});
win1.add(radialGradient);
win1.add(linearGradient);
win1.open();
*/
/*
// 5 Animation on view with shadow (with multiple value of borderRadius shadow will not animate)
var win = Ti.UI.createWindow({
	backgroundColor:'#fff'
});
var box = Ti.UI.createView({
  backgroundColor : 'red',
  height : '100',
  width : '100',
  borderRadius: "40, 20, 10, 10", //"20", //
  viewShadowColor: '#d000',
  viewShadowRadius:20,
  viewShadowOffset:{x: 10, y: 20},
});
win.add(box);

box.addEventListener('click', function() {
  var matrix = Ti.UI.createMatrix2D();
  matrix = matrix.rotate(180);
  matrix = matrix.scale(2, 2);
  var a = Ti.UI.createAnimation({
    transform : matrix,
    duration : 2000,
    autoreverse : true,
    repeat : 3
  });
  box.animate(a);
});

win.add(box);
win.open();
*/

/*
// 6. Set different value of border radius
var _window = Ti.UI.createWindow({
	backgroundColor : 'blue'
}); 
        
var view = Ti.UI.createView({
	left : 100,
	height : 100,
	width : 100,
	top : 100,
	backgroundColor : 'white',
	borderWidth : 20,
	borderColor : 'red',
	borderRadius : 10
}); 
     
var b3 = Ti.UI.createButton({
	top : 250,
	title : "borderRadius=30/20"
});
b3.addEventListener("click", function() {
	view.borderRadius = ['30', '20', '30', '20'];
});
 
var b4 = Ti.UI.createButton({
	top : 300,
	title : "borderRadius=30 All"
});
b4.addEventListener("click", function() {
	view.borderRadius = 30;
});
 
var b5 = Ti.UI.createButton({
	top : 350,
	title : "borderRadius=0"
});
b5.addEventListener("click", function() {
	view.borderRadius = 0;
});
 
_window.add(view);
_window.add(b3);
_window.add(b4);
_window.add(b5);
 
_window.open();
*/