Google gravity e gravity script sono due belle dimostrazioni. ma non sono disponibili codici sorgente o tutorial. e i file JS originali sono molto grandi. Come posso creare un effetto Gravity con Drag & (specialmente "In grado di" e "ruotabile" come gravità di google) su un determinato elemento?Come creare un effetto gravità con Javascript?
Si vorrà iniziare con un motore fisico, quello che Google Gravity utilizza è Box2Djs che è una porta javascript di Box2D. Puoi leggere il manuale di Box2D per imparare come usarlo, sebbene il manuale stesso affermi che non avresti idea di cosa stai facendo senza una certa conoscenza della fisica del corpo rigido (forza, impulso, coppia, ecc.), Sebbene questi esempi possano aiutarti a iniziare.
Se si desidera scrivere da soli il motore fisico, sarà necessario implementare almeno le dinamiche del corpo rigido 2D e il rilevamento delle collisioni affinché assomigli agli esempi che ha fornito. Un tutorial per farlo sarebbe chiamato una classe di simulazione al computer e avrebbe un prerequisito di algebra lineare e fisica I, non è un compito banale.
Successivamente, è necessario conoscere le tecniche di animazione javascript. Raccomando di imparare su window.requestAnimationFrame. L'utilizzo di setInterval(stepFunction, time) funzionerà ma non sarà efficiente come potrebbe essere nei browser moderni.
grazie, la versione JS di esso è disponibile @ box2d-js.sourceforge.net/index2.html. ma voglio creare questo effetto su elementi HTML reali. per esempio ho alcuni pulsanti Social che cadono quando la pagina è attivata e gli utenti possono lanciarli e giocare con il tema :). Box2dJS è ottimo per lo sviluppo di giochi basati sul Web, ma penso che sia basato su "convas" non su elementi HTML. – Towhid
Guardate un plugin jQuery presente su github JQuery.throwable solo fare $("Selector").throwable() e l'oggetto sarà sotto gravità
Guardando il tuo secondo link, il codice è assolutamente disponibile - è al http://gravityscript.googlecode.com /svn/trunk/gravityscript.js. È grande, ma è perché include diverse librerie, tra cui jQuery e Box2D. Oltre a ciò, è in realtà abbastanza leggibile. Salta semplicemente salta i grandi blocchi di JS minificato al codice formattato attuale. –
In realtà, se si guarda il codice src dello script gravità http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js, solo il codice src jQuery è offuscato, ma il codice per la gravità non lo è. Non dovrebbe essere difficile capirlo. –
Simile a http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691