Mirrored view and custom carousel about icarousel

[robderijk]

I can answer your first question, the mirror view isn't created programmatically, it's part of the image itself. For example, you can use https://github.com/nicklockwood/ReflectionView to create the mirror view.

[nicklockwood]

Hi Lexar,

1. The mirror effect in the example is just part of the image I used in the example (don't worry, you're not the first to ask).

I do have another library called ReflectionView that you can use to do the same effect automatically though. Just use it as the base for your carousel item views.

1. It should be pretty easy to implement this. Use the custom transition delegate method, as shown in the example for creating the "slip 3d" transition. Basically the method returns a CATransform3D that specifies how each view should be positioned relative to its offset from the center of the carousel. You can see how the standard transforms are done by looking at the transform code in iCarousel.m.

For the linear carousel, I just multiply the offset by the item width. What you probably want to do is take that and then scale it using CATransformScale with a scale factor proportional to the number of items in the carousel, that way the items will get smaller as the number of items increases.

Have a go at doing it yourself, if you really can't figure it out then I'll try to help some more.

Nick

On 20 Oct 2011, at 18:55, lexar wrote:

Hello,

first of all, amazing work! I was able to use the carousel immediately. Thank you!

I have 2 questions:

1. I studied the example app, but I didn't understand how the mirror view at the bottom is done? My implementation doesn't show one.
2. I would like to have a mixture of a linear and rotary custom carousel: The items should grow and shrink in size as in the rotary mode, but navigation should stop i.e at the first item and should not show the last item behind that, so the items should be lined up from left to right.
   Could I get some hints where to start on this, I admit I am pretty illiterate with quartz.

Again, thank you for this great work.

lx

Reply to this email directly or view it on GitHub:
#50

[lexar]

Thanks, murdoch - aah, it's in the image! Didn't see that at first with the grey Xcode background. Thanks for the pointer to ReflectionView!

[lexar]

Hello Nick,

thank you for your help. I modified iCarousel with a new type "iCarouselTypeLinear2" which I implemented like this in transformForItemView:withOffset:

case iCarouselTypeLinear2:
{
NSInteger count = MIN(numberOfVisibleItems, numberOfItems + (shouldWrap? 0: numberOfPlaceholdersToShow));
CGFloat arc = M_PI * 2.0f;
CGFloat radius = itemWidth / 2.0f / tanf(arc/2.0f/count);
CGFloat angle = offset / count * arc;
CATransform3D newTransform = CATransform3DTranslate(transform, radius * sin(angle), 0.0f, radius * cos(angle) - radius);
return CATransform3DTranslate(newTransform, offset * itemWidth, 10.0f, 10.0f);
}

This gives me the desired result when returning 200 from carouselItemWidth: , but if I decrease that float the animation gets weird. This is of course because I don't really know what I'm doing.
I can live with this solution, but perhaps someone has a better suggestion or could point me to documentation which makes me better understand what CATransform does.

Anyway, thank you both for your help.

[lexar]

Hello all,

my custom carousel solution has come back haunting me. There is a brief twitching/stuttering visible when two imageviews have the same size within the carousel. I am pretty sure my CATransform above is not the best way to do this. Could anyone give me advice how to best achieve the same result?

Thanks, l