iOS利用仿射变换(CGAffineTransform)制作动画效果

声明：本文是学习iOS-7-Cookbook的例子。

先看看效果图：



   
 该动画的实现分为2部分，红色方框的出现和消失。而每个部分又分两个过程，如红框出现时，它先放大到最大，然后恢复正常大小；消失时先放大到最大，然后消失。在代码中实现的话可以顺着这个逻辑，一步一步走下来。但这样写，显然没什么水平，这里介绍一种很优雅的写法。

原理：

动画中的出现和消失可看做相同的方法，它们都有两个动作，因此会调用两次动画方法。

代码展示：

typedef void (^AnimationBlock)(void);
typedef void (^CompletionBlock)(BOOL finished);

// Additional example - utilizing AnimationHelper
- (void)actionZoom
{
CGFloat midX = CGRectGetMidX(self.view.bounds);
CGFloat midY = CGRectGetMidY(self.view.bounds);
CGAffineTransform transientTransform = CGAffineTransformMakeScale(1.2f, 1.2f);
CGAffineTransform shrinkTransform = CGAffineTransformMakeScale(0.0001f, 0.0001f);

// Init
[self enable:NO];
bounceView.center = CGPointMake(midX, midY);
bounceView.transform = shrinkTransform;

// Go
CompletionBlock allDone = ^(BOOL done){[self enable:YES];};
//动画第二部分，方框消失
CompletionBlock done = ^(BOOL done){sleep(2); [AnimationHelper viewAnimation:bounceView viaTransform:transientTransform toTransform:shrinkTransform completion:allDone]();};
//第一部分，方框出现
AnimationBlock block = [AnimationHelper viewAnimation:bounceView viaTransform:transientTransform toTransform:CGAffineTransformIdentity completion:done];
block();
}

#pragma mark - Transform -

+ (AnimationBlock)viewAnimation:(UIView *)aView viaTransform:(CGAffineTransform)transientTransform toTransform:(CGAffineTransform)finalTransform withDuration:(CGFloat)firstDuration andDuration:(CGFloat)secondDuration completion:(CompletionBlock)finishBlock
{
NSLog(@"DEBUG: %f and %f", firstDuration, secondDuration);
AnimationBlock primaryAnimation = ^(){
aView.transform = transientTransform;
};

AnimationBlock secondaryAnimation = ^(){
aView.transform = finalTransform;
};

CompletionBlock middleCompletion = ^(BOOL finished) {
[UIView animateWithDuration:secondDuration animations:secondaryAnimation completion:finishBlock];
};

AnimationBlock primaryBlock = ^(){
[UIView animateWithDuration:firstDuration animations: primaryAnimation completion:middleCompletion];
};

return primaryBlock;
}

/**
*  实现两次变形动画
*
*  @param aView              主视图
*  @param transientTransform 第一次变换的效果
*  @param finalTransform     第二次变换的效果
*  @param finishBlock        动画结束后执行的操作
*
*  @return 变换执行的入口，第一次变换的block
*/
+ (AnimationBlock)viewAnimation:(UIView *)aView viaTransform:(CGAffineTransform)transientTransform toTransform:(CGAffineTransform)finalTransform completion:(CompletionBlock)finishBlock
{
return [self viewAnimation:aView viaTransform:transientTransform toTransform:finalTransform withDuration:DEFAULT_TIME andDuration:DEFAULT_TIME completion:finishBlock];
}

说明：actionZoom是点击zoom按钮时调用的方法。

这种动画的写法非常优雅，能很好地控制动画效果，应该是非常经典的例子！！

         demo下载