问题 如何重复动画(使用UIViewPropertyAnimator)一定次数?


我想为按钮实现脉动效果,因此需要多次重复弹簧效果,问题是我找不到任何关于提供什么参数的信息以及如何做到这一点

let btnView = sayWordBtn.viewWithTag(0)
    btnView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
    let mass: CGFloat = 2.0 // weight of the object
        let stiffness: CGFloat = 25.0 //elasticity
        let damping: CGFloat = 2*sqrt(mass*stiffness) // point where the system comes to rest in the shortest period of time
        let underDamping: CGFloat = damping * 0.5
        let initialVelocity: CGVector = CGVector.zero
        let springParameters: UISpringTimingParameters = UISpringTimingParameters(mass: mass, stiffness: stiffness, damping: underDamping, initialVelocity: initialVelocity)
        let animationDelay = 3

        let pulseEffect = UIViewPropertyAnimator(duration: 5, timingParameters: springParameters)
        pulseEffect.addAnimations( {[weak self] in
          btnView!.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
          })
        pulseEffect.isReversed = true
        pulseEffect.startAnimation(afterDelay: TimeInterval(animationDelay))

954
2017-09-11 16:01


起源



答案:


iOS 10 介绍一个名为的新对象 UIViewPropertyAnimator。 你可以做同样的事情 UIView.animation 但是为了实现更复杂的动画,苹果为我们提供了帮助 CoreAnimation 框架。

我们为什么要使用它?

因为 UIViewPropertyAnimator 是一个编写良好且高度可扩展的API。它涵盖了许多与'旧式'相同的功能 UIView 动画,但为您提供对动画的细粒度编程控制。这意味着您可以暂停正在进行的动画,如果您愿意,可以在以后重新启动动画,甚至动态修改动画属性(例如将动画的终点更改为屏幕的右上角,如果之前是底部的话 - 剩下)。 我们创建它的一个实例并创建一个动画,如下所示:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.alpha = 0.35 
view.backgroundColor = .red
self.view.addSubview(view)
let newFrame = CGRect(x: 0, y: 0, width: 50, height: 50)
let viewFrameAnimator = UIViewPropertyAnimator(duration: 1.0, 
                                                  curve: .linear, 
                                             animations: { view.frame = newFrame })

现在我们可以使用以下内容与动画进行交互:

viewFrameAnimator.startAnimation..
viewFrameAnimator.stopAnimation..
viewFrameAnimator.finishAnimation(at:..

继续上面的例子:

viewFrameAnimator.startAnimation()

然后,回到 alpha 等于 1,如果我们需要更多动画选项,我们也可以发布 这个  UIViewPropertyAnimator 公开课:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0, 
                                                       delay: 0.0,
                                                     options: [.curveLinear],
                                                  animations: { view.alpha = 1.0 })

让我们添加更多动画选项。现在你知道的不仅仅是这个新对象。

怎么重复一遍?

所以让我们开始解释如何重复动画,例如,如果我们想要重复动画 view.alpha = 1.0 对于 3 时间(你可以看到每次重复输出的小闪光灯..)你应该遵循:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0,
                                                delay: 0.0,
                                                options: [.curveLinear,.repeat],
                                                animations: { UIView.setAnimationRepeatCount(3);view.alpha = 1.0 })

我希望这可以帮到你。


9
2018-01-20 14:36



不是你必须发送的事实 UIView.setAnimationRepeatCount(),基本上是来自旧API的类侧全局设置,有点表明这个新框架实际上并不比旧框架更好或更强大?对于简单的案例,也许更为简洁,但这并不会让我感到优雅或强大。如果UIViewPropertyAnimator像其他动画对象一样有一个repeatCount,这将是“更正确”的东西,IMO。 - Travis Griggs


答案:


iOS 10 介绍一个名为的新对象 UIViewPropertyAnimator。 你可以做同样的事情 UIView.animation 但是为了实现更复杂的动画,苹果为我们提供了帮助 CoreAnimation 框架。

我们为什么要使用它?

因为 UIViewPropertyAnimator 是一个编写良好且高度可扩展的API。它涵盖了许多与'旧式'相同的功能 UIView 动画,但为您提供对动画的细粒度编程控制。这意味着您可以暂停正在进行的动画,如果您愿意,可以在以后重新启动动画,甚至动态修改动画属性(例如将动画的终点更改为屏幕的右上角,如果之前是底部的话 - 剩下)。 我们创建它的一个实例并创建一个动画,如下所示:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.alpha = 0.35 
view.backgroundColor = .red
self.view.addSubview(view)
let newFrame = CGRect(x: 0, y: 0, width: 50, height: 50)
let viewFrameAnimator = UIViewPropertyAnimator(duration: 1.0, 
                                                  curve: .linear, 
                                             animations: { view.frame = newFrame })

现在我们可以使用以下内容与动画进行交互:

viewFrameAnimator.startAnimation..
viewFrameAnimator.stopAnimation..
viewFrameAnimator.finishAnimation(at:..

继续上面的例子:

viewFrameAnimator.startAnimation()

然后,回到 alpha 等于 1,如果我们需要更多动画选项,我们也可以发布 这个  UIViewPropertyAnimator 公开课:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0, 
                                                       delay: 0.0,
                                                     options: [.curveLinear],
                                                  animations: { view.alpha = 1.0 })

让我们添加更多动画选项。现在你知道的不仅仅是这个新对象。

怎么重复一遍?

所以让我们开始解释如何重复动画,例如,如果我们想要重复动画 view.alpha = 1.0 对于 3 时间(你可以看到每次重复输出的小闪光灯..)你应该遵循:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0,
                                                delay: 0.0,
                                                options: [.curveLinear,.repeat],
                                                animations: { UIView.setAnimationRepeatCount(3);view.alpha = 1.0 })

我希望这可以帮到你。


9
2018-01-20 14:36



不是你必须发送的事实 UIView.setAnimationRepeatCount(),基本上是来自旧API的类侧全局设置,有点表明这个新框架实际上并不比旧框架更好或更强大?对于简单的案例,也许更为简洁,但这并不会让我感到优雅或强大。如果UIViewPropertyAnimator像其他动画对象一样有一个repeatCount,这将是“更正确”的东西,IMO。 - Travis Griggs


请用

    pulseEffect.addCompletion({_ in
            // Repeat the logic here
    })

您可以在addCompletion块中重复动画逻辑

func animateView() {
    btnView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
    let mass: CGFloat = 2.0 // weight of the object
    let stiffness: CGFloat = 25.0 //elasticity
    let damping: CGFloat = 2*sqrt(mass*stiffness) // point where the system comes to rest in the shortest period of time
    let underDamping: CGFloat = damping * 0.5
    let initialVelocity: CGVector = CGVector.zero
    let springParameters: UISpringTimingParameters = UISpringTimingParameters(mass: mass, stiffness: stiffness, damping: underDamping, initialVelocity: initialVelocity)
    let animationDelay = 3

    let pulseEffect = UIViewPropertyAnimator(duration: 5, timingParameters: springParameters)
    pulseEffect.addAnimations( {[weak self] in
        self?.btnView!.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        })
    pulseEffect.addCompletion({_ in
        self.animateView()
    })
    pulseEffect.isReversed = true
    pulseEffect.startAnimation(afterDelay: TimeInterval(animationDelay))
}

您还可以添加逻辑以将动画限制为addCompletion块中的特定数字


2
2018-01-17 05:54





无论出于何种原因,他们都无法使用UIPropertyAnimator指定重复计数。你留下了以下选项:

  1. 保留一个计数器并在完成处理程序中重复动画 并递减计数器直到计数器达到0
  2. 动画无限重复,但安排一个计时器,并停止 动画(可选择添加动画以移动到最终 位置)
  3. 调整弹簧参数,以减少阻尼和 更具弹性,你会得到更多的振荡。
  4. 使用旧的UIView.animate方法和旧方法 UIView.setAnimationRepeatCount
  5. 使用CASpringAnimation,因为这是属性动画师正在包装的东西,它确实有重复计数。

1
2018-01-19 06:01





请使用此修改后的代码

let btnView = sayWordBtn.viewWithTag(0)
btnView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
let mass: CGFloat = 2.0 // weight of the object
    let stiffness: CGFloat = 25.0 //elasticity
    let damping: CGFloat = 2*sqrt(mass*stiffness) // point where the system comes to rest in the shortest period of time
    let underDamping: CGFloat = damping * 0.5
    let initialVelocity: CGVector = CGVector.zero
    let springParameters: UISpringTimingParameters = UISpringTimingParameters(mass: mass, stiffness: stiffness, damping: underDamping, initialVelocity: initialVelocity)
    let animationDelay = 3

    let pulseEffect = UIViewPropertyAnimator(duration: 5, timingParameters: springParameters)
    pulseEffect.addAnimations( {[weak self] in
        UIView.setAnimationRepeatCount(3)
        UIView.setAnimationRepeatAutoreverses(true)
        btnView!.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
      })
    pulseEffect.isReversed = true
    pulseEffect.startAnimation(afterDelay: TimeInterval(animationDelay))

0
2018-01-23 07:31





此代码有效:

func usePropertyAnimator(_ reversed: Bool = false) {

    let circleAnimator = UIViewPropertyAnimator(
        duration: 2, timingParameters: UICubicTimingParameters())

    circleAnimator.addAnimations {
        circle.center.y += (reversed ? -1 : 1) * 330
    }

    circleAnimator.addCompletion { _ in
        usePropertyAnimator(!reversed)
    }

    circleAnimator.startAnimation()

}

usePropertyAnimator()

0
2018-02-23 09:53



谢谢,它工作正常 - Shawn Baek
因未捕获的异常'NSInternalInconsistencyException'而终止应用程序,原因:'尝试将动画添加到动画师<UIViewPropertyAnimator(0x6000001f4000)[未知]运行可中断>正在完成' - Darius Miliauskas
这是嵌套循环 - 不是一个好主意 - Joseph