L'animation de printemps de la trajectoire de CAShapeLayer n'est pas "dépassée".

Question

J'expérimente l'animation des chemins de CAShapeLayer avec CASpringAnimation. Le résultat attendu est un "morphing" entre les formes qui agit comme un ressort.

J'ai un exemple de code de base entre un cercle et une trajectoire carrée comme ci-dessous, mais le résultat final est une animation de ressort qui ne dépasse pas la trajectoire carrée finale, plus grande, ce qui est le comportement attendu.

Mon code est :

let springAnimation = CASpringAnimation(keyPath: "path")
springAnimation.damping = 1
springAnimation.duration = springAnimation.settlingDuration
springAnimation.fromValue = standardCirclePath().cgPath
springAnimation.toValue = standardSquarePath().cgPath

circleLayer.add(springAnimation, forKey: nil) // Where circleLayer (red background) is a sublayer of a basic UIView in the frame (blue background)

J'ai mes chemins à partir de cette réponse .

Existe-t-il un moyen de réaliser cela avec CASpringAnimation pour une transformation de trajectoire CAShapeLayer ? Sinon, quelles sont les alternatives ?

Answer 1

Bonjour, j'ai travaillé sur votre question et voici mes résultats, les problèmes sur le gif sont dus à mon convertisseur de gif qui est très mauvais.

voici le code

class ViewController: UIViewController {

    @IBOutlet weak var animatableVIew: UIView!
    var isBall = false
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    @IBAction func startAnimation(sender: AnyObject) {

        isBall = !isBall

        let springAnimation = CASpringAnimation(keyPath: "cornerRadius")
        let halfWidth = animatableVIew.frame.width / 2
        let cornerRadius: CGFloat = isBall ? halfWidth : 0
        springAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        springAnimation.fromValue = isBall ? 0 : halfWidth ;
        springAnimation.toValue = cornerRadius;
        springAnimation.damping = 7
        springAnimation.duration = springAnimation.settlingDuration
        animatableVIew.layer.cornerRadius = cornerRadius

        let springAnimation2 = CAKeyframeAnimation(keyPath: "transform.scale")
        springAnimation2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        springAnimation2.values = [1,0.9,1.4,0.8,1]
        springAnimation2.keyTimes = [ 0, (1 / 6.0), (3 / 6.0), (5 / 6.0), 1 ];
        springAnimation2.duration = springAnimation.settlingDuration * 0.5

        let groupSpringAnimation = CAAnimationGroup()
        groupSpringAnimation.animations = [springAnimation,springAnimation2]
        groupSpringAnimation.duration = springAnimation.settlingDuration
        groupSpringAnimation.beginTime = 0;
        animatableVIew.layer.addAnimation(groupSpringAnimation, forKey: "group")

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

J'espère que cela vous aidera