Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Curl Up animation and image manipulation

Hey people.

Yes I've been asking a lot of questions but hell I hope we can figure this out with each other, and I'll also share the final working code so… GROUP EFFORT!!!

Anyway…2 questions


I have a window called "w".
w has a backgroundImage.
w also has a add eventlistener called "swipe"
the eventListener checks if you swipe left. it will change the background image to the image specified in a array.
if swipe is right it will change the background image back in the array.

Now i want to have the CURL_UP and CURL_DOWN animation on every image swap.
But I never close w and reopen it.

Is there a way to show these transitions without closing the window and open a new window.
or is there a way to close the window, while it reopens the window.
anything to get the animation working.

question number 2:

How do we get a normal image manipulation with pinch scale / rotate /drag
functionality (if you need an example: http://www.youtube.com/watch?v=bEU0EmiZcAk (watch at 1.43 he rotates the rocket with 2 "fingers"))

I've looking for this for a while now, tried numerous jquery libraries/plugins/expensions, none of them seem to work correctly.

So please people let's get this working, if we have somebody that can make this in a module that would really be awesome or if someone know how to code it in obj-c let collab to make it a module..

I can make the modules but I'm clueless in obj-c so that sucks

— asked October 11th 2010 by Patrick van Zadel
  • gesture
  • ipad
  • multi
  • pinch
  • rotate
  • zoom

3 Answers

  • Can't you apply an animation to an existing window to get the curl effect?


    — answered October 11th 2010 by John McKnight
    • Thats what I thought too, tried it but it doesnt seem to be working, or atleast the animation doesnt get fired…

      I'll post the code later, i don't have it here right now

      — commented October 11th 2010 by Patrick van Zadel
    • Please do and I'll take a look at it.

      — commented October 11th 2010 by John McKnight
  • I am going to work on an app soon that will use this too. I'm pretty sure the built in curl effect can only be done on a view transition, not a window (I may be wrong there). So I think you could have window w, with view v1 and a second view, v2. Then just detect the swipe on v1, and transition it via curl to v2. Then if you don't want to create gobs of views for the sake of performance, you could just swap out backgrounds on v1, and v2, and just reuse them creating the effect that you have numerous views instead of just the two views. It might be smoother with 3 views in all. Maybe previous view, current view, and next view. That way they could swipe either direction (forward or back) in the fake stack of views and you'd have the views they need already sitting there. Play with it, maybe it will work. That's how I figured I'd do it conceptually. Hadn't tried it in code yet though. If there's a better way to do this, I'm all ears. Maybe the performance wouldn't be an issue and you could just have a huge array of pre-built views and just page through them. But, based on previous results I've seen, I think you might better off to limit the number of views and just swap out the content.

    — answered October 12th 2010 by Randy Hall
    1 Comment
    • Thats what I had at first.
      For memory we window 1 then when swiped left it closes window 1 and opens window 2 with a CURL_UP, then it goes further and worked, but then whenever you swiped right to close window 2 again and open window 1 with a CURL_DOWN it crashes it always crashes on window 1.

      Maybe it is the best way, but I find that whenever youre code gets rather complex (were at 2200 lines of code now, Titanium crashes really fast and doesn't give any useful debug information.

      I mean like right now our code crashes or just doesnt even start whenever I add a webview to our main Window…it just won't work..
      Thats why I'm hoping we can expand the API's with custom modules.
      As long as we can acces more native api's through a Titanium Mobile ApI

      — commented October 12th 2010 by Patrick van Zadel
  • Sorry for the late comeback, had a little vacation in between hehe

    anyway here is the code we use now for the swipe event.


    This works, but there is no animation in this one.

    the older one was this:


    This one did work for the first flip to page 2, animation worked, but ofcourse no animation to page 3 cause it changes the images in the same view so it doesn't open again.
    plus whenever i swipe back to go back a page this code made it crash.

    I hope there is enough information for you here, I can't post the whole code of this version.
    But whenever I have a working version I'll bundle it in a new project and share it here


    still working on fixing the window crash, tried doing the removeEventListener like this but still no luck.


    — answered October 18th 2010 by Patrick van Zadel
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.