Как создать эффект кругового объекта, входящего и отделяющего от толстого вещества

Основываясь на изображении ниже (я использовал разные цвета для круга и плоской поверхности, чтобы их можно было увидеть, но в итоге цвета будут одинаковыми), используя Swift и Spritekit, я пытаюсь создать эффект круглый объект, входящий в толстое вещество (не обязательно липкое) и отделяющееся от толстого вещества. В принципе, когда круглый объект отделяется, он отрывается от плоской поверхности, когда она образуется в круг. Я хотел использовать кадры анимации изображений, но поскольку объекты являются SKSpriteNodes с физическими телами, это очень затруднит синхронизацию объектов с анимацией. Другим подходом будет использование CAAnimation, но я не знаю, как это можно объединить с SKSpriteNodes с физическими телами. Как я могу создать этот эффект разделения с использованием любого из вышеперечисленных подходов или другого?

UPDATE

На изображении ниже показано изменение поверхности толстого вещества, когда круглый объект входит в толстое вещество до погружения.

Ответ 1

С высокого уровня понимания есть два способа сделать это.

THE BAD WAY (но лучше работает, когда жидкость имеет текстуры): Создайте лист спрайта заранее, затем наложите дополнительный дочерний объект SKSpriteNode. Рамка в анимационном спрайте будет функцией расстояния от шара до поверхности, когда расстояние между ними меньше некоторой суммы. Требуемый диапазон расстояний (диапазон) должен быть сопоставлен с номером кадра спрайтов (frameIndex). f (диапазон) = frameIndex. Линейная интерполяция поможет здесь. Подробнее о интерполяции позже.
ПРАВИЛЬНЫЙ ПУТЬ: Сделайте жидкость объектом кривой, а затем одушевите точки на кривой с линейной интерполяцией между начальным, промежуточным и конечным состояниями. Для этого потребуются три кривые, каждая из которых имеет одинаковое количество точек. Пусть начальное состояние жидкости F1. Модель F1 указывает на статическую жидкость. Пусть состояние жидкости будет F2, когда шар на полпути погружен. Модель F2 указывает на то, что мяч погружен в максимальную ширину. Пусть состояние жидкости F3, когда шар 75% погружен. Обратите внимание: когда мяч полностью погружен, жидкость выглядит без изменений. Вот почему, когда мяч на 75% погружен в воду, он имеет максимальное поверхностное натяжение, захватывающее мяч. Что касается SpriteKit, вы можете использовать эти объекты:
```
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0);
CGPathAddQuadCurveToPoint(path, NULL, 50, 100, 100, 0);
CGPathAddLineToPoint(path, NULL, 50, -100);
CGPathCloseSubpath(path);

SKShapeNode *shape = [[SKShapeNode alloc]init];
shape.path = path;
```

Затем определите, когда мяч находится снаружи жидкости, используя векторное поперечное произведение с 3D-векторами, даже если ваш проект находится в 2D.

 Ball Vector (Vb)
    ^
    |
(V) O--->  Closest Fluid Surface Vector (Vs)

V = Vb x Vs

Затем посмотрите на Z-компонент V, называемый Vz. Если (Vz < 0), мяч находится вне жидкости: Создайте переменную t:

t = distOfBall/radiusOfBall

Затем для каждой упорядоченной точки в ваших формах жидкости выполните следующее:

newFluidPointX = F1pointX*(t-1) + F2pointX*t
newFluidPointY = F1pointY*(t-1) + F2pointY*t

Если Vz > 0), шар находится внутри жидкости:

t = -(((distOfBall/radiusOfBall) + 0.5)^2)  *4 + 1
newFluidPointX = F2pointX*(t-1) + F3pointX*t
newFluidPointY = F2pointY*(t-1) + F3pointY*t

Это работает, потому что любые две формы могут быть объединены вместе с использованием интерполяции. Параметр "t" действует как процентное соотношение между двумя формами.

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

    L = A*(t-1) + B*t
    where t is in between 0.0 and 1.0
    and A and B is what you are morphing from and to.

Подробнее о интерполяции см. Статья в вики

Для дальнейшего изучения. Если вы рассматриваете анимацию любых динамических фигур, я бы рассмотрел понимание кривых Безье. У Помакса есть замечательная статья по этой теме. Хотя многие структуры имеют кривые в них, общее понимание того, как они работают, позволит вам манипулировать ими экстенсивным образом или сворачивать свои собственные функции, в которых отсутствует инфраструктура. Ее статья Pomax:

Грунт на кривых

Удачи вам в успехе:)