iOS ~ UIView Animation动画
2022-07-19 本文已影响0人
阳光下的叶子呵
1. UIView属性动画
常用方法animateWithDuration
duration，动画时间
delay，动画在延迟多久之后执行
options，动画的展示方式
animations，动画代码
completion，动画完成后代码
// 动画时间，，options，completion
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion)
// delay = 0.0, options = 0, completion = NULL
+ (void)animateWithDuration:(NSTimeInterval)duration
animations:(void (^)(void))animations)
// delay = 0.0, options = 0
+ (void)animateWithDuration:(NSTimeInterval)duration
animations:(void (^)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion)
1.1 可实现动画的属性
frame，实现移动的动画效果
bounds，实现内部子控件移动的动画效果
center，实现移动的动画效果
alpha，实现淡入淡出的动画效果
backgroundColor，实现背景色渐变的动画效果
transform，实现移动、缩放、旋转的动画效果，详见iOS CGAffineTransform仿射变换
frame属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.frame = CGRectMake(20, 80, 240, 240);
} completion:nil];
20210510175210383.gif
bounds属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.bounds = CGRectMake(30, 30, 160, 160);
} completion:nil];
20210510175716160.gif
center属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.center = CGPointMake(160, 220);
} completion:nil];
20210510175837234.gif
alpha属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.alpha = 0.2;
} completion:nil];
20210510175915558.gif
backgroundColor属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.backgroundColor = [UIColor blueColor];
} completion:nil];
2021051017593527.gif
transform属性
[UIView animateWithDuration:1 animations:^(void) {
self.animationView.transform = CGAffineTransformMakeRotation(M_PI_4);
} completion:nil];
20210510175952322.gif
1.2 options动画的展示方式
options是UIViewAnimationOptions，主要分为3种
动画效果
| 值 | 说明 |
|---|---|
| UIViewAnimationOptionLayoutSubviews | 提交动画的时候布局子控件，表示子控件将和父控件一同动画。 |
| UIViewAnimationOptionAllowUserInteraction | 动画时允许用户交流，比如触摸 |
| UIViewAnimationOptionBeginFromCurrentState | 从当前状态开始动画 |
| UIViewAnimationOptionRepeat | 动画无限重复 |
| UIViewAnimationOptionAutoreverse | 执行动画回路,前提是设置动画无限重复 |
| UIViewAnimationOptionOverrideInheritedDuration | 忽略外层动画嵌套的执行时间 |
| UIViewAnimationOptionOverrideInheritedCurve | 忽略外层动画嵌套的时间变化曲线 |
| UIViewAnimationOptionAllowAnimatedContent | 通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照 |
| UIViewAnimationOptionShowHideTransitionViews | 用显隐的方式替代添加移除图层的动画效果 |
| UIViewAnimationOptionOverrideInheritedOptions | 忽略嵌套继承的选项 |
动画运行加速
| 值 | 说明 |
|---|---|
| UIViewAnimationOptionCurveEaseInOut | 由慢到快再到慢 |
| UIViewAnimationOptionCurveEaseIn | 由慢到快 |
| UIViewAnimationOptionCurveEaseOut | 由快到慢 |
| UIViewAnimationOptionCurveLinear | 匀速 |
分别采用四种加速模式UIViewAnimationOptionCurveEaseInOut， UIViewAnimationOptionCurveEaseIn， UIViewAnimationOptionCurveEaseOut， UIViewAnimationOptionCurveLinear
20210511101157683.gif
转场动画
| 值 | 说明 | |
|---|---|---|
| UIViewAnimationOptionTransitionNone | 无转场动画 | |
| UIViewAnimationOptionTransitionFlipFromLeft | 转场从左翻转 | |
| UIViewAnimationOptionTransitionFlipFromRight | 转场从右翻转 | |
| UIViewAnimationOptionTransitionCurlUp | 上卷转场 | |
| UIViewAnimationOptionTransitionCurlDown | 下卷转场 | |
| UIViewAnimationOptionTransitionCrossDissolve | 转场交叉消失 | |
| UIViewAnimationOptionTransitionFlipFromTop | 转场从上翻转 | |
| UIViewAnimationOptionTransitionFlipFromBottom | 转场从下翻转 |
1.3 弹簧效果
弹簧效果的方法多了两个参数dampingRatio和velocity
+ (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;
dampingRatio参数的值为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。
分别设置为0.2、0.5和1，显示如下:
20210511102040426.gif
velocity参数表示初始的速度，数值越大一开始移动越快。
分别设置为5、10和20，效果如下:
20210511102325668.gif
2. UIView过渡动画
当一个视图的内容需要变化时，可以使用过渡动画。
+ (void)transitionWithView:(UIView *)view
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^ __nullable)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion);
view是参与转换的视图，options是UIViewAnimationOptions类型，
UIViewAnimationOptionTransitionCurlUp和 |
UIViewAnimationOptionTransitionCurlDown |
|---|---|
20210511141507722.gif
|
20210511141544148.gif
|
UIViewAnimationOptionTransitionCrossDissolve |
||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
20210511141634548.gif
|
UIViewAnimationOptionTransitionFlipFromLeft和 |
UIViewAnimationOptionTransitionFlipFromRight |
|---|---|
20210511142132839.gif
|
20210511142141969.gif
|
UIViewAnimationOptionTransitionFlipFromTop和 |
UIViewAnimationOptionTransitionFlipFromBottom |
|---|---|
20210511142226598.gif
|
20210511142234406.gif
|
还有一个过渡动画的方法，在动画过程中，首先将fromView从父视图中删除，然后将toView添加，就是做了一个替换操作。
+ (void)transitionFromView:(UIView *)fromView
toView:(UIView *)toView
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
completion:(void (^ __nullable)(BOOL finished))completion);
3. UIView关键帧动画
duration，总持续时间
options，枚举UIViewKeyframeAnimationOptions
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);
options可以指定动画效果:
| 值 | 说明 |
|---|---|
| UIViewKeyframeAnimationOptionLayoutSubviews | 提交动画的时候布局子控件，表示子控件将和父控件一同动画。 |
| UIViewKeyframeAnimationOptionAllowUserInteraction | 动画时允许用户交流，比如触摸 |
| UIViewKeyframeAnimationOptionBeginFromCurrentState | 从当前状态开始动画 |
| UIViewKeyframeAnimationOptionRepeat | 动画无限重复 |
| UIViewKeyframeAnimationOptionAutoreverse | 执行动画回路,前提是设置动画无限重复 |
| UIViewKeyframeAnimationOptionOverrideInheritedDuration | 忽略外层动画嵌套的执行时间 |
| UIViewKeyframeAnimationOptionOverrideInheritedOptions | 忽略外层动画嵌套的时间变化曲线 |
| UIViewKeyframeAnimationOptionCalculationModeLinear | 选择使用一个简单的线性插值计算的时候关键帧之间的值 |
| UIViewKeyframeAnimationOptionCalculationModeDiscrete | 选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值 |
| UIViewKeyframeAnimationOptionCalculationModePaced | 选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画 |
| UIViewKeyframeAnimationOptionCalculationModeCubic | 选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值 |
| UIViewKeyframeAnimationOptionCalculationModeCubicPaced | 选择计算中间帧使用立方计划而忽略的时间属性动画 |
示例代码
[UIView animateKeyframesWithDuration:1 delay:0 options:0 animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.2 animations:^{
self.magentaView.frame = CGRectMake(120, 100, 160, 160);
}];
[UIView addKeyframeWithRelativeStartTime:0.2 relativeDuration:0.7 animations:^{
self.magentaView.frame = CGRectMake(160, 240, 80, 80);
}];
[UIView addKeyframeWithRelativeStartTime:0.7 relativeDuration:1 animations:^{
self.magentaView.frame = CGRectMake(20, 100, 160, 160);
}];
} completion:nil];
