Как анимировать преобразование CGPath в SKShapeNode?

В своей сцене я использую три основных шейпнода: квадраты, круги и треугольники. Я хочу создать собственный SKAction, который анимирует преобразование одного вида формы в другой.

Я пытаюсь воссоздать что-то вроде это в СпрайтКит.

Я использую UIBezierPath для создания CGPath для каждой формы:

//Circles
UIBezierPath(ovalInRect: CGRect)

//Squares
UIBezierPath(rect: CGRect)

//Triangles
convenience init(triangleInRect:CGRect, centered:Bool) {
    self.init()
    var origin = CGPointZero
    if centered {
        origin = CGPoint(x: -triangleInRect.width / 2, y: -triangleInRect.height / 2)
    }
    moveToPoint(origin)
    addLineToPoint(CGPoint(x: origin.x + triangleInRect.width, y: origin.y))
    addLineToPoint(CGPoint(x: origin.x + triangleInRect.width / 2, y: origin.y + triangleInRect.height))
    closePath()
}

person dennism    schedule 08.08.2015    source источник


Ответы (1)


Последовательность анимации...

  1. Как показано на диаграмме слева от Рисунка 1, нарисуйте вершину квадрата, нарисовав квадратичную кривую из точек P1 в P2 с контрольной точкой CP< /эм>. С контрольной точкой на линии P1P2 "кривая" будет линией
  2. Переместите точки P1 и P2 на небольшое расстояние вдоль линии от углов квадрата к центру, C
  3. Обновите контрольную точку CP, чтобы ее положение y находилось над квадратом.
  4. Нарисовав получившуюся четырехугольную кривую от P1 до P2 с контрольной точкой CP, вы получите кривую справа на рисунке 1. Если расстояние от вершина квадрата до контрольной точки равна расстоянию от P1 (и P2) до вершины квадрата, вершина кривой будет на квадрате
  5. Повторите шаги 2-4 для остальных 3-х сторон квадрата.
  6. Вспеньте, смойте, повторите шаги 2–5, пока P1 и P2 не окажутся на круге.

и рисунок...

введите здесь описание изображения

и просмотр ролика...

введите здесь описание изображения

person 0x141E    schedule 10.08.2015