Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

animating image opacity upon scrolling up and down

$
0
0

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

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>