CAShapeLayer路径弹簧动画不“超调” [英] CAShapeLayer path spring animation not 'overshooting'

问题描述

我正在尝试使用CASpringAnimation对CAShapeLayer路径进行动画处理。预期的结果是形状之间表现出弹性。

我在圆形和正方形路径之间有一个基本的代码示例，如下所示，但是最终结果是一种春季动画，不会超出最终的较大方形路径，这是预期的行为。

。 p>

CASpringAnimation是否可以通过CAShapeLayer路径转换来实现这一目标？否则，有什么选择？

解决方案

您好，我一直在研究您的问题，这是我的结果， gif是因为我的gif转换器非常糟糕

这是代码

  class ViewController：UIViewController {
 
 @IBOutlet弱var animatableView：UIView ！ 
 var isBall = false 
覆盖func viewDidLoad（）{
 super.viewDidLoad（）
 //加载视图后，通常从笔尖进行其他任何设置。 
} 
 @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（名称：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 
 
让groupSpringAnimation = CAAnimationGroup（）
 groupSpringAnimation.animations = [springAnimation，springAnimation2] 
 groupSpringAnimation.duration = springAnimation。 settlingDuration 
 groupSpringAnimation.beginTime = 0; 
 animatableVIew.layer.addAnimation（groupSpringAnimation，forKey： group）
 
} 
 
覆盖func didReceiveMemoryWarning（）{
 super.didReceiveMemoryWarning（） 
 //处理所有可以重新创建的资源。 
} 
 
 
} 
  

我希望这样帮助您

I'm experimenting with animating CAShapeLayer paths with CASpringAnimation. The expected result is a 'morphing' between shapes that acts 'springy'.

I have a basic code example between a circle and square path as below, however the end result is a spring animation that does not 'overshoot' past the final, larger square path, which is the expected behaviour.

My code is:

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)

I got my paths from this answer.

Is there a way with CASpringAnimation to achieve this for a CAShapeLayer path transform? Otherwise, what are the alternatives?

解决方案

Hello I had been working on your question and this is my results, the glitches on the gif is because my gif converter is very bad converter

this is the 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.
    }


}

I hope this helps you

这篇关于CAShapeLayer路径弹簧动画不“超调”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！