変換アニメーション後にCALayerの元のサイズに戻す

Question

2つの連続した変換アニメーションを実装しようとしています。最初のアニメーションが終了すると、2番目のアニメーションが完了ハンドラを介して呼び出されます。これは変換アニメーションなので、最初のアニメーションが終了すると、レイヤーが元のサイズに戻ってから2番目のアニメーションが開始されます。 2番目のアニメーションが最初の変換アニメーションの後に新しいレイヤーサイズで始まるようにしたいと思います。この投稿Objective-C - CABasicAnimation applying changes after animation?は、最初のアニメーションを開始する前にレイヤーをサイズ変更/変形しなければならないので、最初のアニメーションが終了するとレイヤーは実際に新しいサイズになります。私は境界を変更するか、実際にレイヤーにトランスフォームを適用することによってそれをしようとしましたが、まだ動作していません。

override func viewDidAppear(_ animated: Bool) { 

    buildBar() 

} 

func buildBar(){ 

    progressBar1.bounds = CGRect(x: 0, y: 0, width: 20, height: 5) 
    progressBar1.position = CGPoint(x: 0, y: 600) 
    progressBar1.backgroundColor = UIColor.white.cgColor 
    view.layer.addSublayer(progressBar1) 
    extendBar1() 

} 


func extendBar1(){ 

    CATransaction.begin() 

    let transform1 = CATransform3DMakeScale(10, 1, 1) 
    let anim = CABasicAnimation(keyPath: "transform") 
    // self.progressBar1.bounds = CGRect(x: 0, y: 0, width: 200, height: 5) 
    // self.progressBar1.transform = transform1 
    anim.isRemovedOnCompletion = false 
    anim.fillMode = kCAFillModeForwards 
    anim.toValue = NSValue(caTransform3D:transform1) 
    anim.duration = 5.00 

    CATransaction.setCompletionBlock { 

     self.extendBar2() 
    } 

    progressBar1.add(anim, forKey: "transform") 
    CATransaction.commit() 
} 

func extendBar2(){ 

    let transform1 = CATransform3DMakeScale(2, 1, 1) 
    let anim = CABasicAnimation(keyPath: "transform") 
    anim.isRemovedOnCompletion = false 
    anim.fillMode = kCAFillModeForwards 
    anim.toValue = NSValue(caTransform3D:transform1) 
    anim.duration = 5.00 
    progressBar1.add(anim, forKey: "transform") 

} 

Answer 1

あなたは両方のアニメーションレイヤのtransformプロパティを変更しているので、それはあなたのためのアニメーションの連鎖を処理するた、CAKeyframeAnimationを使用するためにここに容易になります。 valuesとkeyTimesの内容について

func extendBar(){ 
    let transform1 = CATransform3DMakeScale(10, 1, 1) 
    let transform2 = CATransform3DMakeScale(2, 1, 1) 

    let anim = CAKeyframeAnimation() 
    anim.keyPath = "transform" 
    anim.values = [progressBar1.transform, transform1, transform2] // the stages of the animation 
    anim.keyTimes = [0, 0.5, 1] // when they occurs, 0 being the very begining, 1 the end 
    anim.duration = 10.00 

    progressBar1.add(anim, forKey: "transform") 
    progressBar1.transform = transform2 // we set the transform property to the final animation's value 
} 

単語：

• 私たちは、現在はprogressBar1の変換であることを最初の値を設定します。これにより、現在のレイヤの状態から開始することができます。
• keyTimesでは、当初、values配列の最初の値を使用する必要があります。次に、アニメーションの半分の時間で、レイヤーをvaluesの第2の値に変換する必要があります。したがって、最初の状態と2番目の状態の間のアニメーションは、その時間中に発生します。その後、0.5対1の間では、tranform1からtransform2になります。

this very nice articleからアニメーションの詳細を読むことができます。objc.io.

---

多分あなたが間にprogressBar1にサブビューを追加したいので、あなたが本当にここにそれを基本的には、我々のセットアップA？ここで何が起こる

func extendBar1() { 
    CATransaction.begin() 
    CATransaction.setCompletionBlock { 
     print("side effects") 
     extendBar2() 
    } 
    let transform1 = CATransform3DMakeScale(5, 1, 1) 
    let anim = CABasicAnimation(keyPath: "transform") 

    anim.fromValue = progressBar1.transform 
    anim.toValue = transform1 
    anim.duration = 2.00 
    progressBar1.add(anim, forKey: "transform") 
    CATransaction.setDisableActions(true) 
    progressBar1.transform = transform1 
    CATransaction.commit() 
} 

func extendBar2() { 
    CATransaction.begin() 
    let transform2 = CATransform3DMakeScale(2, 1, 1) 
    let anim = CABasicAnimation(keyPath: "transform") 

    anim.fromValue = progressBar1.transform 
    anim.toValue = transform2 
    anim.duration = 2.00 
    progressBar1.add(anim, forKey: "transform") 
    CATransaction.setDisableActions(true) 
    progressBar1.transform = transform2 
    CATransaction.commit() 
} 

を行いますコードだ、（二つの異なるアニメーションを必要とする場合アニメーションを作成すると、プレゼンテーションレイヤーが変更され、最後の最初のアニメーションのトランスフォームに実際のレイヤーが設定されます。

次に、最初のアニメーション完了したら、extendBar2と呼びます。これは通常のアニメーションを待ち行列に入れます。

トランスフォームを明示的に更新する前にCATransaction.setDisableActions(true)を呼び出すことも必要です。そうしないと、コアアニメーションによって暗黙のアニメーションが作成され、直前に作成されたアニメーションより優先されます。