どのようにアニメーションが

Question

上にある間、私はどこ、アニメーションが上にある間にアニメーションがheartBeatAnimation

let heartBeatAnimation = CABasicAnimation(keyPath: "transform.scale.xy") 
heartBeatAnimation.duration  = 0.75 
heartBeatAnimation.repeatCount = Float.infinity 
heartBeatAnimation.autoreverses = true 
heartBeatAnimation.fromValue  = 1.0 
heartBeatAnimation.toValue  = 1.15 

あるCABasicAnimationのtoValueの/場合、fromValueの値を変更しようとしているtoValueの/場合、fromValue CABasicAnimationの私は変更することができます私はこれでアニメーション中transform.scaleの現在の値を取得する：私は値を変更した後

let currentValue = someView.layer.presentation()?.value(forKeyPath: "transform.scale") 
heartBeatAnimation.fromValue = currentValue 
heartBeatAnimation.toValue = currentValue 

私は、再び追加したアニメーションを削除するまで、heartBeatAnimationはそのtoValue/fromValueを変更しません！

アニメーションの実行中にこれらの変更をリアルタイムで行う方法はありますか。

Answer 1

モデルレイヤーの現在のスケールをプレゼンテーションレイヤスケールに更新し、アニメーションをbeginTimeプロパティの更新で読み取って、アニメーションが決して停止していないように見えるようにすることができます。ここに例があります。

import UIKit 

class ViewController: UIViewController { 


    var scale : CGFloat = 1.2 

    var shapeLayer : CAShapeLayer! 
    var button : UIButton! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     //add a shapelayer 
     shapeLayer = CAShapeLayer() 
     shapeLayer.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width/4, height: self.view.bounds.width/4) 
     shapeLayer.position = self.view.center 
     shapeLayer.path = drawStarPath(frame: shapeLayer.bounds).cgPath 
     let color = UIColor(red: 0.989, green: 1.000, blue: 0.000, alpha: 1.000) 
     shapeLayer.fillColor = color.cgColor 
     self.view.layer.addSublayer(shapeLayer) 


     //button for action 
     button = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width - 20, height: 50)) 
     button.center = self.view.center 
     button.center.y = self.view.bounds.height - 70 
     button.addTarget(self, action: #selector(ViewController.pressed(sender:)), for: .touchUpInside) 
     button.setTitle("Animate", for: .normal) 
     button.setTitleColor(.blue, for: .normal) 

     self.view.addSubview(button) 

    } 

@objc func pressed(sender:UIButton) { 

    var isInterupted = false 

     if let presentation = shapeLayer.presentation(){ 
      if let animScale = presentation.value(forKeyPath: "transform.scale.xy"){ 
       if let value = animScale as? CGFloat{ 
        //set current animation spot 
        shapeLayer.transform = CATransform3DScale(CATransform3DIdentity, value, value, 1) 
        shapeLayer.removeAllAnimations() 
        scale += 0.2 
        isInterupted = true 
        print("The current toValue is \(scale)") 

       } 
      } 
     } 


     button.setTitle("Animating...", for: .normal) 

     let heartBeatAnimation = CABasicAnimation(keyPath: "transform.scale.xy") 
     heartBeatAnimation.duration  = 0.5 
     let beginTimeNeeded = (1/scale) * CGFloat(heartBeatAnimation.duration) 
     heartBeatAnimation.repeatCount = .greatestFiniteMagnitude 
     heartBeatAnimation.autoreverses = true 
     heartBeatAnimation.fromValue  = 1.0 
     heartBeatAnimation.toValue  = scale 
     if isInterupted == true{ 
      heartBeatAnimation.beginTime = CFTimeInterval(beginTimeNeeded) 
     } 
     heartBeatAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) 
     shapeLayer.add(heartBeatAnimation, forKey: "beatAnimation") 
    } 

    func drawStarPath(frame: CGRect = CGRect(x: 0, y: 0, width: 140, height: 140)) ->UIBezierPath{ 
     //// Star Drawing 
     let starPath = UIBezierPath() 
     starPath.move(to: CGPoint(x: frame.minX + 0.50000 * frame.width, y: frame.minY + 0.21071 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.60202 * frame.width, y: frame.minY + 0.35958 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.77513 * frame.width, y: frame.minY + 0.41061 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.66508 * frame.width, y: frame.minY + 0.55364 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.67004 * frame.width, y: frame.minY + 0.73404 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.50000 * frame.width, y: frame.minY + 0.67357 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.32996 * frame.width, y: frame.minY + 0.73404 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.33492 * frame.width, y: frame.minY + 0.55364 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.22487 * frame.width, y: frame.minY + 0.41061 * frame.height)) 
     starPath.addLine(to: CGPoint(x: frame.minX + 0.39798 * frame.width, y: frame.minY + 0.35958 * frame.height)) 
     return starPath 
    } 

} 

アニメーションにスケールを追加するには、このボタンを押しています。 結果は次のとおりです。