Come creare l'effetto di un oggetto circolare che entra e separa da una sostanza spessa

Question

In base all'immagine qui sotto (ho usato colori diversi per cerchio e superficie piana in modo che possano essere visti, ma alla fine i colori saranno gli stessi), usando Swift e Spritekit, sto cercando di creare l'effetto di un oggetto circolare che entra in una sostanza densa (non necessariamente appiccicosa) e che si separa dalla sostanza densa. Fondamentalmente, quando l'oggetto circolare si sta separando, si allontanerà dalla superficie piana mentre si forma in un cerchio. Volevo usare i fotogrammi dell'animazione dell'immagine, ma poiché gli oggetti sono SKSpriteNodes con corpi fisici questo renderà piuttosto difficile il timing della collisione degli oggetti con l'animazione. Un altro approccio sarebbe utilizzare CAAnimation, ma non so come questo possa essere combinato con SKSpriteNodes con corpi fisici. Come posso creare questo effetto di separazione usando uno degli approcci sopra indicati o uno diverso?

UPDATE

L'immagine seguente mostra la variazione nella superficie della sostanza spessa come oggetto circolare entra nella sostanza spessore fino a che è sommerso.

Answer 1

Da un alto livello di comprensione ci sono due modi per farlo.

1. cattiva via (ma funziona meglio quando il fluido ha textures): Creare il foglio sprite in anticipo, poi sovrapporre un figlio in più dell'oggetto SKSpriteNode. Il fotogramma nello sprite di animazione sarà una funzione della distanza dalla palla alla superficie quando la distanza tra di essi è inferiore ad una certa quantità. L'intervallo di distanza desiderato (intervallo) dovrà essere mappato sul numero di fotogramma dello sprites (frameIndex). f (intervallo) = frameIndex. L'interpolazione lineare aiuterà qui. Altro su interpolazione più tardi.

2. IL MODO GIUSTO: rendere il fluido un oggetto curva, quindi animare i punti sulla curva con interpolazione lineare tra gli stati iniziale, intermedio e finale. Ciò richiederà tre curve ciascuna con lo stesso numero di punti. Lascia che lo stato del fluido iniziale sia F1. Il modello F1 indica il fluido statico. Lascia che lo stato fluido sia F2 quando la palla è a metà strada sommersa. Il modello F2 assomiglia alla palla sommersa alla sua larghezza massima. Lasciare che lo stato del fluido sia F3 quando la palla è immersa al 75%. Si noti che quando la palla è completamente immersa, il fluido appare invariato. Questo è il motivo per cui quando la palla viene sommersa al 75% ha la massima tensione superficiale che afferra la palla. Per quanto riguarda la SpriteKit va, è possibile utilizzare questi oggetti:

   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; 
   

Poi rilevare quando la palla è sulla parte esterna del fluido utilizzando il prodotto vettoriale croce con vettori 3D, anche se il progetto è in 2D.

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

V = Vb x Vs 

Quindi guardare il componente Z di V chiamato Vz. Se (Vz < 0), la palla è al di fuori del fluido: Creare una variabile t:

t = distOfBall/radiusOfBall 

Allora per ogni punto di ordinata nelle forme fluide effettuare le seguenti operazioni:

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

Se Vz> 0), la sfera si trova all'interno del fluido:

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

Questo funziona perché qualsiasi due forme possono essere miscelati insieme mediante interpolazione. Il parametro "t" funge da percentuale per la fusione tra due forme.

È possibile creare combinazioni uniformi tra due forme qualsiasi, purché il numero di punti sia lo stesso. Ecco come un uomo si trasforma in un lupo nei film di Hollywood, o come un uomo può trasformarsi in una pozzanghera liquida. L'unico principio in gioco per questi effetti è l'interpolazione. L'interpolazione è uno strumento molto potente. Essa è definita come:

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. 

Per ulteriori dettagli su interpolazione veda: Wiki Article

Per ulteriori studi. Se stai pensando di animare qualsiasi forma dinamica, prenderei in considerazione la comprensione delle curve di Bezier. Pomax ha un articolo meraviglioso sull'argomento. Sebbene molti framework abbiano curve in loro, avere una comprensione generale di come funzionano ti permetterà di manipolarli estensivamente o di eseguire il rollover delle tue funzionalità laddove manca il framework. Il suo è l'articolo di Pomax:

A Primer on Curves

Buona fortuna per il vostro progresso :)