动画 UIView 以“曲线”方式到达目的地,而不是直线前进

Posted

技术标签:

【中文标题】动画 UIView 以“曲线”方式到达目的地,而不是直线前进【英文标题】:Animate UIView to "squiggle" its way to destination instead of going in straight line 【发布时间】:2019-04-10 21:14:06 【问题描述】:

我有这样的动画:

bubble.frame.origin = CGPoint(x: 75, y: -120)

UIView.animate(
    withDuration: 2.5,
    animations: 
        self.bubble.transform = CGAffineTransform(translationX: 0, y: self.view.frame.height * -1.3)
    
)

但是,动画是直线进行的。我希望动画在到达目的地的途中做一些来回动作。像泡沫一样。有什么想法吗?

【问题讨论】:

你说的是弹簧效应吗?您可以查看 springWithDamping hackingwithswift.com/example-code/uikit/… 或者您可以查看 easing 以使用现成的之一或创建自己的曲线 medium.com/@RobertGummesson/… @CristianMoisei 没有。使用弹簧效果仍然可以让它走直线。它只是弹跳(仍然沿着直线)。我希望它在前往目的地的途中左右移动。曲线的东西仍然在直线上,它只是改变了事物的速度。 【参考方案1】:

如果您想沿路径制作动画,您可以使用CAKeyframeAnimation。唯一的问题是你想要什么样的path。阻尼正弦曲线可能就足够了:

func animate() 
    let box = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    box.backgroundColor = .blue
    box.center = bubblePoint(1)
    view.addSubview(box)

    let animation = CAKeyframeAnimation(keyPath: "position")
    animation.path = bubblePath().cgPath
    animation.duration = 5
    box.layer.add(animation, forKey: nil)

在哪里

private func bubblePath() -> UIBezierPath 
    let path = UIBezierPath()
    path.move(to: bubblePoint(0))
    for value in 1...100 
        path.addLine(to: bubblePoint(CGFloat(value) / 100))
    

    return path


/// Point on curve at moment in time.
///
/// - Parameter time: A value between 0 and 1.
/// - Returns: The corresponding `CGPoint`.

private func bubblePoint(_ time: CGFloat) -> CGPoint 
    let startY = view.bounds.maxY - 100
    let endY = view.bounds.minY + 100
    let rangeX = min(30, view.bounds.width * 0.4)
    let midX = view.bounds.midX

    let y = startY + (endY - startY) * time
    let x = sin(time * 4 * .pi) * rangeX * (0.1 + time * 0.9) + midX
    let point = CGPoint(x: x, y: y)
    return point

产量:

【讨论】:

以上是关于动画 UIView 以“曲线”方式到达目的地,而不是直线前进的主要内容,如果未能解决你的问题,请参考以下文章

如何为 UIView 关键帧动画设置动画曲线(`func UIView.animateKeyframes()`)

UIView 动画曲线减速使用 UIViewAnimationOptionCurveEaseOut

使用 CADisplayLink“结合”与 CAMediaTimingFunction 为 UIView 设置动画。 (获得任意曲线)

给予uiview animation有哪几种动画曲线

响应触摸的动画(简单形状)的最佳方式是啥?

以编程方式添加 UIView 后,使用约束对其进行动画处理