ios开发各种动画效果

最新推荐文章于 2025-08-23 20:56:03 发布

weixin_34279184

最新推荐文章于 2025-08-23 20:56:03 发布

阅读量71

点赞数

文章标签：移动开发

.h文件中

@interface ViewController:UIViewController
{
    IBOutlet UIImageView *imageView;
}

一、UIView 简单的动画效果（UIViewAnimation）

1.向上翻页

[UIView beginAnimations:@"animationID" context:nil];
[UIView setAnimationDuration:8];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIWindow setAnimationsEnabled:YES];
//[UIView setAnimationRepeatAutoreverses:YES]; //自动恢复
setAnimationDidStopSelector:@selector(finishedFading)];  //动画结束完成的事件
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:imageView cache:YES];
[UIView commitAnimations];

2.向下翻页

[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:imageView cache:YES];

3.向左翻页

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:imageView cache:YES];

4.向右翻页

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:imageView cache:YES];

二、特殊动画(CATrasition)

首先，导入QuartzCore.framework

然后，

#include <QuartzCore/QuartzCore.h>

1.立方体效果

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"cube"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey"];

2.推出

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:kCATransitionPush];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"animationKey"];

3.揭开

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:kCATransitionReveal];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey"];

4.覆盖

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:kCATransitionMoveIn];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey"];

5.淡出

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut
[transtion setType:kCATransitionFade];
[transtion setSubtype:kCATransitionFromTop];
[imageView setImage:[UIImage imageNamed:@"img.jpg"]];
[imageView.layer addAnimation:transtion forKey:@"animationkey"];

6.吸收

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"suckEffect"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey

7.翻转

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"oglFlip"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey];

8.波纹

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"rippleEffect"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey];

9.镜头开

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"cameraIrisHollowOpen"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey];

10.镜头关

CATransition *transtion = [CATransition animation];
//            [transtion setStartProgress:0.5];
//            [transtion setEndProgress:0.6];
transtion.duration = 5;
[transtion setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transtion setType:@"cameraIrisHollowClose"];
[transtion setSubtype:kCATransitionFromTop];
[imageView.layer addAnimation:transtion forKey:@"transtionKey];

11.比例缩放

CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[basic setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[basic setFromValue:[NSNumber numberWithFloat:1]];
[basic setToValue:[NSNumber numberWithFloat:.3]];
[basic setDuration:2];
//[basic setDelegate:self];
[imageView.layer addAnimation:basic forKey:@"animationKey"];

12.透明

CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
[basic1 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[basic1 setFromValue:[NSNumber numberWithFloat:1]];
[basic1 setToValue:[NSNumber numberWithFloat:.3]];
[basic1 setDuration:2];
[imageView.layer addAnimation:basic1 forKey:@"animationKey"];

13.边框闪动

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 = YES;
keyframe.duration = 2;
[imageView.layer addAnimation:keyframe forKey:@"animationKey"];

14.位置

UIBezierPath *path = [UIBezierPath bezierPath];
//[path moveToPoint:image.frame.origin];
[path moveToPoint:CGPointMake(imageView.frame.origin.x + imageView.frame.size.width/2, imageView.frame.origin.y + imageView.frame.size.height/2)];
[path addLineToPoint:CGPointMake(imageView.frame.origin.x + imageView.frame.size.width/2,400)];
[path addLineToPoint:CGPointMake(20, 400)];
CAKeyframeAnimation *keyframe1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyframe.path = path.CGPath;
keyframe.duration = 2;
[imageView.layer addAnimation:keyframe1 forKey:@"animationKey"];

15.动画组

CAAnimationGroup *group = [CAAnimationGroup animation];  
CABasicAnimation *basic2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[basic2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[basic2 setFromValue:[NSNumber numberWithFloat:1]];
[basic2 setToValue:[NSNumber numberWithFloat:.3]];
CAKeyframeAnimation *keyframe2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.x"];
keyframe2.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:M_PI], nil];
[group setDuration:2];
[group setAnimations:[NSArray arrayWithObjects:basic2,keyframe2, nil]];
[imageView.layer addAnimation:group forKey:@"animationKey"];

三、其他(CATransfrom3D)

1.UIView

[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";
            }];
        }

2.Base

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];
            
            [imageView.layer addAnimation:basic forKey:AnimationKey];
        }

3.Keyframe

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]];
            
            [imageView.layer addAnimation:keyframe forKey:AnimationKey];
        }

4.Affine

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];
        }

注：判断动画完成的事件用代理；

设置transition.delegated = self;

1.如果要判断是哪个动画的结束，我们要在响对应的动画设置键值。

[transtion setValue:@"an2" forKey:@"animationKey"];

2.然后，在didstop回调中获取

-(void)animationDidStart:(CAAnimation *)anim{
    animationDurationLabel.text = @"开始动画";
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSString* value = [anim valueForKey:@"animationKey"];
    if ([value isEqualToString:@"an1"])
    {
        return;
    }

    animationDurationLabel.text = @"动画完毕";
}

在UIView中调用结束的方法：

[UIView setAnimationDidStopSelector:@selector(animationDidStop1:finished:context:)];


-(void)animationDidStop1:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
{
    [self turnBig];
}