iOS Swift, как синхронизировать рисование линий, градиент и окружность? - PullRequest
Новая
       24

iOS Swift, как синхронизировать рисование линий, градиент и окружность?

1 голос
/ 22 марта 2019

Я пытаюсь синхронизировать анимацию линии графика, круга и градиента.

Вот изображение GIF с несинхронизированной анимацией: / chart animation

Выполнить код всех анимаций: 

        CATransaction.begin()
        CATransaction.setAnimationDuration(5.0)
        CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut))
        self?.animateLineDrawing()
        self?.animateGradient()
        self?.animateCircle()
        CATransaction.commit()

Анимация рисования линий: 

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0.0
    animation.toValue = 1.0
    lineShapeLayer.add(animation, forKey: "drawLineAnimation")
    lineShapeLayer.path = curvedPath.cgPath

У меня есть слой GrainContainer с градиентным слоем в качестве подслоя.Я перемещаю только слой маски контейнера поверх градиента. Слой: 

    let animationPath = UIBezierPath(rect: CGRect(x: firstPoint.x,
                                         y: chartRect.origin.y,
                                         width: 0,
                                         height: chartRect.height))
    let animation = CABasicAnimation(keyPath: "path")
    animation.fromValue = animationPath.cgPath
    animation.toValue = UIBezierPath(rect: CGRect(x: firstPoint.x,
                               y: chartRect.origin.y,
                               width: chartRect.width,
                               height: chartRect.height)).cgPath
    animation.isRemovedOnCompletion = false
    animation.fillMode = CAMediaTimingFillMode.forwards
    animation.delegate = self
    gradientContainerLayer.mask?.add(animation, forKey: nil)

Круговая анимация по траектории диаграммы: 

    let animation = CAKeyframeAnimation(keyPath: "position")
    animation.path = viewModel.curvedPath(frame)?.cgPath
    animation.delegate = self
    circleLayer.add(animation, forKey: nil)

  1. Градиентная анимация не синхронизирована, поскольку расстояние по траекторииотличается от прямой, у кого-нибудь есть идеи, как синхронизировать это?

  2. Почему синхронизация по кругу не равна линейной анимации?Похоже, начало и конец анимации одинаковы, поэтому функции синхронизации разные, почему?

1 Ответ

1 голос
/ 22 марта 2019

Вместо использования базовой анимации и анимации свойств включите все CAKeyframeAnimation.Я лично нашел, что их проще настраивать и в целом более гибко.

Рассчитать положение каждого элемента в одной и той же x координате в один и тот же момент времени.
Вы должны рассмотреть возможность добавления минимум 1 точки в каждой точке интереса (изменение между уменьшением и увеличением y координаты) так что вы не ограничиваете местные крайности.

...