随笔-Animation-动画效果整理

最近项目UI那边要求要加些特效，就找了一下，顺便整理出来。这是code4上面一个小Demo，是用TableView的格式做出来的，效果很简单明了。这里我就不贴全部的代码出来了，只是把封装的方法列举出来。相对来说，够用了！

@interface AnimationViewController ()
{
    CALayer *_layer;
}
@end

-(void)setLayerAnimation:(NSInteger) row{
    switch (row) {
        case 0:
        {
            [CATransaction begin];
            [CATransaction setDisableActions:!enableAnimation.isOn];
            [CATransaction setAnimationDuration:animationDuration.value];
            [_layer setCornerRadius:[_layer cornerRadius]==0?30:0];
            [_layer setBorderWidth:[_layer borderWidth]==0?5:0];
            [_layer setBorderColor:[UIColor redColor].CGColor];
            [CATransaction commit];
        }
            break;
        default:
            break;
    }
}

//基础动画
-(void)setUIViewAnimation:(NSInteger) row{
    switch (row) {
        case 0://CurlUp
        {
            [UIView beginAnimations:@"animationID" context:nil];
            [UIView setAnimationDuration:animationDuration.value];
            [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
            [UIView setAnimationRepeatAutoreverses:enableAnimation.isOn];
            [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:image cache:YES];
            [UIView commitAnimations];
        }
            break;
        case 1://FlipFromLeft
        {
            [UIView beginAnimations:@"animationID" context:nil];
            [UIView setAnimationDuration:animationDuration.value];
            [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
            [UIView setAnimationRepeatAutoreverses:enableAnimation.isOn];
            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:image cache:YES];
            [UIView commitAnimations];
        }
            break;
        case 2://block CurlDown
        {
            [UIView animateWithDuration:animationDuration.value animations:^(void){
                [UIView setAnimationRepeatAutoreverses:enableAnimation.isOn];
                [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:image cache:YES];
            }];
        }
            break;
        case 3://block FlipFromRight
        {
            [UIView animateWithDuration:animationDuration.value delay:.5 options:UIViewAnimationOptionCurveEaseOut animations:^(void){
                [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:image cache:YES];
            } completion:^(BOOL finish){
                animationDurationLabel.text = @"动画结束";
            }];
        }
            break;
        default:
            break;
    }
}

-(void)setCATransition:(NSInteger) row{
    switch (row) {
        case 0://cube
        {
            CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:@"cube"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
            
        }
            break;
        case 1://kCATransitionPush
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:kCATransitionPush];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:AnimationKey];
        }
            break;
        case 2:
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:kCATransitionReveal];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 3:
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:kCATransitionMoveIn];
            [transtion setSubtype:kCATransitionFromTop];
            [transtion setDelegate:self];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 4://kCATransitionFade
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
            [transtion setType:kCATransitionFade];
            [transtion setSubtype:kCATransitionFromTop];
            [image setImage:[UIImage imageNamed:@"img.jpeg"]];
            [image.layer addAnimation:transtion forKey:AnimationKey];
        }
            break;
        case 5:
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:@"suckEffect"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 6:
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:@"oglFlip"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 7:
        {
            CATransition *transtion = [CATransition animation];
            [transtion setStartProgress:.2];
            [transtion setEndProgress:.8];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
            [transtion setType:@"rippleEffect"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 8://cameraIrisHollowOpen
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:@"cameraIrisHollowOpen"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        case 9://cameraIrisHollowClose
        {
            CATransition *transtion = [CATransition animation];
            transtion.duration = animationDuration.value;
            [transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            [transtion setType:@"cameraIrisHollowClose"];
            [transtion setSubtype:kCATransitionFromTop];
            [image.layer addAnimation:transtion forKey:@"transtionKey"];
        }
            break;
        default:
            break;
    }
}

-(void)setCABasicAnimation:(NSInteger) row{
    switch (row) {
        case 0:
        {
            CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
            [basic setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
            [basic setFromValue:[NSNumber numberWithFloat:1]];
            [basic setToValue:[NSNumber numberWithFloat:.3]];
            [basic setDuration:animationDuration.value];
            [basic setDelegate:self];
            [image.layer addAnimation:basic forKey:AnimationKey];
            
        }
            break;
        case 1:
        {
            CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];
            [basic setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
            [basic setFromValue:[NSNumber numberWithFloat:1]];
            [basic setToValue:[NSNumber numberWithFloat:.3]];
            [basic setDuration:animationDuration.value];
            [image.layer addAnimation:basic forKey:AnimationKey];
        }
            break;
        default:
            break;
    }
}

-(void)setCAKeyframeAnimation:(NSInteger) row{
    switch (row) {
        case 0:
        {
            CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"borderWidth"];
            keyframe.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0],
                               [NSNumber numberWithFloat:5],
                               [NSNumber numberWithFloat:10],
                               [NSNumber numberWithFloat:15],nil];
            keyframe.repeatCount = MAXFLOAT;
            keyframe.autoreverses = enableAnimation.isOn;
            keyframe.duration = animationDuration.value;
            [image.layer addAnimation:keyframe forKey:AnimationKey];
        }
            break;
        case 1://position
        {
            UIBezierPath *path = [UIBezierPath bezierPath];
            //            [path moveToPoint:image.frame.origin];
            [path moveToPoint:CGPointMake(image.frame.origin.x + image.frame.size.width/2, image.frame.origin.y + image.frame.size.height/2)];
            [path addLineToPoint:CGPointMake(image.frame.origin.x + image.frame.size.width/2,400)];
            [path addLineToPoint:CGPointMake(20, 400)];
            CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];
            keyframe.path = path.CGPath;
            keyframe.duration = animationDuration.value;
            [image.layer addAnimation:keyframe forKey:AnimationKey];
        }
            break;
        default:
            break;
    }
}

-(void)setCAAnimationGroup:(NSInteger) row{
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    [basic setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    [basic setFromValue:[NSNumber numberWithFloat:1]];
    [basic setToValue:[NSNumber numberWithFloat:.3]];
    
    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.x"];
    keyframe.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:M_PI], nil];
    
    [group setDuration:animationDuration.value];
    [group setAnimations:[NSArray arrayWithObjects:basic,keyframe, nil]];
    [image.layer addAnimation:group forKey:AnimationKey];
}

-(void)setCATransfrom3D:(NSInteger) row{
    switch (row) {
        case 0:
        {
            [UIView animateWithDuration:animationDuration.value animations:^{
                [UIView setAnimationRepeatCount:MAXFLOAT];
                [UIView setAnimationRepeatAutoreverses:enableAnimation.isOn];
                CATransform3D transform = CATransform3DMakeTranslation(0, -150, 0);
                CATransform3D trans = CATransform3DScale(transform, 1.5, 1.5, 10);
                [label.layer setTransform:trans];
            } completion:^(BOOL finished) {
                animationDurationLabel.text = @"finished";
            }];
        }
            break;
        case 1:{
            CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
            [basic setDuration:animationDuration.value];
            [basic setRepeatCount:MAXFLOAT];
            [basic setAutoreverses:enableAnimation.isOn];
            
            NSValue *valueForm = [NSValue valueWithCATransform3D:CATransform3DIdentity];
            CATransform3D transTo = CATransform3DMakeScale(.5, .5, 0);
            NSValue *valueTo = [NSValue valueWithCATransform3D:transTo];
            
            [basic setFromValue:valueForm];
            [basic setToValue:valueTo];
            
            [image.layer addAnimation:basic forKey:AnimationKey];
        }
            break;
        case 2:{
            CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
            [keyframe setRepeatCount:MAXFLOAT];
            [keyframe setDuration:animationDuration.value];
            [keyframe setAutoreverses:enableAnimation.isOn];
            
            CATransform3D transForm = CATransform3DIdentity;
            CATransform3D transTo = CATransform3DMakeScale(.5, .5, 0);
            NSValue *valueForm = [NSValue valueWithCATransform3D:transForm];
            NSValue *valueTo = [NSValue valueWithCATransform3D:transTo];
            
            [keyframe setValues:[NSArray arrayWithObjects:valueTo,valueForm,nil]];
            
            [image.layer addAnimation:keyframe forKey:AnimationKey];
        }
            break;
        case 3:{
            CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"];
            [basic setRepeatCount:MAXFLOAT];
            [basic setDuration:animationDuration.value];
            [basic setAutoreverses:enableAnimation.isOn];
            
            NSValue *valueForm = [NSValue valueWithCATransform3D:CATransform3DIdentity];
            CGAffineTransform affine = CGAffineTransformMakeTranslation(0, -150);
            CATransform3D t = CATransform3DMakeAffineTransform(affine);
            CATransform3D trans = CATransform3DScale(t, 1.5, 1.5, 10);
            NSValue *valueTo = [NSValue valueWithCATransform3D:trans];
            
            [basic setFromValue:valueForm];
            [basic setToValue:valueTo];
            
            [label.layer addAnimation:basic forKey:AnimationKey];
        }
            break;
        default:
            break;
    }
}

下面这一部分是TableView的实现，不难看出，总共7个section，每个section是一个大类，下面分为好几个小的动画实现。

<p class="p1">- (<span class="s1">void</span>)viewDidLoad</p><p class="p1">{</p><p class="p2"><span class="s2">    [</span><span class="s1">super</span><span class="s2"> </span>viewDidLoad<span class="s2">];</span></p>    arrSelSection = [[NSMutableArray alloc] initWithCapacity:0];
    arrSection = [[NSArray alloc] initWithObjects:@"CALayer",@"UIViewAnimation",@"CATransition",@"CABasicAnimation",@"CAKeyframeAn    imation",@"CAAnimationGroup",@"CATransfrom3D", nil];
    arrLayerItem = [[NSArray alloc] initWithObjects:@"圆角红边框", nil];
    arrUIViewItem = [[NSArray alloc] initWithObjects:@"CurlUp(上翻页)",@"Flip(从左翻转)",@"block(下翻页)",@"block(从右翻转)", nil];
    arrCATransitionItem = [[NSArray alloc] initWithObjects:@"cube(立方体)",@"Push(推出)",@"Reveal(揭开)",@"MoveIn(覆盖)",@"Fade(淡出)"    ,@"suckEffect(吸收)",@"oglFlip(翻转)",@"rippleEffect(波纹)",@"Open(镜头开)",@"Close(镜头关)", nil];
    arrCABasicAnimationItem = [[NSArray alloc]initWithObjects:@"scale(比例缩放)",@"opacity(透明)", nil];
    arrCAKeyframeAnimationItem = [[NSArray alloc]initWithObjects:@"border(边框闪动)",@"position(位置)", nil];
    arrCAAnimationGroup = [[NSArray alloc]initWithObjects:@"动画组", nil];
    arrCATransfrom3D = [[NSArray alloc] initWithObjects:@"UIView",@"Base",@"Keyframe",@"Affine", nil];                             <span style="font-family: Arial, Helvetica, sans-serif;">}</span>

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSInteger count = 0;
    for (int i = 0; i < arrSelSection.count; i++) {
        NSString *strSection = [NSString stringWithFormat:@"%@",[arrSelSection objectAtIndex:i]];
        NSInteger selSection = strSection.integerValue;
        if (section == selSection) {
            return 0;
        }
    }
    if(section == 0){
        count = arrLayerItem.count;
    }else if (section == 1) {
        count = arrUIViewItem.count;
    }else if(section == 2){
        count = arrCATransitionItem.count;
    }else if(section == 3){
        count = arrCABasicAnimationItem.count;
    }else if(section == 4){
        count = arrCAKeyframeAnimationItem.count;
    }else if(section == 5){
        count = arrCAAnimationGroup.count;
    }else if(section == 6){
        count = arrCATransfrom3D.count;
    }
    return count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSInteger section = indexPath.section;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];
    }
    BOOL isSelSection = NO;
    for (int i = 0; i < arrSelSection.count; i++) {
        NSString *strSection = [NSString stringWithFormat:@"%@",[arrSelSection objectAtIndex:i]];
        NSInteger selSection = strSection.integerValue;
        if (section == selSection) {
            isSelSection = YES;
            break;
        }
    }
    if (!isSelSection) {
        NSString *item = nil;
        if (section == 0) {
            item = [arrLayerItem objectAtIndex:indexPath.row];
        }else if (section == 1) {
            item = [arrUIViewItem objectAtIndex:indexPath.row];
        }else if(section == 2){
            item = [arrCATransitionItem objectAtIndex:indexPath.row];
        }else if(section == 3){
            item = [arrCABasicAnimationItem objectAtIndex:indexPath.row];
        }else if(section == 4){
            item = [arrCAKeyframeAnimationItem objectAtIndex:indexPath.row];
        }else if(section == 5){
            item = [arrCAAnimationGroup objectAtIndex:indexPath.row];
        }else if(section == 6){
            item = [arrCATransfrom3D objectAtIndex:indexPath.row];
        }
        
        [cell.textLabel setFont:[UIFont systemFontOfSize:18]];
        cell.textLabel.text = item;
    }
    return cell;
}

-(void)setAnimation:(NSIndexPath *) indexPath{
    switch (indexPath.section) {
        case 0:{
            [self setLayerAnimation:indexPath.row];
        }
            break;
        case 1:
        {
            [self setUIViewAnimation:indexPath.row];
        }
            break;
        case 2:
        {
            [self setCATransition:indexPath.row];
        }
            break;
        case 3:
        {
            [self setCABasicAnimation:indexPath.row];
        }
            break;
        case 4:
        {
            [self setCAKeyframeAnimation:indexPath.row];
        }
            break;
        case 5:
        {
            [self setCAAnimationGroup:indexPath.row];
        }
            break;
        case 6:{
            [self setCATransfrom3D:indexPath.row];
        }
            break;
        default:
            break;
    }
}

其中用到的framework有：

运行后的效果如下图所示：

想要demo的朋友留言我发给你！