将弹簧添加到 pageCurl CATransition

Posted 2023-03-13

【中文标题】将弹簧添加到 pageCurl CATransition

【英文标题】：Adding spring to pageCurl CATransition

【发布时间】：2018-04-30 14:56:28

【问题描述】：

我已经设法（通过 *** 的帮助）以编程方式将部分页面卷曲添加到我的 UIPageViewController。这用于向用户提示他们已完成该页面/屏幕并可以继续。

代码如下所示：

let animation = CATransition()
animation.duration = 0.3
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.endProgress = 0.2
animation.type = "pageCurl"

myPageViewController.view.layer.add(animation, forKey: "MyTransition")

这就是它的样子（对质量差表示歉意 - mp4 到 gif 不太好）

我现在真正想做的是为该动画添加一些弹簧，使其看起来更好一些。但我发现从 Google 获取任何信息真的很困难（甚至不可能？）。

这是我尝试过的：

// Can't see an animation type on here, maybe keyPath is used as the type?
let x = CASpringAnimation(keyPath: "pageCurl")

// No endProgress either, just trying some random values now
x.fromValue = 0
x.toValue = 1

// No idea - found on Google - can play with the settings later
x.damping = 5
x.duration = x.settlingDuration

// These look familiar from my working animation, so i'll set these!
x.fillMode = kCAFillModeForwards
x.isRemovedOnCompletion = false

myPageViewController.view.layer.add(x, forKey: "MyNewTransition")

... 它完全没有任何作用。甚至没有崩溃。我想这是因为你不能使用pageCurl 作为keyPath，ios 不知道如何处理它，所以它被忽略了。

这是一个视频，大致展示了我想要从中得到什么......

那么有没有人知道是否可以制作这个 pageCurl 动画，但要有一些春天？

【问题讨论】：

UIView 有一个 animateWithDuration 函数，支持弹簧效果。

我编辑了我的评论，请看一下，让我知道它是否适合您。

@Adela 看起来很棒。我稍后会测试它！谢谢你的帮助。我需要再获得一些积分，但一旦我再次获得 50 分，我会再添加一个赏金并给你 :)

【参考方案1】：

编辑新的 GIF：

class ViewController: UIViewController 

var animated:Bool = false
var counter: Int = 0
var transition = CATransition()

override func viewDidLoad() 
    super.viewDidLoad()

    view.layer.backgroundColor = UIColor.white.cgColor


@IBAction func animate(_ sender: Any) 
    animated = false
    counter = 0
    animateCurlPage(start: 0.0, end: 0.35, duration: 0.4)


func animateCurlPage(start: Float, end: Float, duration: CFTimeInterval) 


    if (counter == 3)  return 

    UIView.animate(withDuration: duration, animations: 
        if (self.animated)  return 
        self.transition.type = "pageCurl"
        self.transition.subtype = kCATransitionFromBottom
        self.transition.duration = duration
        self.transition.startProgress = start
        self.transition.endProgress = end
        self.transition.delegate = self
        self.transition.fillMode = kCAFillModeForwards
        self.transition.isRemovedOnCompletion = false

        self.view.layer.add(self.transition, forKey: "transition1")
    )

    if animated 
        animateRepeatCurlPage()
    


func animateRepeatCurlPage() 

    UIView.animate(withDuration: 0.15, animations: 
        self.transition.type = "pageCurl"
        self.transition.subtype = kCATransitionFromBottom
        self.transition.duration = 0.15
        self.transition.startProgress = 0.32
        self.transition.endProgress = 0.31
        self.transition.delegate = self
        self.transition.fillMode = kCAFillModeForwards
        self.transition.isRemovedOnCompletion = (self.counter == 2) ? true : false

        self.view.layer.add(self.transition, forKey: "transition2")
    )

    counter += 1



extension ViewController: CAAnimationDelegate 

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) 
    animateCurlPage(start: 0.35, end: 0.32, duration: 0.2)
    animated = true

这是代码的结果：

我希望你不要再添加新的 gif 了 :D ！干杯！

编辑：您应该在我的回答之前添加 gif，现在看来我为您的好问题添加了错误的解决方案。

对于页面卷曲动画和弹簧动画，你需要同时执行两个动画，所以你需要一个动画组来处理它们，而且最重要的事情之一是要有不同的键 用于每个动画。在当前示例中，如果您对两个动画使用相同的键：transition，则只会执行一个动画，通常是最后一个。

你可以播放一下动画参数，我这里只是添加了一些任意值。

@IBAction func animate(_ sender: Any) 

    let animationGroup = CAAnimationGroup()
    animationGroup.duration = 5
    animationGroup.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
    animationGroup.animations = [animateCurlPage(), animateSpringTransition()]

    view.layer.add(animationGroup, forKey: "animation")


func animateCurlPage() -> CAAnimation 
    let transition = CATransition()
    transition.type = "pageCurl"
    transition.subtype = kCATransitionFromRight
    transition.duration = 1
    view.layer.add(transition, forKey: "transition")
    return transition


func animateSpringTransition() -> CAAnimation
    let transitionX = CASpringAnimation(keyPath: "position.y")
    transitionX.duration = 0.5
    transitionX.fromValue = view.layer.position.y
    transitionX.toValue = view.layer.position.y - 60

    transitionX.damping = 5.0
    transitionX.initialVelocity = 1.0
    transitionX.stiffness = 20.0
    transitionX.beginTime = CACurrentMediaTime()
    view.layer.add(transitionX, forKey: "transitionX")
    return transitionX

结果如下：

【讨论】：

感谢您的回复，但并不是我真正想要的。我在我的问题中添加了一些视频 gif 以使其更清晰。