本文为CocoaChina网友嘿o大远投稿
今天总结一下UIView动画就是 UiView动画是基于高层API封装进行封装的,对UIView的属性进行修改时候所产生的动画.
基本动画
下面两种方法是最常用的两种.
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
animations 修改View属性的Block 下面是支持修改的属性
@property frame @property bounds @property center @property transform @property alpha @property backgroundColor @property contentStretch
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
completion 动画完成block
BOOL finished 表示动画是否完成
继续
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
delay 延迟执行时间
options 动画效果枚举 ,下面是全部枚举的说明
动画效果相关
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //动画无限重复 UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线 UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照 UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果 UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快 UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快 UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢 UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
转场动画相关的
UIViewAnimationOptionTransitionNone //无转场动画 UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转 UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转 UIViewAnimationOptionTransitionCurlUp //上卷转场 UIViewAnimationOptionTransitionCurlDown //下卷转场 UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失 UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转 UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
弹簧动画
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
dampingRatio 弹簧的阻尼 如果为1动画则平稳减速动画没有振荡。 这里值为 0~1
velocity 弹簧的速率。数值越小,动力越小,弹簧的拉伸幅度就越小。反之相反。比如:总共的动画运行距离是200 pt,你希望每秒 100pt 时,值为 0.5;
例子
[UIView animateWithDuration:2 delay:2 usingSpringWithDamping:.5 initialSpringVelocity:.5 options:UIViewAnimationOptionRepeat animations:^{ view.center = self.view.center; } completion:^(BOOL finished) { }];
过渡动画
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
view 参与转换的视图
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; [self.view addSubview:view]; view.center = self.view.center; view.backgroundColor = [UIColor redColor]; UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)]; view_1.backgroundColor = [UIColor yellowColor]; [UIView transitionWithView:view duration:3 options:UIViewAnimationOptionTransitionCurlUp animations:^{ [view addSubview:view_1]; } completion:^(BOOL finished) { }];
继续
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion
fromView 一开始的视图
toView 转换后的视图
例子
UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; [self.view addSubview:baseView]; baseView.center = self.view.center; UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; [baseView addSubview:view]; view.backgroundColor = [UIColor redColor]; UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; view_1.backgroundColor = [UIColor yellowColor]; [UIView transitionFromView:view toView:view_1 duration:2 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) { }];
关键帧动画
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations
duration 总持续时间
UIViewKeyframeAnimationOptions options 枚举 下面说明
frameStartTime 相对开始时间
frameDuration 相对持续时间
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)]; view.backgroundColor = [UIColor orangeColor]; [self.view addSubview:view]; [UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat animations:^{ [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.3 animations:^{ view.frame = CGRectMake(20, 100, 100, 100); }]; [UIView addKeyframeWithRelativeStartTime:.3 relativeDuration:.6 animations:^{ view.frame = CGRectMake(60, 100, 80, 80); }]; [UIView addKeyframeWithRelativeStartTime:.6 relativeDuration:1 animations:^{ view.frame = CGRectMake(20, 20, 50, 50); }]; } completion:^(BOOL finished) { }];
UIViewKeyframeAnimationOptions
UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewKeyframeAnimationOptionRepeat //动画无限重复 UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
关键帧动画独有
UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。 UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。 UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。 UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些.. UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
剩下两个操作
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion + (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation
1.删除视图上的子视图 animation这个枚举只有一个删除值...
views操作的view 这会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
2.在动画block中不执行动画的代码.
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)]; view.backgroundColor = [UIColor orangeColor]; UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)]; [view addSubview:view_1]; view_1.backgroundColor = [UIColor redColor]; [self.view addSubview:view]; [UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse animations:^{ view.frame = CGRectMake(100, 100, 50, 50); [UIView performWithoutAnimation:^{ view.backgroundColor = [UIColor blueColor]; }]; } completion:^(BOOL finished) { }]; [UIView performSystemAnimation:UISystemAnimationDelete onViews:@[view_1] options:0 animations:^{ view_1.alpha = 0; } completion:^(BOOL finished) { }];