Непрерывная анимация по пути swift [duplicate]

Как рисовать путь безье в UIKit?

Создайте объект UIBezierPath, а затем используйте различные методы для его создания .

Я подозреваю, что методы, которые вас наиболее интересуют, следующие:

• moveToPoint: (Справедливо самоочевидно, перемещает текущая точка к заданной точке)
• addLineToPoint: (добавляет прямую линию, начиная с текущей точки и заканчивая в данной точке)
• addCurveToPoint:controlPoint1:controlPoint2: (добавляет кривую безье, начиная текущую точку, с установленной конечной точкой и контрольными точками)
• addQuadCurveToPoint:controlPoint: Добавляет квадратичную кривую , начиная с текущей точки, с установленной конечной точкой и контрольной точкой.

Например, что-то вроде этого создаст простой путь безье с квадратичной кривой:

UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path
[yourPath moveToPoint:CGPointMake(100, 100)]; // move to your starting point
[yourPath addQuadCurveToPoint:CGPointMake(300, 500) controlPoint:CGPointMake(500, 350)]; // add a new quad curve to the point

Однако, если вы привыкли использовать что-то вроде Photoshop для создания своих путей, вам может понравиться PaintCode , который позволяет создавать пути безье, используя «то, что вы видите» вы получите «подход».

Вы можете добавить это UIBezierPath к свойству path для CAShapeLayer, чтобы отобразить его на экране.

CAShapeLayer* yourShapeLayer = [CAShapeLayer layer]; // create your shape layer
yourShapeLayer.frame = CGRectMake(0, 0, 300, 500); // assign it's frame
yourShapeLayer.path = yourPath.CGPath; // add your path to the shape layer
yourShapeLayer.fillColor = [UIColor clearColor].CGColor; // prevent the shape layer from filling

[self.view.layer addSublayer:yourShapeLayer]; // add the shape layer to the view

Вы можете то легко установить t его свойства strokeColor и lineWidth на слое формы, чтобы настроить, как ваш путь поглаживается.

yourShapeLayer.strokeColor = [UIColor redColor].CGColor; // red stroke color
yourShapeLayer.lineWidth = 5.0; // 5 point stroke width

Вы должны получить что-то вроде этого:

Как я мог его оживить, как если бы невидимый карандаш рисовал это на экране?

Вы можете легко создать CABasicAnimation, который может анимировать свойство strokeStart или strokeEnd для CAShapeLayer для достижения желаемой анимации.

Это может привести к эффекту анимации линии, получаемой на экране.

Например, этот код приведет к анимации свойства strokeEnd с 0.0 до 1.0, создав желаемый эффект:

yourShapeLayer.strokeStart = 0.0; // reset stroke start before animating

CABasicAnimation* strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; // create animation that changes the strokeEnd property
strokeAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; // give it a nice timing function
strokeAnim.duration = 2.0; // duration of the animation
strokeAnim.fromValue = @(0.0); // provide the start value for the animation, wrapped in an NSNumber literal.
strokeAnim.toValue = @(1.0); // provide the end value for the animation, wrapped in an NSNumber literal.

[yourShapeLayer addAnimation:strokeAnim forKey:@"strokeAnim"]; // add animation to layer

Как я могу масштабировать этот путь для работы с экранами разного размера?

Как мне обычно нравится решать эту проблему, нужно определить точки пути в заданном фиксированном кадре ( допустим, 500 х 500 точек), а затем сформировать масштабный коэффициент, основанный на размере экрана (в вашем случае вы хотите масштабировать до ширины на экране).

Итак, все, что нам нужно сделать, это генерировать наш масштабный коэффициент.

CGFloat sf = self.view.frame.size.width/500.0; // The factor to scale the path by

Тогда нам просто нужно несколько всех наших точек в UIBezierPath этот масштабный коэффициент. Например, взяв наш предыдущий путь:

UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path
[yourPath moveToPoint:CGPointMake(100.0*sf, 100.0*sf)]; // move to your starting point
[yourPath addQuadCurveToPoint:CGPointMake(300.0*sf, 500.0*sf) controlPoint:CGPointMake(500.0*sf, 350.0*sf)];

Теперь все, что нам нужно сделать, это программа в наших точках пути безье , как будто мы всегда рисовали ее в 500 x 500 кадров (мои точки уже хорошо вписываются в это).

Вы также захотите изменить размер вашего CAShapeLayer так, чтобы он был квадратным и занимал всю ширину экрана.

yourShapeLayer.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width);

Наконец, вы хотите поместить CAShapeLayer в центр экрана. Вы можете сделать это легко, установив свойство position слоя в center представления.

yourShapeLayer.position = self.view.center;

Теперь ваш путь должен всегда масштабироваться, чтобы занять ширину экрана.

(Я добавил серый фон к слою, чтобы проиллюстрировать масштабирование)

Полный проект (для вашего удобства): https://github.com/hamishknight/Drawing-Scaling-Animating-UIBezierPaths