各种效果动画操作展示（放大、缩小、旋转、翻转等）

最新推荐文章于 2025-05-22 16:40:48 发布

番薯大佬

最新推荐文章于 2025-05-22 16:40:48 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS 动画

本文链接：https://blog.youkuaiyun.com/potato512/article/details/52085991

iOS 动画专栏收录该内容

16 篇文章

订阅专栏

这篇博客详细介绍了如何使用UIView和其layer实现各种动画效果，包括放大、缩小、旋转、翻转等。同时提到了私有API如立方体旋转、相机开/关等，以及动画方向和节奏控制选项，为iOS开发者提供丰富的视图过渡动画选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

各效果动画主要是对UIView，或UIView的layer进行操作。

动画效果有放大、缩小、旋转、翻转等操作；以及还有私有API的方法，如立方体旋转、相机开或关、抽纸、涟漪等。

1、各种动画效果其中除了'fade', `moveIn', `push' , `reveal' ,其他属于似有的API(我是这么认为的,可以点进去看下注释).可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.

@"cube" 立方体翻滚效果

@"moveIn" 新视图移到旧视图上面

@"reveal" 显露效果(将旧视图移开,显示下面的新视图)

@"fade" 交叉淡化过渡(不支持过渡方向)(默认为此效果)

@"pageCurl" 向上翻一页

@"pageUnCurl" 向下翻一页

@"suckEffect" 收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)

@"rippleEffect" 滴水效果,(不支持过渡方向)

@"oglFlip" 上下左右翻转效果

@"rotate" 旋转效果

@"push"

@"cameraIrisHollowOpen" 相机镜头打开效果(不支持过渡方向)

@"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向)

kCATransitionFade 交叉淡化过渡

kCATransitionMoveIn 新视图移到旧视图上面

kCATransitionPush 新视图把旧视图推出去

kCATransitionReveal 将旧视图移开,显示下面的新视图

2、subType 各种动画方向

kCATransitionFromRight; 同字面意思(下同)

kCATransitionFromLeft;

kCATransitionFromTop;

kCATransitionFromBottom;

当type为@"rotate"(旋转)的时候,它也有几个对应的subtype,分别为:

90cw 逆时针旋转90°

90ccw 顺时针旋转90°

180cw 逆时针旋转180°

180ccw 顺时针旋转180°

3、timingFunction 用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏,比如是均匀变化(相同时间变化量相同)还是先快后慢,先慢后快还是先慢再快再慢.

动画的开始与结束的快慢,有五个预置分别为(下同):

kCAMediaTimingFunctionLinear 线性,即匀速

kCAMediaTimingFunctionEaseIn 先慢后快

kCAMediaTimingFunctionEaseOut 先快后慢

kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢

kCAMediaTimingFunctionDefault 实际效果是动画中间比较快

self.flyView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, 120, 60)];
[self.flyView setBackgroundColor:[UIColor lightGrayColor]];
[self.view addSubview:self.flyView];

// 放大缩小动画
[UIView animateWithDuration:0.3 animations:^{
        // 放大
        self.flyView.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^{
            // 缩小
            self.flyView.transform = CGAffineTransformMakeScale(0.6, 0.6);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3 animations:^{
                // 还原
                self.flyView.transform = CGAffineTransformMakeScale(1.0, 1.0);
            }];
        }];
}];

// 旋转动画
[UIView animateWithDuration:0.3 animations:^{
        self.flyView.transform = CGAffineTransformMakeRotation(0.3);
}];

// 翻转动画
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span><span style="font-family: Arial, Helvetica, sans-serif;"> cache:NO];</span>
[UIView commitAnimations];

// 翻页动画
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span> cache:NO];
[UIView commitAnimations];

// 推动动画（从上往下推）
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];// 移动kCATransitionMoveIn
[animation setSubtype:kCATransitionFromBottom];    
[self.flyView.layer addAnimation:animation forKey:nil];

// 缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span>.layer addAnimation:scaleAnimation forKey:nil];

// 旋转动画
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 2];
rotationAnimation.duration = 0.35f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[<span style="font-family: Arial, Helvetica, sans-serif;">self.flyView</span>.layer addAnimation:rotationAnimation forKey:nil];

// 旋转缩小再放大动画
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 2];
rotationAnimation.duration = 0.35f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.35f;
animationGroup.autoreverses = YES;
animationGroup.repeatCount = 1;
animationGroup.animations =[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil];
[self.flyView.layer addAnimation:animationGroup forKey:@"animationGroup"];

// 翻转动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"oglFlip"];
[animation setSubtype:@"fromTop"];
[self.flyView.layer addAnimation:animation forKey:nil];

// 立方体动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromRight"];
[self.flyView.layer addAnimation:animation forKey:nil];

// 抽纸动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"suckEffect"];  
[self.flyView.layer addAnimation:animation forKey:nil];

// 涟漪动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"rippleEffect"];
[self.flyView.layer addAnimation:animation forKey:nil];

// 相机动画——私有API
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cameraIrisHollowOpen"]; // 相机关cameraIrisHollowClose；相机开cameraIrisHollowOpen
[animation setSubtype:@"fromRight"]; 
[self.flyView.layer addAnimation:animation forKey:nil];