如何在动画开启时更改 CABasicAnimation 的 toValue/fromValue

Posted

技术标签:

【中文标题】如何在动画开启时更改 CABasicAnimation 的 toValue/fromValue【英文标题】:How can I change toValue/fromValue of CABasicAnimation while the animation is on 【发布时间】:2017-08-02 12:32:47 【问题描述】:

我正在尝试更改 CABasicAnimation 的 toValue/fromValue 的值,其中动画为 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

当动画打开时,我在动画期间获得transform.scale 的当前值:

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

更改值后,heartBeatAnimation 不会更改其 toValue/fromValue,直到我删除动画然后再次添加!

有没有办法在动画播放时实时进行这些更改?!

【问题讨论】:

你的意思是得到比例会停止动画? 在我更改值后,heartBeatAnimation 不会更改其toValue/fromValue,直到我删除动画然后再次添加! 并在动画中断后直接添加动画? 是的,toValue/fromValue 的任何更新都将在重新添加动画后占据一席之地! @agibson007 抱歉,迟到了,工作和解决难题,顺便感谢您的回答。 【参考方案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
    


我按下按钮为动画添加更多比例。 结果如下:

【讨论】:

以上是关于如何在动画开启时更改 CABasicAnimation 的 toValue/fromValue的主要内容,如果未能解决你的问题,请参考以下文章

荣耀V10如何设置动画过渡时间?

如何在更改uiview的隐藏模式时添加动画?

如何在标题更改时停止不需要的 UIButton 动画?

如何在动画时更改 CALayer 的颜色

如何在更改 UIView 大小时应用动画? + 斯威夫特 5

如何在属性更改 QML 上实现行为动画