Swiftui Liquid Animation ⇐ IOS

[Anonymous]

Я пытаюсь создать какую -то жидкую анимацию, как видно здесь (статическое изображение). Видео с эффектом можно увидеть в этом видео на YouTube примерно от 35 -х годов. Точки появляются на самом внешнем круге и двигаются внутрь. Когда они приближаются к внутреннему кругу, отображающему информацию о зарядке, точка контакта точки с кругом вроде как постепенно оживляет вверх до тех пор, пока она не соприкасается с движущейся точкой, а затем обратно обратно к окружности круга. Вот мой код, но анимация не совсем там, окружность внезапно масштабируется вверх и обратно и не является плавной. < /P>

Код: Выделить всё

struct MovingDot: Identifiable {
let id = UUID()
var startAngle: Double
var progress: CGFloat
var scale: CGFloat = 1.0
}

struct BulgeEffect: Shape {
var targetAngle: Double
var bulgeHeight: CGFloat
var bulgeWidth: Double

var animatableData: AnimatablePair {
get { AnimatablePair(targetAngle, bulgeHeight) }
set {
targetAngle = newValue.first
bulgeHeight = newValue.second
}
}

func path(in rect: CGRect) -> Path {
let radius = rect.width / 2
var path = Path()

path.move(to: CGPoint(x: rect.midX + radius, y: rect.midY))
stride(from: 0, to: 2 * .pi, by: 0.01).forEach { angle in
let distanceFromTarget = abs(angle - targetAngle)
let bulgeEffect = distanceFromTarget <  bulgeWidth
? bulgeHeight * (cos(distanceFromTarget / bulgeWidth * .pi) + 1) / 2
: 0
let x = rect.midX + (radius + bulgeEffect) * cos(angle)
let y = rect.midY + (radius + bulgeEffect) * sin(angle)
path.addLine(to: CGPoint(x: x, y: y))
}

path.closeSubpath()
return path
}
}

struct LiquidAnimation: View {
let outerDiameter: CGFloat
let innerDiameter: CGFloat
let dotSize: CGFloat

@State private var movingDots: [MovingDot] = []
@State private var bulgeHeight: CGFloat = 0
@State private var targetAngle: Double = 0

var body: some View {
ZStack {
ForEach(movingDots) { dot in
Circle()
.frame(width: dotSize * 2, height: dotSize * 2)
.scaleEffect(dot.scale)
.position(
x: outerDiameter/2 + cos(dot.startAngle) * (outerDiameter/2 - dot.progress * (outerDiameter/2 - innerDiameter/2)),
y: outerDiameter/2 + sin(dot.startAngle) * (outerDiameter/2 - dot.progress * (outerDiameter/2 - innerDiameter/2))
)
}

BulgeEffect(targetAngle: targetAngle, bulgeHeight: bulgeHeight, bulgeWidth: 0.8)
.fill()
.frame(width: innerDiameter, height: innerDiameter)
.animation(.spring(response: 0.3, dampingFraction: 0.7), value: bulgeHeight)
}
.frame(width: outerDiameter, height: outerDiameter)
.onAppear(perform: startSpawningDots)
}

private func startSpawningDots() {
Timer.scheduledTimer(withTimeInterval: Double.random(in: 2...5), repeats: true) { _ in
let startAngle = Double.random(in: 0...(2 * .pi))
let newDot = MovingDot(startAngle: startAngle, progress: 0)

movingDots.append(newDot)

withAnimation(.easeIn(duration: 1.5)) {
movingDots[movingDots.count - 1].progress = 0.8
}

// Start bulge animation when dot is close
DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) {
targetAngle = startAngle
withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
bulgeHeight = dotSize * 3
}

// Scale up the dot slightly
withAnimation(.easeOut(duration: 0.3)) {
movingDots[movingDots.count - 1].scale = 1.2
}
}

// Complete dot movement and absorption
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
withAnimation(.easeOut(duration: 0.3)) {
movingDots[movingDots.count - 1].progress = 1
movingDots[movingDots.count - 1].scale = 0.1
}

// Collapse bulge
withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
bulgeHeight = 0
}
}

// Remove dot
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
movingDots.removeAll { $0.id == newDot.id }
}
}
}
}

struct ContentView: View {
var body: some View {
ZStack {
LiquidAnimation(
outerDiameter: 350,
innerDiameter: 150,
dotSize: 4
)
}
}
}

Как я могу добиться того же эффекта, что и в видео?

Подробнее здесь: https://stackoverflow.com/questions/794 ... -animation