代码之家  ›  专栏  ›  技术社区  ›  Jonathan Rachlin

如何在动画中使用UIViewAnimationCurve选项

  •  1
  • Jonathan Rachlin  · 技术社区  · 7 年前

    我在CAShapeLayer中使用动画来简单地制作一条从左到右笔划的线的动画(这只是一个更复杂程序的简化版本)。我已经放慢了速度,以表明开始的四分之一几乎是瞬时的,然后其余的动画正常。

    我已经看到可以使用UIView。设置UIViewAnimationCurve选项的动画选项(例如,.EaseIn或.Linear)。在CAShapeLayer中嵌入CAAnimation时,可以设置这些选项吗?是否有必要在每次运行时创建动画,或者是否有“运行动画”命令?

        // the containing UIView is called mainView
    
        mainView.layer.sublayers = nil
    
        // create a line using a UIBezierPath
    
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addLine(to: CGPoint(x: 300, y: 100))
    
        // create a CAShapeLayer
    
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = CGRect(x: 0, y: 0, width: 1024, height: 1024)
        shapeLayer.strokeColor = UIColor.green.cgColor
        shapeLayer.lineWidth = 100
        shapeLayer.path = path.cgPath
    
        // create the animation
    
        mainView.layer.addSublayer(shapeLayer)
        let animation = CABasicAnimation(keyPath: "LetterStroke")
    
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 10
    
        shapeLayer.add(animation, forKey: "animation")
    

    非常感谢。

    2 回复  |  直到 7 年前
        1
  •  0
  •   Dániel Nagy    7 年前

    你应该使用 timingFunction 的属性 CABasicAnimation . 有一个构造函数接受 these 预定义的计时功能,如

     animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    
        2
  •  0
  •   Jonathan Rachlin    7 年前

    再加上100的线宽,使线路从起点开始大约四分之一的距离。我把线宽缩小了,效果很好。