CALayer Animation

Question

I'm a beginner and I trying continue to familiarize myself with CALayer ...

Thanks again @Alexsander Akers, @DHamrick and @Tommy because now I can skew my CALayer !

It look like :

I would like to move my finger on the Gray UIView (with touchesBegan/touchesMoved/touchesEnded) and my "cards" move like this : (For exemple if I move my finger left)

• the yellow card disappear & the green one take is place
• white take the green's place
• red the white
• blue the red one
• and instead of a blue card a Black one appear ...

Maybe I'm dreaming and it's to hard for me, but if if you can give me advice I'll take it !!

thank you !

Answer 1

You may use the customized function like this

- (void)moveAndRotateLayer: (CALayer *)layer withDuration:(double)duration degreeX:(double)degreeX y:(int)degreeY angle:(float)angle autoreverseEnable:(BOOL)ar repeatTime:(int)repeat andTimingFunctionType:(NSString *)type
{
    // You should type the timing function type as "Liner", "EaseIn", "EaseOut" or "EaseInOut".
    // The default option is the liner timing function.
    // About these functions, look in the Apple's reference documents.

    CAAnimationGroup *theGroup = [CAAnimationGroup animation];

    CGPoint movement = CGPointMake(layer.position.x + degreeX, layer.position.y + degreeY);
    NSArray *animations = [NSArray arrayWithObjects:[self moveLayers:layer to:movement duration:duration], [self rotateLayers:layer to:angle duration:duration], nil];

    theGroup.duration = duration;
    theGroup.repeatCount = repeat;
    theGroup.autoreverses = ar;

    if ([type isEqualToString:@"EaseIn"]) 
    {
        theGroup.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
    }
    else if ([type isEqualToString:@"EaseOut"]) 
    {
        theGroup.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];
    }
    else if ([type isEqualToString:@"EaseInOut"]) 
    {
        theGroup.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
    }
    else
    {
        theGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    }

    theGroup.animations = [NSArray arrayWithArray:animations];

    [layer addAnimation:theGroup forKey:@"movingAndRotating"];
}

This is the solution of the animation just for moving and rotating the layer,

but, I know that you can customizing yourself.

It's very good for you. You can make it.

Good luck!