Challenge: More Animation (opacity)


#1

Here is one of the two challenges at the end of this chapter. It’s pretty simple, really. It looks just like the code implemented for the bounce effect, except that you can just work with floats instead of working with matrices.

[code] // Animate the layer
[[timeLabel layer] addAnimation:bounce
forKey:@“bounceAnimation”];

// CHALLENGE
CAKeyframeAnimation *fader = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];

// Create our floats
float forwardOpacity = 0.9;
float backOpacity = 0.2;
float forwardOpacity2 = 0.7;
float backOpacity2 = 0.4;

[fader setValues:[NSArray arrayWithObjects:
                  [NSNumber numberWithFloat:1.0],
                  [NSNumber numberWithFloat:forwardOpacity], 
                  [NSNumber numberWithFloat:backOpacity],
                  [NSNumber numberWithFloat:forwardOpacity2], 
                  [NSNumber numberWithFloat:backOpacity2], 
                  [NSNumber numberWithFloat:1.0],
                  nil]];

// Set the duration
[fader setDuration:0.6];

// Animate the layer
[[timeLabel layer] addAnimation:fader 
                         forKey:@"faderAnimation"];[/code]

So the two forward opacities and the two backward opacities should be approximately in line with the bounce effects. Also, obviously, we want it to start and stop at a fully visible state (opacity = 1.0), and we want the duration to be the same as the bounce effect. Voila.


#2

Its interesting how many ways you can skin this challenge as the CAAnimation class and its subclasses have a great deal of flexibility. You can add several animations to a layer or you can simply bundle them as a CAAnimationGroup and add that to the layer. I can imagine some wild animations happening…hope there is a guide for “effective” use of animations… :laughing:

So you could do it with a CABasicAnimation and a CAAnimationGroup, which appears to work:


    CABasicAnimation *fadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"];
    [fadeIn setDuration:0.6];
    [fadeIn setFromValue:[NSNumber numberWithFloat:0.0]];
    [fadeIn setToValue:[NSNumber numberWithFloat:1.0]];
    
    CABasicAnimation *fadeOut = [CABasicAnimation animationWithKeyPath:@"opacity"];
    [fadeOut setDuration:0.6];
    [fadeOut setFromValue:[NSNumber numberWithFloat:1.0]];
    [fadeOut setToValue:[NSNumber numberWithFloat:0.0]];
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    [group setAnimations:[NSArray arrayWithObjects:fadeOut, bounce, fadeIn, nil]];
    
    [[timeLabel layer] addAnimation:group forKey:@"bounceAnimation"];
  

Or…you could do with with a CAKeyframeAnimation and a CAAnimationGroup:


    CAKeyframeAnimation *fader = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    
    float fadeOut = 0.1;
    float fadeOut2 = 0.3;
    float fadeIn = 0.9;
    float fadeIn2 = 0.7;
    
    [fader setValues:[NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:1.0],
                      [NSNumber numberWithFloat:fadeIn],
                      [NSNumber numberWithFloat:fadeOut],
                      [NSNumber numberWithFloat:fadeIn2],
                      [NSNumber numberWithFloat], 
                      [NSNumber numberWithFloat:1.0],
                      nil]];
       
    [fader setDuration:0.6];
        
    CAAnimationGroup *group = [CAAnimationGroup animation];
    [group setAnimations:[NSArray arrayWithObjects:fader, bounce, nil]];
    
    [[timeLabel layer] addAnimation:group forKey:@"bounceAnimation"];