在 iOS 中实现 AnticipateOvershootInterpolator 动画答案

【问题标题】：Achieve AnticipateOvershootInterpolator animation in iOS在 iOS 中实现 AnticipateOvershootInterpolator 动画
【发布时间】：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效果？

【问题讨论】：

标签： ios animation uislider

【解决方案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】：

您可以通过首先制作一个减少值（需要动画）的常规动画来创建预期效果，然后在该完成块中添加 animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity: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];
                 }
}];

希望它有效:)

【讨论】：