Skalieren Artikel mit iCarousel

Question

ich versuche iCarousel für eine meine Lösungen zu verwenden, ich brauche so etwas wie das Bild zu erreichen unter

sollte es genau so, wie

iCarouselOptionFadeMiniCarouselOptionFadeMaxiCarouselOptionFadeRangeiCarouselOptionFadeMinAlpha Arbeiten mit

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value 

Ich habe versucht, eine Funktion genau wie

zu erstellen

- (CGFloat)alphaForItemWithOffset:(CGFloat)offset 

Ich entdeckte, dass es unter Verwendung offset Werte getan werden kann, aber Sachen arbeiten mich nicht, kann irgendjemand mir helfen, dieses zu erreichen?

Danke.

Answer 1

Sie können dies über die iCarousel tun ‚s iCarouselTypeCustom Typ in der Delegatmethode

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform 

einfach die Art des Karussells festgelegt (zB in viewDidLoad des View-Controllers Karussell):

self.carousel.type = iCarouselTypeCustom; 

Und berechnen Sie die Transformation, wie Sie möchten. Ich habe die Objekte auf eine Hyperbel gelegt und sie zusätzlich etwas verkleinert, während sie sich vom Zentrum entfernen. Das ist ganz dein Bild ähnelt, denke ich:

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform 
{ 
    const CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.0f]*carousel.itemWidth; 

    //The larger these values, as the items move away from the center ... 

    //... the faster they move to the back 
    const CGFloat zFactor = 150.0f; 

    //... the faster they move to the bottom of the screen 
    const CGFloat normalFactor = 50.0f; 

    //... the faster they shrink 
    const CGFloat shrinkFactor = 3.0f; 

    //hyperbola 
    CGFloat f = sqrtf(offset*offset+1)-1; 

    transform = CATransform3DTranslate(transform, offset*offsetFactor, f*normalFactor, f*(-zFactor)); 
    transform = CATransform3DScale(transform, 1/(f/shrinkFactor+1.0f), 1/(f/shrinkFactor+1.0f), 1.0); 
    return transform; 
} 

und das Ergebnis:

Sie den Schwimmer Konstanten nach Ihren Wünschen anpassen können.

Für Gegenstände, um einen Kreis zu bewegen, während sie nur goniometrisches Funktionen für die Übersetzung verwenden Skalierung, dann drehen und skalieren:

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value 
{ 
    if (option == iCarouselOptionSpacing) 
    { 
     return value * 2.0f; 
    } 
    if(option == iCarouselOptionVisibleItems) 
    { 
     return 11; 
    } 
    if(option == iCarouselOptionWrap) return YES; 
    return value; 
} 

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform 
{ 
    const CGFloat radius = [self carousel:carousel valueForOption:iCarouselOptionRadius withDefault:200.0]; 
    const CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.0f]*carousel.itemWidth; 
    const CGFloat angle = offset*offsetFactor/radius; 

    //... the faster they shrink 
    const CGFloat shrinkFactor = 2.0f; 
    //hyperbola (now only for shrinking purposes) 
    CGFloat f = sqrtf(offset*offset+1)-1; 


    transform = CATransform3DTranslate(transform, radius*sinf(angle), radius*(1-cosf(angle)), 0.0); 
    transform = CATransform3DRotate(transform, angle, 0, 0, 1); 
    transform = CATransform3DScale(transform, 1/(f*shrinkFactor+1.0f), 1/(f*shrinkFactor+1.0f), 1.0); 
    return transform; 
} 

wieder das Ergebnis:

Sie den Abstand einstellen und der Radius in der Methode.

Viel Spaß! :)

Answer 2

Ich habe nicht genug Ruf zu kommentieren, so muss ich als Antwort eine weitere Frage stellen :(

@burax ist es möglich, Layout-Elemente auf lineare Linie anstelle einer Hyperbel, aber die Größenänderung halten ?

Grüße, und sorry für

bearbeiten wie diese stellen: mit zufälligen Versuche ich mit diesem erreicht:

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform 
{ 
const CGFloat radius = [self carousel:carousel valueForOption:iCarouselOptionRadius withDefault:5050.0]; 
const CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:0.8f]*carousel.itemWidth; 
const CGFloat angle = offset*offsetFactor/radius; 

//... the faster they shrink 
const CGFloat shrinkFactor = 2.0f; 
//hyperbola (now only for shrinking purposes) 
CGFloat f = sqrtf(offset*offset+1)-1; 


transform = CATransform3DTranslate(transform, radius*sinf(angle), radius*(1-cosf(angle)), 0.0); 
transform = CATransform3DRotate(transform, angle, 0, 0, 1); 
transform = CATransform3DScale(transform, 1/(f*shrinkFactor+1.0f), 1/(f*shrinkFactor+1.0f), 1.0); 
return transform; 
} 

gibt es wahrscheinlich einen besseren Weg, aber ich bin neu in Transformationen :)

Answer 3

Ein wenig modifiziert und in SWIFT zu kopieren Paste;) - funktioniert perfekt für mich

func carousel(carousel: iCarousel, valueForOption option: iCarouselOption, withDefault value: CGFloat) -> CGFloat { 
    if option == iCarouselOption.Spacing { 
     return value * 1.8 
    } 
    return value 
} 

func carousel(carousel: iCarousel, itemTransformForOffset offset: CGFloat, baseTransform transform: CATransform3D) -> CATransform3D { 
    let offsetFactor = self.carousel(carousel, valueForOption: iCarouselOption.Spacing, withDefault: 1) * carousel.itemWidth 

    let zFactor: CGFloat = 150 
    let normalFactor: CGFloat = 0 
    let shrinkFactor: CGFloat = 1 
    let f = sqrt(offset*offset+1)-1 

    var transform = CATransform3DTranslate(transform, offset*offsetFactor, f*normalFactor, f*(-zFactor)); 
    transform = CATransform3DScale(transform, 1/(f/shrinkFactor+1), 1/(f/shrinkFactor+1), 1); 
    return transform; 
}