I hardly know how to explain my case other than to point to the excellent Absolute vodka app, Drink Spiration.
I am trying to make a carousel like image browsing with a little spice. I would really like to find a simple core animation explanation on how to accomplish something like the above app.
I hope someone can help with this. The solution doesn't have to be exactly the same, but just explain what is happening and it would be best if it was simple and no opengl. Just something to point me in the right direction. I don't think using just a scrollview with uiimageviews is enough.
I wrote something similar and its quite easy once you figure it out in your mind. All done justing using regular old views and animating transforms on them.
Say its 3 images on screen, and you can rotate new ones on and off ... then you will need 5 views set up (most simply just a UIImageView with a relevant image set). They are the currently selected image, the two either side of it and the ones that are, or will be animating on or off when the user flicks left or right.
Each of these 5 images has a position, an angle and an image. When the user flicks left or right each gets animated to the next position and angle, views that are about to come onscreen have their image updated to the next image in the set. If the user keeps on flicking in the same direction you simply reposition views on one side as they come off the other.
With this setup you can do lots of cool carousel like things very simply.
Related
I'm having some issues with the constraints in my app. Here is how it looks on the iPhone 4 (that's how i want it to look, and how i usually setup my interface, is this the proper approach or not?)
Now, when i switch to the iPhone 5 screen it looks like this
and as you can see, the blue dots (which is UIButtons) are not placed where i want them to be. I made my constraints rely solely on the right side of the view (since that is the one re-sizing, i found that in order for you'r views to align themselves accordingly, it doesn't help to align them to the left side). I don't really know how to fix this. I am finding this new iPhone screen to be a real pain in the arse. Any good advice on how to work with this new screen without a lot of headache would be appreciated :)
Thanks on advance
It looks to me like the are still the same distance from the right side of your view, as you said you set them to be, while the background has stretched to fit the new size. I suspect it's actually the background that isn't doing what you want it to do (keep the same aspect ratio and show more stuff on the left), or try keeping the buttons relating to left and right to stay aligned with the stretched background image.
I have a UITableView within a UIView that has a PNG of a rubber rope attached to the top of the tableview. It stays on top though when the table slides down, it's not a part of the table, just a part of the view.
Desired behavior:
when the user pulls the tableview down, I'd like somehow for this rope to extend realistically like a rubber band
when they let go of the table, the table cells extend back up with the same speed as the attached rubber band.
This is not for scrolling through the table view, but when you only have say 2 or 3 cells and you pull it down, and it extends a rope, and when you let go, it goes back up.
It's the same behavior as a default table view, but now there's just a rope attached to the top.
I'm not looking for any specific answers since I know that can be difficult, but if you have any idea what direction I should be heading in to accomplish this, please share.
I came up with two different ideas:
Using Images as transitions and stretching
My first idea is to create a bunch of images for each transition. Of course, not the entire animation, just 5 different states for the rubberband, something like this:
Each transition is then fit to the next one by stretching the image, and then swap to the next state until the last one is reached. This wouldn't look entirely realistic, but convincing enough, and enough to capture the attention of the user.
Using CGPathAddEllipseInRect
On the other hand, if stretching & swapping images doesn't work, you could draw an oval using CALayer methods, something like a CGPathAddEllipseInRect (sample code here), and drawing a close loop. This is more handy as it draws the entire transition.
Hi all,
The images above are taken from the "Nike Boom" App. I am wondering how to do a magnified effect on the number list as shown in the images. I also want to point out that it is very very smooth animation, so screen capturing certain part of a screen and projected it back on UIView may not work (I tried that)
Thankz in advance,
Pondd
Update:
Hey,
Just so for anyone who might comes across this topic, I've made a simple sample based on Nielsbot's suggestion and posted up on github here
Please feel free to fork it, improve it and pass it on :)
Best,
Pondd
It's done with 2 scroll views, one in front of the other. One scroll view (A) contains the small numbers. The second scroll view (B) contains the zoomed numbers. The frame of (B) is the transparent window. When you scroll (A), you scroll (B) programmatically, but you move it farther than (A). (I.e. if (A) scrolls 10 pixels, you might scroll (B) 20 pixels.)
Make sense?
If you've ever used Convert.app from TapTapTap they use a similar effect.
I've been looking at integrating the OpenFlow API developed by Alex Fajkowski: http://fajkowski.com/blog/2009/08/02/openflow-a-coverflow-api-replacement-for-the-iphone/ into an app I am working on.
Does anyone know how I can stack the images vertically so that I can scroll the images from top to bottom/bottom to top like a rolodex?
The default behaviour is for OpenFlow to stack the images horizontally and scroll the images from right to left/left to right just like CoverFlow. I've been trying to get my head around how 3D animation is done in Objective-C without much success...
Thank you for your help in advance.
The really easy thing to do is to rotate the whole view with something like this:
openFlowView.transform = (CGAffineTransform){0,1,-1,0,0,0};
You'll then have to un-rotate all the flowing views (or rotate the images, or whatever).
The better way is to fix OpenFlow, but without looking at its source code, it's not obvious what to change (mostly you should just need to swap "x" and "y").
i am quit new at iphone development and trying to make a photo collage software while learning it. Right now i have a lil problem and hope you can help me out.
I have an UiviewController with a view in it, in this view i have 7 scrollviews with uiimagevies in them for zooming and scollign images within these scrollviews.
All that works well but now i want to make these 7 scrollviews dragable and maybe if possible zoomable (so that the image within the given scroolview zoom together with the scrollview).
It should be possible to drag them all around the screen and if possible even overlap them
and by the way rotating would be great ;-) hope that is not to much asked for.
Would be great if someone can help me out with this..
Well you've got to decide on some other choice here because the functionality you are asking for overlaps, and you can't ask the app to magically know which the user wants to do. What I mean by this is that when you touch and drag within a scroll view, it's going to try to scroll itself, rather than drag the entire scroll view around.
As for rotation and zooming - that gets more complicated, because you start dealing with vector math and the like. You can check out my question on rotation here. The link I gave you has the code to get both rotation and zooming to work.