My reference specs: MAVERICKS, TI 3.2.3 GA, Android SDK 4.4.2 and later.
I need to create a simple way to let user scroll up and down several text (labels) and upon scrolling up and down a certain image will zoom out and appear (clickable). I did the following code which is combination of scrollView + animate opacity. Here is my code. Problem is that the appearing of the image isn't smooth. I used the y axis of the scrollView as a trigger to animate opacity. Please help for a better way to do such simple animation. Thanks.
The code does not include yet the clickable part of image, just the opacity upon scrolling.
var win=Ti.UI.currentWindow; var scroll = Ti.UI.createScrollView({ contentHeight: 'auto', contentWidth: 'auto', showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false, top:0 }); //LABEL1 var text1=Ti.UI.createLabel({ text:"text1", top:200, backgroundColor:"blue", width: 200, height: 300 }); scroll.add(text1); //LABEL2 var text2=Ti.UI.createLabel({ text:"text2", top:500, backgroundColor:"green", width: 200, height: 300 }); scroll.add(text2); //LABEL3 var text3=Ti.UI.createLabel({ text:"text3", top:1000, backgroundColor:"white", width: 200, height: 300 }); scroll.add(text3); //IMAGE (to appear disappear smoothly when scrollview is within a certain point in the screen) var imageView = Ti.UI.createLabel({ text:"ABC", top:100, backgroundColor:"red", width: 200, height: 300 }); //animating opacity var a = Ti.UI.createAnimation({ opacity:0, duration:4000 }); scroll.addEventListener('scroll', function(e){ var t = Titanium.UI.create2DMatrix(); var y=e.y; if(e.y > 100 && e.y <300 ){ var a = Ti.UI.createAnimation({opacity:1}); imageView.animate(a); }else{ imageView.opacity =0; } //just a guide to show console the y coordinate of scrollview Ti.API.info('Our event tells us the center is ' + e.x + ', ' + e.y ); }); win.add(scroll); win.add(imageView);