首页 > 开发 > iOS > 正文

UIView 动画 UIView Animation 总结

2017-07-12 18:07:31  来源:极客头条

今天总结一下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 动画完成blockBOOL 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~1velocity 弹簧的速率。数值越小,动力越小,弹簧的拉伸幅度就越小。反之相反。比如:总共的动画运行距离是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<UIView *> *)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) {    }];
结束

就先写到这里吧 如果有用的话请点个喜欢..