iOS开发 UIView Animation总结
2018-11-22 本文已影响0人
本本的开心牧场
最近购入了某米的一台安卓机，使用了一段时间安卓系统后，发现iOS系统的动画效果还是很好的。好吧进入正题
UIView Animation实际上是对Core Animation(核心动画)的封装.使用UIView动画十分简单
UIView动画可以设置的动画属性
frameboundscentertransformalphabackgroundColorcontentStretch
1.基本动画
最简单的动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
}];
带有动画完成回调的Block动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
可设置延迟时间和过渡效果的Block动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
delay:(NSTimeInterval) //动画延迟执行的时间
options:(UIViewAnimationOptions) //动画的过渡效果
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
UIViewAnimationOptions动画效果枚举
动画效果相关
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //动画无限重复
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快 // default
UIViewAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快
UIViewAnimationOptionCurveEaseOut //时间曲线函数，由快到慢
UIViewAnimationOptionCurveLinear //时间曲线函数，匀速
转场动画相关
UIViewAnimationOptionTransitionNone //无转场动画 // default
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转
UIViewAnimationOptionTransitionCurlUp //上卷转场
UIViewAnimationOptionTransitionCurlDown //下卷转场
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
2.Spring(弹簧)动画
[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
usingSpringWithDamping:(CGFloat)// 弹簧的阻尼，范围0~1，数值越小震动效果越明显
initialSpringVelocity:(CGFloat)//弹簧的速率，数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
3.Keyframes关键帧动画
[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
增加关键帧的方法
[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间（占总时间的比例）
relativeDuration:(double) //动画持续时间（占总时间的比例）
animations:^{
//执行的动画
}];
UIViewKeyframeAnimationOptions的枚举值
UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸 UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewKeyframeAnimationOptionRepeat //动画无限重复
UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
<----关键帧动画独有---->
UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。
UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。
UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。
UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些..
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
关键帧动画栗子🌰
// 关键帧动画
[UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0/5 animations:^{
CGRect rect = self.imageView.frame;
rect.origin.x += 70;
self.imageView.frame = rect;
}];
[UIView addKeyframeWithRelativeStartTime:1.0/5 relativeDuration:1.0/5 animations:^{
CGRect rect = self.imageView.frame;
rect.origin.x += 70;
rect.origin.y += 70;
self.imageView.frame = rect;
self.imageView.alpha = 0.7;
}];
[UIView addKeyframeWithRelativeStartTime:2.0/5 relativeDuration:1.0/5 animations:^{
CGRect rect = self.imageView.frame;
rect.origin.x += 70;
rect.origin.y += 70;
self.imageView.frame = rect;
self.imageView.alpha = 0.7;
}];
[UIView addKeyframeWithRelativeStartTime:3.0/5 relativeDuration:1.0/5 animations:^{
CGRect rect = self.imageView.frame;
// rect.origin.x += 70;
rect.origin.y += 70;
self.imageView.frame = rect;
}];
[UIView addKeyframeWithRelativeStartTime:4.0/5 relativeDuration:1.0/5 animations:^{
CGRect rect = self.imageView.frame;
// rect.origin.x += 70;
rect.origin.x += 70;
self.imageView.frame = rect;
self.imageView.alpha = 1.0;
}];
} completion:^(BOOL finished) {
self.imageView.frame = CGRectMake(0, 0, 100, 100);
}];
4.转场动画
单个视图的过渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
从旧视图转到新视图的动画效果
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
fromView 会从父视图中移除，并将toView 添加到父视图中
