用于加载数据的自定义动画

时间:2018-06-06 18:23:43

标签: ios swift core-animation uiviewpropertyanimator

在这里,我一直在努力创建自定义动画进度条。

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

查看的frmae是(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")
}

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

有没有其他方法可以这样做,或者可以用其他任何方式建议我。

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

修改

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

enter image description here

0 个答案:

没有答案