Ich versuche, Moving Lights mit Trails für eine HTML5-Website / App für iPad 2 zu erstellen. Ich frage mich, was der beste Weg ist, dies zu tun und ob die Verwendung von HTML5 überhaupt praktikabel ist. Ich habe HTML5 gewählt, weil es einfacher und kostengünstiger ist, native iOS-Apps mit Objective C zu entwickeln und bereitzustellen. Wenn sich herausstellt, dass HTML5 einfach nicht genug Leistung bietet, muss ich vielleicht die bittere Pille schlucken.
Wie auch immer, um Ihnen einen Eindruck zu vermitteln, wovon ich rede, das habe ich bis jetzt erreicht:
Screenshot http://devdali.no-ip.org/mathias/test- Lichter / Screenshots / 1.jpg
Oder Sie können es in Aktion hier sehen (funktioniert nur in Webkit-basierten Browsern ).
Zuerst habe ich versucht, HTML5-Canvas zu verwenden und radiale Gradienten als Partikel in ähnlicher Weise zu zeichnen, wie Sie oben sehen. Es funktionierte, aber die Framerate war sogar auf meinem Desktop Computer schrecklich!
Nach ein wenig Lesen habe ich dann herausgefunden, dass CSS3-Transformationen hardwarebeschleunigt sein können, also baue ich die Version, die Sie oben sehen. Jedes "Teilchen" ist ein 64x64 png Bild. Für jedes Licht gibt es das "Kopf" -Licht (1 img) gefolgt von einer Spur, die aus 115 img Elementen besteht. Jedes img-Element wird mit "translate3d" (sowie Skalierung und Rotation) transformiert. Auch die Deckkraft jedes Elements wird dynamisch angepasst.
Auf diese Weise haben sich auf meinem Computer viel bessere Frameraten ergeben, aber ich bezweifle, dass das iPad 2 damit umgehen wird.
Ich wäre dankbar, wenn mir jemand Hinweise geben könnte, wie ich die Leistung im Allgemeinen verbessern und die Zielplattform berücksichtigen kann.
Danke für jede Hilfe im Voraus!
Wenn Sie kleine Änderungen an dem Effekt akzeptieren, kann eine andere Prozedur schnell funktionieren:
Anstatt die Spuren des Lichts mit Hilfe vieler Partikel zu zeichnen, zeichnen Sie einfach die Lichter an ihren aktuellen Positionen in einem Canvas-Element.
Sie können dann das gesamte Bild am Anfang eines Rahmens verdunkeln, indem Sie oben ein schwarzes Rechteck mit einer sehr niedrigen Deckkraft ausfüllen. Auf diese Weise verblassen die Wege in Dunkelheit, aber würden ihre Farbe nicht ändern, wie sie jetzt tun.
Die Anzahl der Zeichenoperationen wird jedoch stark reduziert. Die teuerste Operation wäre das Ausfüllen des Fade-Rechtecks für jedes Bild.
Dies sollte in der Leinwand eingebaut werden. Schauen Sie sich EaselJS und diese Demo an.
Ссылка http://easeljs.com/demos/MusicVisualizer/index.html
Sie könnten die Leistung eines LOT optimieren, indem Sie WebGL (das auf dem iPad2 unterstützt wird) ... verwenden, was für grundlegende HTML-Seiten auf ios safari nicht unterstützt wird, wie Nison Maël ...
Zur Zeit haben Sie nur Leinwand als Lösung. Was dir immer noch bessere Leistungen bringt ...
(Sie können diesen Blog für weitere Informationen besuchen: Ссылка
Mit ein wenig Glauben und Zeit werden Sie erstaunt sein!)
Tags und Links javascript animation html5 css3 ipad-2
