[Android] Animating the scrollTo method

You must Login before you can answer or comment on any questions.

Android is a nice platform to develop, I'm sure that many of you use it mainly to make awesome apps (apps that I've seen in the Appcelerator Marketplace or in the Android Market) and sometimes we want a more personal effect.

I've been looking for how to animate a scrollview in android (in iOS runs fine, so...) but only I got answers for making it myself, so I did it and I want to share it with you for all those who wants it :)

function scrollAnimation(time, scroll, origin, destiny)
{
//Time is... well... I don't really know why I named it like that :P
//Scroll is the scrollView
//Origin is the origin X coordinate of our scrollView
//Destiny is the desired X coordinate of out scrollView
    if(origin > destiny)
    {
        var frequency = (origin - destino) / time;
 
        for(var i = origin; i > destiny; i-=frequency)
        {
            scroll.scrollTo(i, 0);
        }
    }
    else
    {
        var frequency = (destiny - origin) / time;
 
        for(var i = origin; i > destiny; i+=frequency)
        {
            scroll.scrollTo(i, 0);
        }
    }
}
So when you want to scroll, you just have to do it like this:
scrollAnimation(10, myScollView, 0, 320);
How to determinate the origin? It's a good question because when you have a scroll you can screw around with it. The event scroll, after its execution can give you the new X coordinate, the touchstart/move/end is useless here because the X coordinate that gives to you is relative to the view/window that contains the scroll and will be between 0 and the parent view's width instead between 0 and the scrollview contentWidth.
var myOrigin = 0; //You can initialize it to 0
 
scroll.addEventListener('scroll', function(e){
  myOrigin = e.x;
  Ti.API.info('My new origin: '+myOrigin);
});
 
label[3].addEventListener('click', function(e){
  scrollAnimation(10, scroll, myOrigin, e.source.getLeft());
});
Hope this may help someone to make even more awesome applications.

Code strong :)

— asked 1 year ago by Juan Manuel Pedraza
1 Comment
  • Darn, please change the first 'destino' to 'destiny', didn't see that when posted the code! After that, the animation will work :)

    — commented 1 year ago by Juan Manuel Pedraza

Your Answer

Think you can help? Login to answer this question!