文章分享至我的个人技术博客: https://cainluo.github.io/14972802953896.html

UIViewPropertyAnimator

我们之前在做基础动画效果的时候, 基本上的代码都是:

    [UIView animateWithDuration:1
                          delay:0
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         
                         // Do Something
                     } completion:^(BOOL finished) {
                         
                         // Do Something
                     }];

一般都会自己去封装一下, 免得大串代码在这里恶心....

但现在不用了咯, 自从苹果爸爸在iOS 10推出了一个框架UIViewPropertyAnimator, 可以更简洁的去省略很多代码, 我这里是Objective-C版本的, 如果想要看Swift版本, 可以到这里去看Swift版本

创建项目

废话就少说了, 直接看代码吧:

对外开放的方法有:

用UIViewPropertyAnimator运行动画的代码:

效果:

看完之后估计很多人都会说, 这个有什么的, 之前的那个API也可以搞定, 那我们就继续往下看看吧.

为什么要用UIViewPropertyAnimator

这里我找到了一段比较官方的说法:

UIViewPropertyAnimator 的 API 设计得很完善，可扩展性也很好。它cover了传统 UIView animation动画的绝大部分功能，并且大大增强了你对动画过程的掌控能力。具体来说，你可以在动画过程中任意时刻暂停，可以随后再选择继续，甚至还能在动画过程中动态改变动画的属性（例如，本来动画终点在屏幕左下角的，可以在动画过程中把终点改到右上角）。

看完介绍之后, 到底是不是酱紫呢, 我们来加一句代码看看:

    // 添加多一个渐渐消失的动画
    [propertyAnimator addAnimations:^{
        self.basicsView.alpha = 0;
    }];

效果:

除了这个, 如果要添加动画完成后的处理, 甚至是在动画进行中的一些操作也是可以的:

    [propertyAnimator addCompletion:^(UIViewAnimatingPosition finalPosition) {
        
        NSLog(@"动画结束咯");
    }];
    
    [propertyAnimator addCompletion:^(UIViewAnimatingPosition finalPosition) {
        
        switch (finalPosition) {
                
            case UIViewAnimatingPositionStart:
                
                NSLog(@"动画开始了");
                
                break;
                
            case UIViewAnimatingPositionCurrent:
                
                NSLog(@"动画结束咯");

                break;
                
            case UIViewAnimatingPositionEnd:
                
                NSLog(@"正在执行动画");

                break;
            default:
                break;
        }
    }];

添加个拖拽器

UIViewPropertyAnimator不只是可以写好了规定的动画, 也可以和其他控件一起配合使用, 比如UISlider, 为了方便, 我就把UIViewPropertyAnimator *propertyAnimator设置成一个全局属性:

@property (nonatomic, strong) UIViewPropertyAnimator *propertyAnimator;

然后开始实现我们的拖拽动画:

- (void)addSliderWithSuperView {
    
    self.propertyAnimator = [[UIViewPropertyAnimator alloc] initWithDuration:5
                                                                       curve:UIViewAnimationCurveEaseIn
                                                                  animations:^{
                                                                                         
                                                                      [self.basicsView moveViewToBottmRight];
                                                                  }];

    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 40)];
    
    [slider addTarget:self
               action:@selector(sliderValueChanged:)
     forControlEvents:UIControlEventValueChanged];
    
    [self.basicsView addSubview:slider];
}

- (void)sliderValueChanged:(UISlider *)slider {
    
    self.propertyAnimator.fractionComplete = slider.value;
}

效果图:

反向动画

如果你觉得就酱紫结束了, 那就太没意思了:

/**
 反向动画
 */
- (void)viewAnimationCurveEaseInOut {
    
    UIButton *resetButton = [[UIButton alloc] initWithFrame:CGRectMake((self.view.frame.size.width / 2) - 100, 100, 200, 50)];
    
    [resetButton setTitleColor:[UIColor blackColor]
                      forState:UIControlStateNormal];
    [resetButton setTitle:@"开始反向动画"
                 forState:UIControlStateNormal];
    [resetButton addTarget:self
                    action:@selector(resetButtonAction)
          forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:resetButton];
    
    self.propertyAnimator = [[UIViewPropertyAnimator alloc] initWithDuration:3
                                                                       curve:UIViewAnimationCurveEaseInOut
                                                                  animations:^{
                                                                      
                                                                      [self.basicsView moveViewToBottmRight];
                                                                  }];
    [self.propertyAnimator startAnimation];
}

/**
 按钮点击事件
 */
- (void)resetButtonAction {
    
    self.propertyAnimator.reversed = YES;
}

效果:

UISpringTimingParameters

这里还可以配合着UISpringTimingParameters来使用:

- (void)springTimingParameters {
    
    weakSelf(weakSelf);

    UISpringTimingParameters *springTimingParameters = [[UISpringTimingParameters alloc] initWithDampingRatio:0.3
                                                                                              initialVelocity:CGVectorMake(0, 0)];
    
    self.propertyAnimator = [[UIViewPropertyAnimator alloc] initWithDuration:4
                                                            timingParameters:springTimingParameters];
    
    [self.propertyAnimator addAnimations:^{
        
                            [weakSelf.basicsView moveViewToBottmRight];
    } delayFactor:3.0];
    
    [self.propertyAnimator startAnimation];
}

效果:

UICubicTimingParameters

这里也可以配合着UICubicTimingParameters来玩耍~~

/**
 UICubicTimingParameters 动画
 */
- (void)cubicTimingParameters {
    
    weakSelf(weakSelf);

    UICubicTimingParameters *cubicTimingParameters = [[UICubicTimingParameters alloc] initWithControlPoint1:CGPointMake(0.05, 0.95)
                                                                                              controlPoint2:CGPointMake(0.15, 0.95)];
    
    self.propertyAnimator = [[UIViewPropertyAnimator alloc] initWithDuration:4
                                                            timingParameters:cubicTimingParameters];
    
    
    [self.propertyAnimator addAnimations:^{
        
        [weakSelf.basicsView moveViewToBottmRight];
    } delayFactor:0.25];
    
    [self.propertyAnimator startAnimation];
}

效果:

大概就介绍到这里吧, 更复杂的玩法就有待各位大神去慢慢挖掘了~~

工程地址

项目地址: https://github.com/CainRun/iOS-10-Characteristic/tree/master/4.UIViewPropertyAnimator

最后

码字很费脑, 看官赏点饭钱可好