Добавление весны на страницу Curl CATransition - PullRequest
Новая
       45

Добавление весны на страницу Curl CATransition

0 голосов
/ 30 апреля 2018

Мне удалось (с помощью StackOverflow) программно добавить частичный скручивание страницы в мой 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 не очень хорошо) enter image description here

Что бы я действительно хотел сделать, так это добавить немного пружины к этой анимации, чтобы она выглядела немного лучше. Но мне действительно трудно получить какую-либо информацию от 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 в качестве ключевого пути, iOS не знает, что с ним делать, поэтому игнорируется.

Вот видео, показывающее примерно то, что я хочу от этого ...

enter image description here

Так есть ли у кого-нибудь идеи, если это возможно сделать анимацию страницы, но с некоторой весной?

1 Ответ

0 голосов
/ 10 мая 2018

Изменить для новых картинок: 

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
}
}

Вот результат кода:

enter image description here

Надеюсь, вы больше не добавите новый 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
}

Вот результат: enter image description here

...