Пользовательская анимация для загрузки данных - PullRequest
0 голосов
/ 06 июня 2018

Здесь я так долго пытался создать пользовательский анимированный индикатор выполнения.

Я пытаюсь переместить вид с одного конца экрана на второй с изменением размера.

frmae представленияis (0, 100, 10, 4)

То, что я хочу, это ...

  • В начале анимации вид должен быть в своей начальной позиции, скажем, в(0, 100)

  • в середине представления анимации будет в середине экрана, а его ширина будет увеличена до 100 пикселей.

  • в конце представления анимации будет на втором конце экрана.и кадр вида будет, скажем, (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

...