UIView动画总结

充小云
2023-12-01

UIView动画总结

1.大小动画(改变frame)

-(void)changeFrame{

    CGRect originalRect = self.anView.frame;
    CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80);

    [UIView animateWithDuration:1 animations:^{
        self.anView.frame = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.frame = originalRect;
        }];

    }];
}

2.拉伸动画(改变bounds)

-(void)changeBounds{

    CGRect originalBounds = self.anView.bounds;
    //尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高
    CGRect rect = CGRectMake(0, 0, 300, 120);

    [UIView animateWithDuration:1 animations:^{
    self.anView.bounds = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.bounds = originalBounds;
        }];

    }];
}

3.中心位置动画(改变Center)

-(void)changeCenter{

    CGPoint originalPoint = self.anView.center;
    CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170);

    [UIView animateWithDuration:0.3 animations:^{
        self.anView.center = point;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.center = originalPoint;
        }];

    }];
}

4.旋转动画(改变transform)

CGAffineTransformMakeRotation(angle)旋转
CGAffineTransformMakeScale(sx,sy)缩放
CGAffineTransformMakeTranslation(tx,ty)移动

-(void)transform{
    CGAffineTransform originalTransform = self.anView.transform;
    [UIView animateWithDuration:2 animations:^{
        //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放
        //self.anView.transform = CGAffineTransformMakeTranslation(60, -60);//位置移动dis_x,dis_y
        self.anView.transform = CGAffineTransformMakeRotation(4.0f);

    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.transform = originalTransform;

        }];
    }];
}
  • CGAffineTransformMakeRotation(angle)旋转
    angle是弧度 M_PI 是3.1415926,会顺时针旋转180。
  • 旋转弧度始终 小余半圈,如果大于PI则会逆时针旋转angle-PI的弧度。

如果要一直旋转,可以设置定时器。

[NSTimer scheduledTimerWithTimeInterval: 0.01 target: self selector:@selector(transformAction) userInfo: nil repeats: YES];

-(void)transformAction {
  angle = angle + 0.01;//angle角度 double angle;
  if (angle > 6.28) {//大于 M_PI*2(360度) 角度再次从0开始
      angle = 0;
  }
  CGAffineTransform transform=CGAffineTransformMakeRotation(angle);
  self.anView.transform = transform;
}

5.透明变化(改变alpha)

-(void)alpha{
    [UIView animateWithDuration:2 animations:^{
        self.anView.alpha = 0.3;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.alpha = 1;
        }];
    }];
}

6.背景颜色变化Keyframes动画(改变background)

-(void)changeBackground{

    [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor whiteColor];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];

UIView动画已经具备高级的方法来创建动画,而且可以更好地理解和构建动画。IOS7以后苹果新加了一个animateKeyframesWithDuration的方法,我们可以使用它来创建更多更复杂更酷炫的动画效果,而不需要去使用到核心动画(CoreAnimatino)。

/**
 *  添加关键帧方法
 *
 *  @param duration   动画时长
 *  @param delay      动画延迟
 *  @param options    动画效果选项
 *  @param animations 动画执行代码
 *  @param completion 动画结束执行代码
 */
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                               delay:(NSTimeInterval)delay
                             options:(UIViewKeyframeAnimationOptions)options
                          animations:(void (^)(void))animations
                          completion:(void (^)(BOOL finished))completion;

添加关键帧方法:

/**
 *  添加关键帧
 *
 *  @param frameStartTime 动画相对开始时间
 *  @param frameDuration  动画相对持续时间
 *  @param animations     动画执行代码
 */
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime
                        relativeDuration:(double)frameDuration
                              animations:(void (^)(void))animations;

以上说的相对时间,也就是说:“它们自身会根据动画总持续时长自动匹配其运行时长”。

7.Spring动画

在IOS7开始,系统动画效果广泛应用Spring Animation :

-(void)springAnimation{
    CGRect originalRect = self.anView.frame;
    CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120);

    [UIView animateWithDuration:0.4//动画时长
                          delay:0 //动画延迟
         usingSpringWithDamping:0.5 //类似弹簧的震动效果 0~1
          initialSpringVelocity:4  //初始速度
                        options:UIViewAnimationOptionCurveLinear//动画过度效果
                     animations:^{

        self.anView.frame = rect;

    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{
           self.anView.frame = originalRect;
        } completion:^(BOOL finished) {

        }];
    }];

}

8.转场动画

-(void)transitionAnimation{
    [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        //self.anView.backgroundColor = [UIColor blueColor];
    } completion:^(BOOL finished) {
        [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
        //self.anView.backgroundColor = [UIColor greenColor];
        } completion:^(BOOL finished) {

        }];
    }];
}

9.关于参数option选择说明

1).UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn //时间曲线,慢进
UIViewAnimationOptionCurveEaseOut //时间曲线,慢出
UIViewAnimationOptionCurveLinear //时间曲线,匀速

UIViewAnimationOptionTransitionNone //转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页

2).UIViewKeyframeAnimationOptions

UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀
就UIView的动画而言,UIViewKeyframeAnimationOptions紧在Keyframes,其余的都是UIViewAnimationOptions。

10.常用方法 补充总结

1.UIView(UIViewAnimation)

[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间

 @interface UIView(UIViewAnimation)
 //说明需要执行动画
 + (void)beginAnimations:(nullableNSString *)animationID context:(nullablevoid *)context;  
 //提交动画
 + (void)commitAnimations;                                                
 //设置动画代理对象,当动画开始或者结束时会发消息给代理对象
 + (void)setAnimationDelegate:(nullableid)delegate;
 //当动画即将开始时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector                        
 + (void)setAnimationWillStartSelector:(nullableSEL)selector;// default = NULL.
 //当动画结束时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector
 + (void)setAnimationDidStopSelector:(nullableSEL)selector;
 //设置动画持续时间秒为单位              
 + (void)setAnimationDuration:(NSTimeInterval)duration;// default = 0.2
 //动画延迟delay秒后再开始
 + (void)setAnimationDelay:(NSTimeInterval)delay;// default = 0.0
 //动画的开始时间,默认为now
 + (void)setAnimationStartDate:(NSDate *)startDate;// default = now ([NSDate date])
 //动画的节奏控制,默认是匀速
 + (void)setAnimationCurve:(UIViewAnimationCurve)curve;// default = UIViewAnimationCurveEaseInOut
 //动画的重复次数
 + (void)setAnimationRepeatCount:(float)repeatCount;// default = 0.0.  May be fractional
 //如果设置为YES,代表动画每次重复执行的效果会跟上一次相反
 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;// default = NO.
 //YES如果动画需要从他们当前状态开始播放。否则为NO。如果设置为YES那么当动画在运行过程中,当前视图的位置将会作为新的动画的开始状态。如果设置为NO,当前动画结束前新动画将使用视图最後状态的位置作为开始状态。这个方法将不会做任何事情如果动画没有运行或者没有在动画块外调用。使用beginAnimations:context:类方法来开始并用commitAnimations类方法来结束动画块。默认值是NO。
 + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;
 //设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存,性能较好
 + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;  
 //如果是YES那就激活动画;否则就是NO.当动画参数没有被激活那么动画属性的改变将被忽略。默认动画是被激活的
 + (void)setAnimationsEnabled:(BOOL)enabled;                         
 + (BOOL)areAnimationsEnabled;
 //阻塞动画,一个小但非常有用的新方法[UIView performWithoutAnimation:]。它是一个简单的封装,先检查动画当前是否启用,然后禁止动画,执行块语句,最后重新启用动画。一个需要说明的地方是,它并不会阻塞基于CoreAnimation的动画。
 + (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimationNS_AVAILABLE_IOS(7_0);
 //获得所镶嵌的动画的持续时间
 + (NSTimeInterval)inheritedAnimationDuration NS_AVAILABLE_IOS(9_0);

 @end

2.UIView(UIViewAnimationWithBlocks)

@interface UIView(UIViewAnimationWithBlocks)
  /*
       参数解析:
       duration:动画的持续时间
       delay:动画延迟delay秒后开始
       options:动画的节奏控制
       animations:将改变视图属性的代码放在这个block中
       completion:动画结束后,会自动调用这个block
 */
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^__nullable)(BOOL finished))completionNS_AVAILABLE_IOS(4_0);

  /*
       参数解析:
       duration:动画的持续时间
       animations:将改变视图属性的代码放在这个block中
       completion:动画结束后,会自动调用这个block
 */
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completionNS_AVAILABLE_IOS(4_0);// delay = 0.0, options = 0

  /*
       参数解析:
       duration:动画的持续时间
       animations:将改变视图属性的代码放在这个block中
 */
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animationsNS_AVAILABLE_IOS(4_0);// delay = 0.0, options = 0, completion = NULL

/*
Spring Animation 本质上是一种特殊的动画曲线,自从 iOS 7开始被广泛应用在系统动画中。此外,Spring Animation不只能对位置使用,它适用于所有可被添加动画效果的属性。
        参数解析:
        duration:动画的持续时间
        delay:动画延迟delay秒后开始
        dumping ratio:
                usingSpringWithDamping 的范围为 0.0f 到 1.0f,数值越小「弹簧」的振动效果越明显.
        velocity:
               initialSpringVelocity则表示初始的速度,数值越大一开始移动越快。值得注意的是,初始速度取值较高而时
                                     间较短时,也会出现反弹情况。
       options:动画的节奏控制
       animations:将改变视图属性的代码放在这个block中
       completion:动画结束后,会自动调用这个block
*/
+ (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);
 /*
     参数解析:
     duration:动画的持续时间
     view:需要进行转场动画的视图
     options:转场动画的类型
     animations:将改变视图属性的代码放在这个block中
     completion:动画结束后,会自动调用这个block
 */
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^__nullable)(BOOL finished))completionNS_AVAILABLE_IOS(4_0);
 /*
     方法调用完毕后,相当于执行了下面两句代码:
     // 添加toView到父视图
     [fromView.superview addSubview:toView];
     // 把fromView从父视图中移除
     [fromView.superview removeFromSuperview];

     参数解析:
     duration:动画的持续时间
     options:转场动画的类型
     animations:将改变视图属性的代码放在这个block中
     completion:动画结束后,会自动调用这个block
 */
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

 /*
    //在一组视图上执行指定的系统动画,并可以并行自定义的动画,parallelAnimations就是与系统动画并行的自定义动画
     参数解析:
     animation:系统动画
            views:需要进动画的视图 (数组,可以作用于多个视图)。
     options:转场动画的类型
     animations:将改变视图属性的代码放在这个block中
     completion:动画结束后,会自动调用这个block
 */
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindofUIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^__nullable)(void))parallelAnimations completion:(void (^__nullable)(BOOL finished))completionNS_AVAILABLE_IOS(7_0);

@end

3.UIView (UIViewKeyframeAnimations)

@interface UIView (UIViewKeyframeAnimations)
 /*
    关键帧动画:
    UIView动画已经具备高级的方法来创建动画,而且可以更好地理解和构建动画。IOS7以后苹果新加了一个
         animateKeyframesWithDuration的方法,我们可以使用它来创建更多更复杂更酷炫的动画效果,而不需要去使用到核心动画  
     (CoreAnimatino)。
         *  @param duration   动画时长
         *  @param delay      动画延迟
         *  @param options    动画效果选项
         *  @param animations 动画执行代码
         *  @param completion 动画结束执行代码
*/
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^__nullable)(BOOL finished))completionNS_AVAILABLE_IOS(7_0);
 /*
         *  添加关键帧
         *
         *  @param frameStartTime 动画相对开始时间
         *  @param frameDuration  动画相对持续时间
         *  @param animations     动画执行代码
*/
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);
@end

引用网址:
http://www.cocoachina.com/ios/20161018/17778.html
http://www.tuicool.com/articles/BjMrQne

 类似资料: