0

在这里，我一直在尝试创建自定义动画进度条。

我正在尝试通过调整大小将视图从屏幕的一端移动到另一端。

视图的帧是 (0, 100, 10, 4)

我想要的是...

  • 在动画视图的开始应该在它的初始位置，让我们说在 (0, 100)

  • 动画视图的中间将位于屏幕的中间，其宽度将增加到 100px。

  • 在动画视图的末尾将在屏幕的第二端。并且视图的框架将在，比如说 (400, 100) 并且视图的宽度将再次回到 10px

  • 整个进程也应该逆转。

UIButton 动作方法

var mainView = UIView() 

@IBAction func btnTapped(_ sender: UIButton) {

    let rect = CGRect(x: 0, y: 300, width: 10, height: 4)
    mainView = UIView(frame: rect)
    mainView.backgroundColor = UIColor.black
    self.view.addSubview(mainView)

    animate()
}

动画方法

func animate() {


    let theAnimationTranslationX = CABasicAnimation(keyPath: "transform.translation.x")
    theAnimationTranslationX.fromValue      = mainView.bounds.minX
    theAnimationTranslationX.toValue        = 400

    let scaleAnimate:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale.x")
    scaleAnimate.fromValue = NSValue(caTransform3D: CATransform3DMakeScale(1, 1, 1))
    scaleAnimate.toValue = NSValue(caTransform3D: CATransform3DMakeScale(1.2, 0, 0))


    let group = CAAnimationGroup()
    group.autoreverses = true
    group.repeatCount = .greatestFiniteMagnitude
    group.animations = [theAnimationTranslationX]//, scaleAnimate]
    group.duration = 2
    group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    mainView.layer.add(group, forKey: "animation")
}

我没有得到想要的动画效果。

有没有其他方法可以这样做，或者是否可以通过任何其他方式请建议我。

感谢您的时间，任何帮助将不胜感激。

编辑：

最终的动画应该看起来像......

在此处输入图像描述

4

0 回答 0