iOS动画——基础动画UIView Animation
2018-05-10 本文已影响6人
天空像天空一样蓝
。。。。没有好的开头，那就直接开始
iOS动画
这篇文章我肯可以只看红框圈的，基础动画即可，核心动画将在iOS动画——核心动画Core Animation中提到
UIView Animation
- 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;
- 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);
- 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) {
}];
}
Core Animation
