iOS实际开发中常用动画:UIView动画,核心动画,帧动画,自定义转场动画
1.UIView动画
UIView动画能够设置的动画属性有:
frame
bounds
center
transform
alpha
BackgroundColor
contentStretch
UIView动画实现方式有普通方式和Block
1.1普通方式
开始动画语句
[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];
// 第一个参数: 动画标识
// 第二个参数: 附加参数,在设置代理情况下,此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法,大部分情况,设置为nil.
结束动画语句:
[UIView commitAnimations];
动画持续时间
[UIView setAnimationDuration:(NSTimeInterval)];
动画的代理对象
[UIView setAnimationDelegate:(nullable id)];
设置动画将开始时代理对象执行的SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
设置动画延迟执行的时间
[UIView setAnimationDelay:(NSTimeInterval)];
设置动画的重复次数
[UIView setAnimationRepeatCount:(float)];
设置动画的曲线
[UIView setAnimationCurve:(UIViewAnimationCurve)];
typedef enum {
UIViewAnimationCurveEaseInOut, // 慢进慢出(默认值)
UIViewAnimationCurveEaseIn, // 慢进
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 匀速
} UIViewAnimationCurve;
设置是否从当前状态开始播放动画
[UIView setAnimationBeginsFromCurrentState:YES];
假设上一个动画正在播放,且尚未播放完毕,我们将要进行一个新的动画:
当为YES时:动画将从上一个动画所在的状态开始播放
当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)
设置动画是否继续执行相反的动画
[UIView setAnimationRepeatAutoreverses:(BOOL)];
是否禁用动画效果(对象属性依然会被改变,只是没有动画效果
[UIView setAnimationsEnabled:(BOOL)];
设置视图的过渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
//第一个参数
typedef enum {
UIViewAnimationTransitionNone, //不使用动画
UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页
UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页
UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页
UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页
} UIViewAnimationTransition;
//第二个参数,需要过渡效果的View
//第三个参数,是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染
代码例子
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//触摸点
UITouch *tuch = touches.anyObject;
CGPoint point = [tuch locationInView:self.view];
//开始动画
[UIView beginAnimations:@"testAnimation" context:nil];
[UIView setAnimationDuration:3.0];
[UIView setAnimationDelegate:self];
//设置动画将开始时代理对象执行的SEL
[UIView setAnimationWillStartSelector:@selector(animationDoing)];
//设置动画延迟执行的时间
[UIView setAnimationDelay:0];
[UIView setAnimationRepeatCount:MAXFLOAT];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//设置动画是否继续执行相反的动画
[UIView setAnimationRepeatAutoreverses:YES];
self.redView.center = point;
self.redView.transform = CGAffineTransformMakeScale(1.5, 1.5);
self.redView.transform = CGAffineTransformMakeRotation(M_PI);
//结束动画
[UIView commitAnimations];
}
1.2Block
ios4.0以后增加了Block动画块,提供了更简洁的方式来实现动画.日常开发中一般也是使用Block形式创建动画。最简洁的Block动画:包含时间和动画:
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
}];
** 带有动画提交回调的Block动画**
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画执行提交后的操作
}];
可以设置延时时间和过渡效果的Block动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
delay:(NSTimeInterval) //动画延迟执行的时间
options:(UIViewAnimationOptions) //动画的过渡效果
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画执行提交后的操作
}];
//可以组合使用
typedef enum {
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn //时间曲线,慢进
UIViewAnimationOptionCurveEaseOut //时间曲线,慢出
UIViewAnimationOptionCurveLinear //时间曲线,匀速
UIViewAnimationOptionTransitionNone //转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页
} UIViewAnimationOptions;
Spring动画:iOS7.0以后新增了Spring动画(IOS系统动画大部分采用Spring Animation, 适用所有可被添加动画效果的属性)
[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
usingSpringWithDamping:(CGFloat)//震动效果,范围0~1,数值越小震动效果越明显
initialSpringVelocity:(CGFloat)//初始速度,数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行提交后的操作
}];
Keyframes动画:iOS7.0后新增了关键帧动画,支持属性关键帧,不支持路径关键帧
[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOL finished) {
//动画执行提交后的操作
}];
//可组合使用:
typedef enum {
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀
} UIViewKeyframeAnimationOptions;
增加关键帧方法:
[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间(占总时间的比例)
relativeDuration:(double) //动画持续时间(占总时间的比例)
animations:^{
//执行的动画
}];
转场动画:从旧视图到新视图的动画效果
[UIView transitionFromView:(nonnull UIView *) toView:(nonnull UIView *) duration:(NSTimeInterval) options:(UIViewAnimationOptions) completion:^(BOOL finished) {
//动画执行提交后的操作
}];
在该动画过程中,fromView 会从父视图中移除,并将 toView 添加到父视图中,注意转场动画的作用对象是父视图(过渡效果体现在父视图上)。调用该方法相当于执行下面两句代码:
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
单个视图的过渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行提交后的操作
}];
代码例子
[UIView animateWithDuration:3.0 animations:^{
self.redView.center = point;
self.redView.transform = CGAffineTransformMakeScale(1.5, 1.5);
self.redView.transform = CGAffineTransformMakeRotation(M_PI);
} completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 animations:^{
self.redView.frame = CGRectMake(100, 100, 100, 100);
self.redView.transform = CGAffineTransformMakeScale(1 / 1.5,1 / 1.5);
self.redView.transform = CGAffineTransformMakeRotation(M_PI);
}];
}];