iOS动画——基础动画UIView Animation

。。。。没有好的开头,那就直接开始

iOS动画——基础动画UIView Animation_第1张图片
iOS动画

这篇文章我肯可以只看红框圈的,基础动画即可,核心动画将在 iOS动画——核心动画Core Animation中提到

UIView Animation

  1. UIView(UIViewAnimation)

主要使用下面两个方法设置

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
+ (void)commitAnimations; 

具体使用看Demo

#pragma mark -- UIViewAnimation
- (void)startAnimation {
    [UIView beginAnimations:@"UIViewAnimation" context:(__bridge void * _Nullable)(self)];
    [UIView setAnimationDuration:2.0];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationRepeatCount:2];
    [UIView setAnimationRepeatAutoreverses:YES];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView setAnimationDelegate:self];
    self.redView.center = CGPointMake(300, 300);
    [UIView commitAnimations];
}

参数的使用

//    duration : 动画运行时间
+ (void)setAnimationDuration:(NSTimeInterval)duration;
//     delay : 动画开始到执行的时间间隔
+ (void)setAnimationDelay:(NSTimeInterval)delay;   
/* UIViewAnimationCurve 表示动画的变化规律:
     UIViewAnimationCurveEaseInOut: 开始和结束时较慢
     UIViewAnimationCurveEase: 开始时较慢
     UIViewAnimationCurveEaseOut: 结束时较慢
     UIViewAnimationCurveLinear: 整个过程匀速进行
*/
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;              
//    repeatCount:动画重复次数
+ (void)setAnimationRepeatCount:(float)repeatCount;    
//    Autoreverse 执行动画回路,前提是设置动画无限重复
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 
  1. UIView(UIViewAnimationWithBlocks)

主要使用接口

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL
+ (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 NS_AVAILABLE_IOS(7_0);

使用见Demo

#pragma mark -- UIViewAnimationWithBlocks
- (void)animationWithBlocks {
//    duration持续时间,delay延迟时间,UIViewAnimationOptions枚举项和completion动画结束的回调
#if 0
    [UIView animateWithDuration:2.0 animations:^{
        self.redView.center = CGPointMake(300, 300);
    }];
#elif 0
    [UIView animateWithDuration:2.0 animations:^{
        self.redView.center = CGPointMake(300, 300);
    } completion:^(BOOL finished) {
        self.redView.center = CGPointMake(300, 500);
    }];
#elif 0
    [UIView animateWithDuration:3.0
                          delay:2.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
        self.redView.center = CGPointMake(300, 300);
    } completion:^(BOOL finished) {
        self.redView.center = CGPointMake(300, 500);
    }];
#elif 1
//    springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
//    initialSpringVelocity:视图在动画开始时的速度,>= 0。
    [UIView animateWithDuration:3.0
                          delay:1.0
         usingSpringWithDamping:0.2
          initialSpringVelocity:10
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         self.redView.center = CGPointMake(300, 300);
                     } completion:nil];
#endif
}

参数解释

duration :持续时间
delay :延迟时间
UIViewAnimationOptions :枚举项
{
- 动画效果相关
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 
UIViewAnimationOptionRepeat //动画无限重复 
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线 
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照 
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果 
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
- 时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快 
UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快 
UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢 
UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
- 转场动画相关
UIViewAnimationOptionTransitionNone //无转场动画 
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转 
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转 
UIViewAnimationOptionTransitionCurlUp //上卷转场 
UIViewAnimationOptionTransitionCurlDown //下卷转场 
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失 
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转 
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
}
completion :动画结束的回调
springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
initialSpringVelocity:视图在动画开始时的速度,>= 0。

还有两个转场动画,

view: 需要转换的视图
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
fromView: 开始的视图
toView:转换后的视图
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
  1. UIView (UIViewKeyframeAnimations)

关键帧动画

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); 

Demo

#pragma mark -- UIViewKeyframeAnimations
- (void)viewKeyframeAnimations {
#if 0
    [UIView animateKeyframesWithDuration:3.0
                                   delay:1.0
                                 options:UIViewKeyframeAnimationOptionLayoutSubviews
                              animations:^{
                                  self.redView.center = CGPointMake(300, 300);
                              } completion:nil];
#elif 1
    [UIView animateKeyframesWithDuration:3.0
                                   delay:1.0
                                 options:UIViewKeyframeAnimationOptionLayoutSubviews
                              animations:^{
                                  [UIView addKeyframeWithRelativeStartTime:0.8
                                                          relativeDuration:0.2
                                                                animations:^{
                                                                    self.redView.center = CGPointMake(300, 500);
                                                                }];
                              } completion:nil];
#endif
}

参数说明

duration: 持续时间
delay: 等待时间
relativeStartTime:是相对起始时间,表示该关键帧开始执行的时刻在整个动画持续时间中的百分比,取值范围是[0-1]
relativeDuration:是相对持续时间,表示该关键帧占整个动画持续时间的百分比,取值范围也是[0-1]
UIViewKeyframeAnimationOptions:枚举
{
UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 
UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 
UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画 
UIViewKeyframeAnimationOptionRepeat //动画无限重复 
UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的�选项 关键帧动画独有 
UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。 
UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。 
UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。 
UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些.. 
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
}

特别的两个

+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

网上查阅资料:
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) {
                            }];
        
    }

Demo 地址

Core Animation

后续。。。iOS动画——核心动画Core Animation

你可能感兴趣的:(iOS动画——基础动画UIView Animation)