在 iOS 中实现 AnticipateOvershootInterpolator 动画

Posted 2023-03-13

【中文标题】在 iOS 中实现 AnticipateOvershootInterpolator 动画

【英文标题】：Achieve AnticipateOvershootInterpolator animation in iOS

【发布时间】：2017-04-03 22:09:25

【问题描述】：

我有一组需要动画的 UISlider 控件，从一个值到另一个值。

对动画的要求是它需要匹配（尽可能接近）来自android平台的AnticipateOvershootInterpolator的效果。AnticipateOvershootInterpolator 的文档提到：

一个插值器，改变开始向后然后向前抛出 并超过目标值，最后回到最终 价值。

Here is a video 带有动画，取自this blog。

这是我现有的结构。对于这个问题，重点将放在 1 个 UISlider 上。

[UIView animateWithDuration:1.0
                      delay:1.0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^
                     [self.slider setValue:100 animated:YES];
                  completion:^(BOOL finished) 
                     if (finished) 
                         //some other stuff
                     
];

我希望为options 参数（我的代码中的UIViewAnimationOptionCurveEaseOut，遗憾的是与所需的效果不匹配）找到一个合适的值来匹配AnticipateOvershootInterpolator 效果。 我也知道用animateWithDuration方法可能无法达到这种效果，因此欢迎任何建议。

如何在ios平台上实现AnticipateOvershootInterpolator效果？

【参考方案1】：

如果你想用 UIView 动画来实现它，那么你最好的选择应该是关键帧动画

 UIView.animateKeyframes(withDuration: 0.8, delay: 0, options: [], animations:  
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: 
        // start animation update your values here
    )
    UIView.addKeyframe(withRelativeStartTime: 0.24, relativeDuration: 0.25, animations:  
        // update the postion values here
    )

    // continue adding at least 2 more keyframes with relative start and change your values as you like them
, completion: nil)

制作这样的动画，甚至做得更好。你必须研究 UIKit Dynamics

// self.view can be any view 
let animator = UIDynamicAnimator(referenceView: self.view)

它有很多有用的选项 你必须研究 UIKit 的动态行为

UIGravityBehavior UIFieldBehavior UISnapBehavior

在 UIFieldBehaviour 中你有很多有用的行为，你应该特别注意的是 ElectricField 也使用 UISnapBehavior 的东西

【参考方案2】：

您可以通过首先制作一个减少值（需要动画）的常规动画来创建预期效果，然后在该完成块中添加 animate​With​Duration:​delay:​using​Spring​With​Damping:​initial​Spring​Velocity:​options:​animations:​completion 以使滑块值具有过冲效果:)

这样的事

[self.slider setValue:30 animated:NO];

[UIView animateWithDuration:1.0
                      delay:1.0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^
                     [self.slider setValue:25 animated:YES];
                completion:^(BOOL finished) 
                   if (finished) 
                       [UIView animateWithDuration:duration 
                                             delay:0 
                            usingSpringWithDamping:0.5
                             initialSpringVelocity:0.0f 
                                           options:0 
                                        animations:^
                                            [self.slider setValue:80 animated:NO];
                                       completion:nil];
                 
];

希望它有效:)