随笔-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的朋友留言我发给你！