Question

I have come to see that Sencha Touch framework is improving noticeably. Since I couldn’t see something like what I want, I wanted to ask here and see if it’s possible. I would like to hear your opinion on how to do some image change animation when the image is touched. When you touch the image, another image will animate growing from the middle.

Actually I also want to detect (if possible) the location of the touch on the image (Things I could do on iOS).

Is this possible? If so, any advice is appreciated.

Thanks

Answer 1

Panel has some properties to find out location of the touch:

var Xscroll = somePanel.scroller.offset.x;
var Yscroll = somePanel.scroller.offset.y;  

Also, for your animation, you can do something like this:

Have 1 image on your 1st panel (make that image fit to the panel and keep it to background) like this:

JS:

App.somePanel= new Ext.Panel({
    cls: 'somePanel',
    html: '<h1>Welcome to my app!</h1>',
    //some other properties
});

CSS:

.somePanel {
       background-image: url(http://somesite.com/someimage.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
}

Have second panel like that.

On some event on the first panel do:

1. Hide that panel with animation
2. Show the second panel with animation

The list of animations is given in Sencha Touch API