ios UIView animateWithDuration 怎么匀速 uiview animation原理

转载

mob6454cc7416d1 2024-01-08 21:54:06

文章标签 控件 ide 嵌套 文章分类 iOS 移动开发

今天总结一下UIView动画就是 UiView动画是基于高层API封装进行封装的,对UIView的属性进行修改时候所产生的动画.

基本动画

下面两种方法是最常用的两种.

+ (void)animateWithDuration:(NSTimeInterval)duration

animations:(void (^)(void))animations

animations 修改View属性的Block 下面是支持修改的属性

@property frame

@property bounds

@property center

@property transform

@property alpha

@property backgroundColor

@property contentStretch

+ (void)animateWithDuration:(NSTimeInterval)duration

animations:(void (^)(void))animations

completion:(void (^ __nullable)(BOOL finished))completion

completion 动画完成block

BOOL finished 表示动画是否完成

继续

+ (void)animateWithDuration:(NSTimeInterval)duration

delay:(NSTimeInterval)delay

options:(UIViewAnimationOptions)options

animations:(void (^)(void))animations

completion:(void (^ __nullable)(BOOL finished))completion

delay 延迟执行时间

options 动画效果枚举 ,下面是全部枚举的说明

动画效果相关

UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。

UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸

UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画

UIViewAnimationOptionRepeat //动画无限重复

UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复

UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间

UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线

UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照

UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果

UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项

时间函数曲线相关

UIViewAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快

UIViewAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快

UIViewAnimationOptionCurveEaseOut //时间曲线函数，由快到慢

UIViewAnimationOptionCurveLinear //时间曲线函数，匀速

转场动画相关的

UIViewAnimationOptionTransitionNone //无转场动画

UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转

UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转

UIViewAnimationOptionTransitionCurlUp //上卷转场

UIViewAnimationOptionTransitionCurlDown //下卷转场

UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失

UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转

UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转

弹簧动画

+ (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 弹簧的阻尼如果为1动画则平稳减速动画没有振荡。这里值为 0~1

velocity 弹簧的速率。数值越小，动力越小，弹簧的拉伸幅度就越小。反之相反。比如：总共的动画运行距离是200 pt，你希望每秒 100pt 时，值为 0.5；

例子

[UIView animateWithDuration:2
                      delay:2
     usingSpringWithDamping:.5
      initialSpringVelocity:.5
                    options:UIViewAnimationOptionRepeat
                animations:^{
   view.center = self.view.center;
} completion:^(BOOL finished) {   
}];

过渡动画

+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                  options:(UIViewAnimationOptions)options
                  animations:(void (^ __nullable)(void))animations 
                  completion:(void (^ __nullable)(BOOL finished))completion

view 参与转换的视图

例子

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) {        
}];

继续

+ (void)transitionFromView:(UIView *)fromView
                    toView:(UIView *)toView 
                    duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                    completion:(void (^ __nullable)(BOOL finished))completion

fromView 一开始的视图

toView 转换后的视图

例子

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) {

}];

关键帧动画

+ (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

duration 总持续时间

UIViewKeyframeAnimationOptions options 枚举下面说明

frameStartTime 相对开始时间

frameDuration 相对持续时间

例子

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) {
}];

UIViewKeyframeAnimationOptions

UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。

UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸 UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画

UIViewKeyframeAnimationOptionRepeat //动画无限重复

UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复

UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间

UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项

关键帧动画独有

UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。

UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。

UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。

UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。这个动画好像会更圆滑一些..

UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。

剩下两个操作

+ (void)performSystemAnimation:(UISystemAnimation)animation 
                       onViews:(NSArray *)views
                       options:(UIViewAnimationOptions)options 
                       animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation

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) {
    }];

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。