iOS - UI之核心动画CAAnimationGroup以及其他

原创已于 2022-06-23 14:37:21 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ios #动画 #ui

于 2015-11-03 11:04:21 首次发布

徐如林 iOS-View 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了iOS中的UI动画，包括CAAnimationGroup在核心动画中的应用，UIView动画的使用方法，如动画的持续时间、延迟、节奏控制等。还提到了Block动画、转场动画以及UIImageView的帧动画和UIActivityIndicatorView的使用。通过实例展示了如何组合和控制动画效果。

效果：

代码：

很简单，不多说，就是把一堆动画放一起，看代码。
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    // 平移动画
    CABasicAnimation *a1 = [CABasicAnimation animation];
    a1.keyPath = @"transform.translation.y";
    a1.toValue = @(100);
    // 缩放动画
    CABasicAnimation *a2 = [CABasicAnimation animation];
    a2.keyPath = @"transform.scale";
    a2.toValue = @(0.0);
    // 旋转动画
    CABasicAnimation *a3 = [CABasicAnimation animation];
    a3.keyPath = @"transform.rotation";
    a3.toValue = @(M_PI_2);

    // 组动画
    CAAnimationGroup *groupAnima = [CAAnimationGroup animation];

    groupAnima.animations = @[a1, a2, a3];

    groupAnima.duration = 2;
    groupAnima.fillMode = kCAFillModeForwards;
    groupAnima.removedOnCompletion = NO;

    [self.iconView.layer addAnimation:groupAnima forKey:nil];
}
CAAnimationGroup简介：

CAAnimationGroup是CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
属性解析：
animations：用来保存一组动画对象的NSArray
默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

UIView动画

UIKit直接将动画集成到UIView类中，当内部的一些属性发生改变时，UIView将为这些改变提供动画支持
执行动画所需要的工作由UIView类自动完成，但仍要在希望执行动画时通知视图，为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间
常见方法解析:
+ (void)setAnimationDelegate:(id)delegate
设置动画代理对象，当动画开始或者结束时会发消息给代理对象
+ (void)setAnimationWillStartSelector:(SEL)selector
当动画即将开始时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector
+ (void)setAnimationDidStopSelector:(SEL)selector
当动画结束时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector
/ 说明需要执行动画
[UIView beginAnimations:nil context:nil];
// 设置动画持续事件
[UIView setAnimationDuration:1];
// 设置转场动画
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];

// 交换子视图的位置
[self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

// 提交动画
[UIView commitAnimations];
(void)setAnimationDuration:(NSTimeInterval)duration
动画的持续时间，秒为单位
(void)setAnimationDelay:(NSTimeInterval)delay
动画延迟delay秒后再开始
(void)setAnimationStartDate:(NSDate *)startDate
动画的开始时间，默认为now
(void)setAnimationCurve:(UIViewAnimationCurve)curve
动画的节奏控制,具体看下面的”备注”
(void)setAnimationRepeatCount:(float)repeatCount
动画的重复次数
(void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses
如果设置为YES,代表动画每次重复执行的效果会跟上一次相反
动画的节奏控制，跟CAAnimation的timingFunction属性类似
(void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache
设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存，性能较好
typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {
    UIViewAnimationCurveEaseInOut,         // slow at beginning and end
    UIViewAnimationCurveEaseIn,            // slow at beginning
    UIViewAnimationCurveEaseOut,           // slow at end
    UIViewAnimationCurveLinear
};
当我们用核心动画的时候，其实动的是CALayer，而不是UIView，UIView还是在原地的，用UIView两个就都动了，但是内部封装的方法比核心动画的少。

Block动画

动画调用
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion1


typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {
    UIViewAnimationTransitionNone,
    UIViewAnimationTransitionFlipFromLeft,
    UIViewAnimationTransitionFlipFromRight,
    UIViewAnimationTransitionCurlUp,
    UIViewAnimationTransitionCurlDown,
};
参数解析:
duration：动画的持续时间
delay：动画延迟delay秒后开始
options：动画的节奏控制
animations：将改变视图属性的代码放在这个block中
completion：动画结束后，会自动调用这个block
动画的节奏控制枚举常量
UIViewAnimationOptionCurveEaseInOut
UIViewAnimationOptionCurveEaseIn               
UIViewAnimationOptionCurveEaseOut
UIViewAnimationOptionCurveLinear 
转场动画
(void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
参数解析:
duration：动画的持续时间
view：需要进行转场动画的视图
options：转场动画的类型
animations：将改变视图属性的代码放在这个block中
completion：动画结束后，会自动调用这个block
转场动画的类型
UIViewAnimationOptionTransitionNone
UIViewAnimationOptionTransitionFlipFromLeft 
UIViewAnimationOptionTransitionFlipFromRight   
UIViewAnimationOptionTransitionCurlUp 
UIViewAnimationOptionTransitionCurlDown 
UIViewAnimationOptionTransitionCrossDissolve 
UIViewAnimationOptionTransitionFlipFromTop 
UIViewAnimationOptionTransitionFlipFromBottom
1
专场动画
+(void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion
方法调用完毕后，相当于执行了下面两句代码：
// 添加toView到父视图
[fromView.superview addSubview:toView]; 
// 把fromView从父视图中移除
[fromView.superview removeFromSuperview];
参数解析:
duration：动画的持续时间
options：转场动画的类型
animations：将改变视图属性的代码放在这个block中
completion：动画结束后，会自动调用这个block

UIImageView的帧动画

UIImageView可以让一系列的图片在特定的时间内按顺序显示
相关属性解析:
animationImages：要显示的图片(一个装着UIImage的NSArray)
animationDuration：完整地显示一次animationImages中的所有图片所需的时间
animationRepeatCount：动画的执行次数(默认为0，代表无限循环)
相关方法解析:
- (void)startAnimating; 开始动画
- (void)stopAnimating; 停止动画
- (BOOL)isAnimating; 是否正在运行动画

UIActivityIndicatorView

是一个旋转进度轮，可以用来告知用户有一个操作正在进行中，一般用initWithActivityIndicatorStyle初始化
方法解析:
- (void)startAnimating; 开始动画
- (void)stopAnimating; 停止动画
- (BOOL)isAnimating; 是否正在运行动画
UIActivityIndicatorViewStyle有3个值可供选择：
UIActivityIndicatorViewStyleWhiteLarge //大型白色指示器
UIActivityIndicatorViewStyleWhite //标准尺寸白色指示器
UIActivityIndicatorViewStyleGray //灰色指示器，用于白色背景

ps下面的代码主要方便大家查找，不用记忆，熟悉下就可以了。

到这里猫猫UI告一段落了，明天开始彩票app，然后下周基本可以开始网络多线程了，有java和android的基础，学起来真的挺快的，不过ios真心越用越喜欢。
欢迎各位一块学习，提高逼格！

也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息请以关注洲洲哥的微信公众号，不定期有干货推送：