UIView Animation动画是iOS开发中最常用的动画类,下面总结一下UIView Animation动画的基本用法。
UIView Animation动画的常用方法
//方法一
[UIView animateWithDuration:4.0 // 动画时长
animations:^{
// code
}];
//方法二
[UIView animateWithDuration:4.0 // 动画时长
animations:^{
// code...
}
completion:^(BOOL finished) {
// 动画完成后执行
// code...
}];
//方法三
[UIView animateWithDuration:4.0 // 动画时长
delay:2.0 // 动画延迟
options:UIViewAnimationOptionCurveEaseIn // 动画过渡效果
animations:^{
// code...
}
completion:^(BOOL finished) {
// 动画完成后执行
// code...
}];
//方法四(在IOS7开始,系统动画效果广泛应用Spring Animation :)
[UIView animateWithDuration:4.0 // 动画时长
delay:0.0 // 动画延迟
usingSpringWithDamping:1.0 // 弹簧的阻尼 0~1(如果为1动画则平稳减速动画没有振荡)
initialSpringVelocity:5.0 // 弹簧的速率(数值越小,动力越小,弹簧的拉伸幅度就越小。反之相反。比如:总共的动画运行距离是200 pt,你希望每秒 100pt 时,值为 0.5;)
options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
animations:^{
// code...
CGPoint point = _imageView.center;
point.y += 150;
[_imageView setCenter:point];
} completion:^(BOOL finished) {
// 动画完成后执行
// code...
[_imageView setAlpha:1];
}];
动画效果相关:
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //动画无限重复
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
时间函数曲线相关:
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快
UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快
UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢
UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
转场动画相关的:
UIViewAnimationOptionTransitionNone //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转
UIViewAnimationOptionTransitionCurlUp //上卷转场
UIViewAnimationOptionTransitionCurlDown //下卷转场
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
UIView Animation过渡动画
view 参与转换的视图
<1>
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) {
}];
<2>
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) {
}];
UIView Animation关键帧动画
UIView关键帧动画的两个方法
//duration 总持续时间
//UIViewKeyframeAnimationOptions options 枚举 下面说明
//frameStartTime 相对开始时间
//frameDuration 相对持续时间
+ (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;
//UIViewKeyframeAnimationOptions 枚举说明
UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewKeyframeAnimationOptionRepeat //动画无限重复
UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
//关键帧动画独有
UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。
UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。
UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。
UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些..
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
相关实例:
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) {
}];
UIView Animation两个移除视图方法
//删除视图上的子视图 animation这个枚举只有一个删除值...
//views数组中的view 会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
+ (void)performSystemAnimation:(UISystemAnimation)animation
onViews:(NSArray *)views
options:(UIViewAnimationOptions)options
animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion
//在动画block中不执行动画的代码
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation
相关实例:
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) {
}];