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
1:
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
3 Answers
-
Can't you apply an animation to an existing window to get the curl effect?
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Animation-object
-
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.
-
Sorry for the late comeback, had a little vacation in between hehe
anyway here is the code we use now for the swipe event.
http://pastie.org/1229437
This works, but there is no animation in this one.
the older one was this:
http://pastie.org/1229439
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 hereEDIT:
still working on fixing the window crash, tried doing the removeEventListener like this but still no luck.
http://pastie.org/1230022