iOS动画——基础动画UIView|iOS动画——基础动画UIView Animation

。。。。没有好的开头,那就直接开始

iOS动画——基础动画UIView|iOS动画——基础动画UIView Animation
文章图片
iOS动画
这篇文章我肯可以只看红框圈的,基础动画即可,核心动画将在 iOS动画——核心动画Core Animation中提到

UIView Animation
  1. UIView(UIViewAnimation)
主要使用下面两个方法设置
+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context; + (void)commitAnimations;

具体使用看Demo
#pragma mark -- UIViewAnimation - (void)startAnimation { [UIView beginAnimations:@"UIViewAnimation" context:(__bridge void * _Nullable)(self)]; [UIView setAnimationDuration:2.0]; [UIView setAnimationDelay:0.0]; [UIView setAnimationRepeatCount:2]; [UIView setAnimationRepeatAutoreverses:YES]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; [UIView setAnimationDelegate:self]; self.redView.center = CGPointMake(300, 300); [UIView commitAnimations]; }

参数的使用
//duration : 动画运行时间 + (void)setAnimationDuration:(NSTimeInterval)duration; //delay : 动画开始到执行的时间间隔 + (void)setAnimationDelay:(NSTimeInterval)delay; /* UIViewAnimationCurve 表示动画的变化规律: UIViewAnimationCurveEaseInOut: 开始和结束时较慢 UIViewAnimationCurveEase: 开始时较慢 UIViewAnimationCurveEaseOut: 结束时较慢 UIViewAnimationCurveLinear: 整个过程匀速进行 */ + (void)setAnimationCurve:(UIViewAnimationCurve)curve; //repeatCount:动画重复次数 + (void)setAnimationRepeatCount:(float)repeatCount; //Autoreverse 执行动画回路,前提是设置动画无限重复 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;

  1. UIView(UIViewAnimationWithBlocks)
主要使用接口
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL + (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 NS_AVAILABLE_IOS(7_0);

使用见Demo
#pragma mark -- UIViewAnimationWithBlocks - (void)animationWithBlocks { //duration持续时间,delay延迟时间,UIViewAnimationOptions枚举项和completion动画结束的回调 #if 0 [UIView animateWithDuration:2.0 animations:^{ self.redView.center = CGPointMake(300, 300); }]; #elif 0 [UIView animateWithDuration:2.0 animations:^{ self.redView.center = CGPointMake(300, 300); } completion:^(BOOL finished) { self.redView.center = CGPointMake(300, 500); }]; #elif 0 [UIView animateWithDuration:3.0 delay:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{ self.redView.center = CGPointMake(300, 300); } completion:^(BOOL finished) { self.redView.center = CGPointMake(300, 500); }]; #elif 1 //springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。 //initialSpringVelocity:视图在动画开始时的速度,>= 0。 [UIView animateWithDuration:3.0 delay:1.0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseOut animations:^{ self.redView.center = CGPointMake(300, 300); } completion:nil]; #endif }

参数解释
duration :持续时间 delay :延迟时间 UIViewAnimationOptions :枚举项 { - 动画效果相关 UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //动画无限重复 UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线 UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照 UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果 UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项 - 时间函数曲线相关 UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快 UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快 UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢 UIViewAnimationOptionCurveLinear //时间曲线函数,匀速 - 转场动画相关 UIViewAnimationOptionTransitionNone //无转场动画 UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转 UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转 UIViewAnimationOptionTransitionCurlUp //上卷转场 UIViewAnimationOptionTransitionCurlDown //下卷转场 UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失 UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转 UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转 } completion :动画结束的回调 springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。 initialSpringVelocity:视图在动画开始时的速度,>= 0。

还有两个转场动画,
view: 需要转换的视图 + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); fromView: 开始的视图 toView:转换后的视图 + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

  1. UIView (UIViewKeyframeAnimations)
关键帧动画
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0); + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);

Demo
#pragma mark -- UIViewKeyframeAnimations - (void)viewKeyframeAnimations { #if 0 [UIView animateKeyframesWithDuration:3.0 delay:1.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{ self.redView.center = CGPointMake(300, 300); } completion:nil]; #elif 1 [UIView animateKeyframesWithDuration:3.0 delay:1.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{ [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{ self.redView.center = CGPointMake(300, 500); }]; } completion:nil]; #endif }

参数说明
duration: 持续时间 delay: 等待时间 relativeStartTime:是相对起始时间,表示该关键帧开始执行的时刻在整个动画持续时间中的百分比,取值范围是[0-1] relativeDuration:是相对持续时间,表示该关键帧占整个动画持续时间的百分比,取值范围也是[0-1] UIViewKeyframeAnimationOptions:枚举 { UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewKeyframeAnimationOptionRepeat //动画无限重复 UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的?选项 关键帧动画独有 UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。 UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。 UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。 UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些.. UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。 }

特别的两个
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0); + (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

网上查阅资料:
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) { }]; }

Demo 地址
Core Animation
【iOS动画——基础动画UIView|iOS动画——基础动画UIView Animation】后续。。。iOS动画——核心动画Core Animation

    推荐阅读