Hi, I have displayed a series of images in a coverflow effect.
But, now i want them in an inclined format, so that they have to appear as ray emerging from a point.
Can anyone please give me any suggestions, or any samples regarding my query.
Thanks in advance.
You need to be more specific about what you want to do.
Do you want the images to follow a straight line, or an arc? Do you want them to start out small (point-sized) and grow as you progress from the starting point to the end point? Do you want them evenly spaced or grouped more closely at the origin and wider at the end point?
Are you looking for the images to animate automatically, or do you want the user to be able to slide with his/her finger to make the images animate? What should happen when you get to the end of the list of images? Should it circle back to the beginning again, or stop?
There are a lot of details to think through, and those details will drive your design and implementation.
It seems to me that if you already implemented a cover flow effect, you should be able to adapt the animation code you wrote to give you a ray effect. There are a number of similarities.
Check out this password generator app that shows various techniques including using a data container singleton object to share data between objects in your project.
Check out this password generator app that shows various techniques including using a data container singleton object to share data between objects in your project.
Check out this password generator app that shows various techniques including using a data container singleton object to share data between objects in your project.
Here's a quick-and-dirty way to get that look, off the top of my head.
Create an image in Photoshop that's the full size of the screen, with the background you want and the "ray" as transparent pixels. Save that as a PNG with alpha. Let's call this the "ray mask", because it will mask everything but the ray of images.
Add the ray image to your view controller.
Then, in code, create UIImageView objects for each of the images you want in your ray.
Add each image in your ray using the insertSubview:belowSubview: method, and place the images below the ray mask image so they get clipped by the ray mask.
You'll need to write code that changes the transform on your image views so they are smaller at the beginning of the ray and bigger at the end. Look at the function CGAffineTransformMakeScale. You can change the center property of each image to make it move along the ray.
I'd suggest creating a float imagePosition that would be zero when the object is at the beginning of the ray and 1 when it is at the end position. You can use that value directly in your call to CGAffineTransformMakeScale to set the transform of your objects. You'll need to write code that calculates center points based on that value. Something like this:
Code:
CGFloat start_x, start_y, end_x, end_y, delta_x, delta_y;
//First, set the starting and ending points to the correct x/y
//values for the start/end of your ray.
delta_x = end_x - start_x;
delta_y = end_y - start_y;
CGPoint imageCenter;
image_center.x = start_x + delta_x * imagePosition;
image_center.y = start_y + delta_y * imagePosition;
an_image.center = image_center;
CGAffineTransform image_transform = CGAffineTransformMakeScale(imagePosition, imagePosition);
an_image.transform = image_transform;
Obviously, the above not fully fleshed out. You'll need to manage a whole array of images rather than just one, and write logic that figures out how many images to place on the ray at once, and how to space them out along the ray. The code I posted should at least get your started.
Check out this password generator app that shows various techniques including using a data container singleton object to share data between objects in your project.
Here's a quick-and-dirty way to get that look, off the top of my head.
Create an image in Photoshop that's the full size of the screen, with the background you want and the "ray" as transparent pixels. Save that as a PNG with alpha. Let's call this the "ray mask", because it will mask everything but the ray of images.
Add the ray image to your view controller.
Then, in code, create UIImageView objects for each of the images you want in your ray.
Add each image in your ray using the insertSubview:belowSubview: method, and place the images below the ray mask image so they get clipped by the ray mask.
You'll need to write code that changes the transform on your image views so they are smaller at the beginning of the ray and bigger at the end. Look at the function CGAffineTransformMakeScale. You can change the center property of each image to make it move along the ray.
I'd suggest creating a float imagePosition that would be zero when the object is at the beginning of the ray and 1 when it is at the end position. You can use that value directly in your call to CGAffineTransformMakeScale to set the transform of your objects. You'll need to write code that calculates center points based on that value. Something like this:
Code:
CGFloat start_x, start_y, end_x, end_y, delta_x, delta_y;
//First, set the starting and ending points to the correct x/y
//values for the start/end of your ray.
delta_x = end_x - start_x;
delta_y = end_y - start_y;
CGPoint imageCenter;
image_center.x = start_x + delta_x * imagePosition;
image_center.y = start_y + delta_y * imagePosition;
an_image.center = image_center;
CGAffineTransform image_transform = CGAffineTransformMakeScale(imagePosition, imagePosition);
an_image.transform = image_transform;
Obviously, the above not fully fleshed out. You'll need to manage a whole array of images rather than just one, and write logic that figures out how many images to place on the ray at once, and how to space them out along the ray. The code I posted should at least get your started.
Thank you, Duncan,
I will try in the way you said.
Can you tell me how to display image in parallelogram shape?
Last edited by sripriya_222; 11-09-2010 at 02:19 AM.
How to incline UIImageView in Iphone
Linear Mode
