UI_动画
动画的使用场景
UIView动画
CGAffineTransform2D仿射变换
CALayer
CAAnimation动画
动画使用场景
iOS中的动画：
- iOS中的动画是指一些视图上的过滤效果
- 合理利用动画能提高用户体验
动画分类
CALayer动画－>UIView动画：⬇️
- UIView的属性动画
- UIViewTransition动画
UIView动画
UIView动画影像的属性
- frame：视图框架
- center：视图位置
- bounds：视图大小
- backgroundColor：背景颜色
- alpha：视图透明度
- transform：视图转换
UIView动画的设置：
1 // @interface UIView(UIViewAnimation)
2 //开始动画 additional context info passed to will start/did stop selectors. begin/commit can be nested
3 + (void)beginAnimations:(NSString *)animationID context:(void *)context;
4 //提交动画(必须有) starts up any animations when the top level animation is commited
5 + (void)commitAnimations;
6
7 // no getters. if called outside animation block, these setters have no effect.
8 // 设置动画的代理 default = nil
9 + (void)setAnimationDelegate:(id)delegate;
10 //设置动画开始的代理方法 default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
11 + (void)setAnimationWillStartSelector:(SEL)selector;
12 //设置动画结束的代理方法 default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
13 + (void)setAnimationDidStopSelector:(SEL)selector;
14 //动画持续时间 // default = 0.2
15 + (void)setAnimationDuration:(NSTimeInterval)duration;
16 //动画开始前延迟 default = 0.0
17 + (void)setAnimationDelay:(NSTimeInterval)delay;
18 // default = now ([NSDate date])
19 + (void)setAnimationStartDate:(NSDate *)startDate;
20 //动画的速度曲线 default = UIViewAnimationCurveEaseInOut
21 + (void)setAnimationCurve:(UIViewAnimationCurve)curve;
22 //动画重复次数 default = 0.0. May be fractional
23 + (void)setAnimationRepeatCount:(float)repeatCount;
24 //动画反转 default = NO. used if repeat count is non-zero
25 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
26 //动画从当前状态继续执行 default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).
27 + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;
28 // current limitation - only one per begin/commit block
29 + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
30 // ignore any attribute changes while set.
31 + (void)setAnimationsEnabled:(BOOL)enabled;
32 + (BOOL)areAnimationsEnabled;
33 + (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
34
35 @end
3 + (void)beginAnimations:(NSString *)animationID context:(void *)context;
4 //提交动画(必须有) starts up any animations when the top level animation is commited
5 + (void)commitAnimations;
6
7 // no getters. if called outside animation block, these setters have no effect.
8 // 设置动画的代理 default = nil
9 + (void)setAnimationDelegate:(id)delegate;
10 //设置动画开始的代理方法 default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
11 + (void)setAnimationWillStartSelector:(SEL)selector;
12 //设置动画结束的代理方法 default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
13 + (void)setAnimationDidStopSelector:(SEL)selector;
14 //动画持续时间 // default = 0.2
15 + (void)setAnimationDuration:(NSTimeInterval)duration;
16 //动画开始前延迟 default = 0.0
17 + (void)setAnimationDelay:(NSTimeInterval)delay;
18 // default = now ([NSDate date])
19 + (void)setAnimationStartDate:(NSDate *)startDate;
20 //动画的速度曲线 default = UIViewAnimationCurveEaseInOut
21 + (void)setAnimationCurve:(UIViewAnimationCurve)curve;
22 //动画重复次数 default = 0.0. May be fractional
23 + (void)setAnimationRepeatCount:(float)repeatCount;
24 //动画反转 default = NO. used if repeat count is non-zero
25 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
26 //动画从当前状态继续执行 default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).
27 + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;
28 // current limitation - only one per begin/commit block
29 + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
30 // ignore any attribute changes while set.
31 + (void)setAnimationsEnabled:(BOOL)enabled;
32 + (BOOL)areAnimationsEnabled;
33 + (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
34
35 @end
UIView动画块的用法
[UIView beginAnimations:nil context:nil]; //标记动画块开始
....//设置各种动画属性
[UIView commitAnimations];标记动画块结束
UIView动画块的用法
[UIView animateWithDuration:1.0 animations:^{
.....//在块语法中设置各种动画属性
}]; //语句结束之后自动执行动画
UIViewBlock动画的API
@interface UIView(UIViewAnimationWithBlocks)
//最简单的UIViewBlock动画
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0
//最简单的UIViewBlock动画
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0
UIViewTransition的API
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview
CGAffineTransform2D仿射变换
CGAffineTransform的使用
- CGAffineTransform是结构体，表示一个矩阵，用于映射视图变换。
- 缩放、旋转、偏移是仿射变换支持的最常用的操作。
- 缩放、旋转、偏移区分“基于上一次”和“基于初始”
CGAffineTransform的API
2 //通过设置矩阵值进行变换
3 CG_EXTERN CGAffineTransform CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
4 //放大缩小（基于初始）
5 CG_EXTERN CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
6 //旋转（基于初始）
7 CG_EXTERN CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)
8 //放大缩小（基于前一次变化）
9 CG_EXTERN CGAffineTransform CGAffineTransformScale(CGAffineTransform t,
10 CGFloat sx, CGFloat sy)
11 //旋转（基于前一次变化）
12 CG_EXTERN CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
3 CG_EXTERN CGAffineTransform CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
4 //放大缩小（基于初始）
5 CG_EXTERN CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
6 //旋转（基于初始）
7 CG_EXTERN CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)
8 //放大缩小（基于前一次变化）
9 CG_EXTERN CGAffineTransform CGAffineTransformScale(CGAffineTransform t,
10 CGFloat sx, CGFloat sy)
11 //旋转（基于前一次变化）
12 CG_EXTERN CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CALayer
UIView和CALayer的区别的联系
- UIView负责交互，显示CALayer绘制的内容。
- CALayer负责绘制，提供UIView需要展示的内容，不能交互，是UIView的一个readonly属性。
CALayer的常用属性
- 圆角：CornerRadius
- 阴影颜色：ShadowColor
- 阴影偏移距离：ShadowOffset
- 阴影模糊程度：ShadowRadius
- 阴影透明度：ShadowOpacity
- 描边粗细：BorderWidth
- 描边颜色：BoarderColor
- 锚点：anchorPoint
- 位置信息：position
- 使CALayer产生3D空间内平移、缩放、旋转等变化：transform
anchorPoint和position
- AnchorPoint指的是锚点的位置,也就是图形中那个点相对于图形的位置 如果是0,0 说明是在图形的左上角
- 而Position意思是说这个锚点相对于舞台(也就是合成)的位置,如果是0,0则锚点所在位置应该在合成的左上角
- 这时如果你改变AnchorPoint会发现图形会移动但是Position并没有变化
CAAnimation动画
- CAAnimation是抽象类，通常使用它的子类实现动画效果
- 所有CAAnimation及其子类的对象都添加在View的layer上，例如：
- [view.layer addAnimation:animation forKey:nil];
给layer添加/移除CALayer动画
2 - (void)addAnimation:(CAAnimation *)animation forKry:(NSString *)key;
3 - (void)removeAnimationForKey:(NSString *)key;
4 - (void)removeAllAnimations;
3 - (void)removeAnimationForKey:(NSString *)key;
4 - (void)removeAllAnimations;
CAAnimation相关的子类
CAAnimation
- CAAnimationGroup
- CAPropertyAnimation
- CABasicAnimation
- CAKeyFrameAnimation
- CATransition
CAPropertyAnimation
- CAPropertyAnimation也是一个抽象类
- 通常我们使用它的两个子类：CABasicAnimation和CAKeyFrameAnimation
CABasicAnimation
作用：基于layer动画，通常设定初始和结束值执行动画
1 //方法名和属性
2 //系统提供的构造器方法
3 + (id)animationWithKeyPath:(NSString *)path;
4 //只能填写CALayer中能够做动画的属性名
5 @property(copy) NSString *keyPath;
6 //起始值
7 @property(retain) id fromValue;
8 //结束值
9 @property(retain) id toValue;
10 //相对值
11 @property(retain) id byValue;
CAKeyFrameAnimation
作用：关键帧动画，可以让你的View的layer按照预定轨迹做动画
1 //方法名/属性
2 //系统提供的构造器的方法
3 + (id)animationWithKeyPath:(NSString *)path;
4 //通过制定一个自己定义的path来让某一个物体按照这个路径进行动画
5 @property CGPathRef path;
6 //一个数组，提供了一组关键帧的值，当使用path的时候value的值被自动忽略
7 @property (copy) NSArray *value;
8 //一个数组，设置每一个桢的时间，其成员必须是NSNumber。设置详情查看API
9 @property (copy) NSArray *keyTimes;
10 //设定关键帧中间的值是如何计算
11 @property (copy) NSString *rotationMode;
CAAnimationGroup
CAAnimationGroup只有一个数组属性，可以添加多个CAAnimation，一起执行。
CATransition
作用：layer的过渡动画
有两个主要属性：type（设置过渡动画的效果）和subType（设置过渡动画的方向）
浙公网安备 33010602011771号