Code: Alles auswählen
mydiv := document.createElement('div');
mydiv1['type']Code: Alles auswählen
animation: mymove 5s infinite;Code: Alles auswählen
mydiv['style'] := 'animation: mymove 5s infinite;'Code: Alles auswählen
.MyClass {
animation: mymove 5s infinite;
}Code: Alles auswählen
mydiv['class'] := 'MyClass';Code: Alles auswählen
mydiv['class'] := mydiv['class'] + ' ' + 'MyClass';
Ich weiß nicht, ob ich Dich wirklich richtig verstanden habe - wenn Du bewegte Objekte ins web bringen möchtest, dann mach das doch mit Pas2JS ...Mathias hat geschrieben: ↑Do 25. Jan 2024, 17:30Einer eine Idee, wie man dies mit pas2js lösen könnte ?
https://www.w3schools.com/cssref/tryit. ... _keyframes
width, height, etc., kann man übermitgeben.Code: Alles auswählen
mydiv := document.createElement('div'); mydiv1['type']
Aber wie kann ichbewerkstelligen ?Code: Alles auswählen
animation: mymove 5s infinite;
Vor allem das mymove.
Das keyframe selbst, wird ähnlichem diesem hier sein ?
https://wiki.freepascal.org/pas2js#Crea ... w_function
WebGUIAppGimmick.7zDas sind CSS animationen die musst du in einer CSS Datei (oder in einem Style Tag) im HTML definieren:
Code: Alles auswählen
<style>
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>Der Vorteil an CSS ist, das es zum einen weniger Aufwand ist als die Bewegung selbst zu programmieren, zum anderen ist es Teil der Browser Rendering Engine statt des JavaScript Interpreters, und damit zum einen effizienter, und nicht Abbhängig von der sonstigen JS Workload. D.h. du kannst damit sehr viele Animationen machen während parallel noch JavaScript berechnungen laufen ohne in performance Probleme zu laufen.
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<div>
<style>
@keyframes blamove {
from {top: 0px;background-color: red;}
to {top: 200px;background-color: green; }
}
div {
width: 100px;
height: 100px;
position: relative;
animation: blamove 5s infinite;
}
</style>
</head>
</div>
</html>Nun habe ich es so versucht, aber es bleibt alles weiss.Das sind CSS animationen die musst du in einer CSS Datei (oder in einem Style Tag) im HTML definieren:
Code: Alles auswählen
mydiv := document.createElement('div');
TJSHTMLElement( mydiv).style.cssText:='div { width: 100px; height: 100px; position: relative; animation: blamove 5s infinite;}@keyframes blamove { from {top: 0px;background-color: red;} to {top: 200px;background-color: green; }}';
document.body.appendChild(mydiv);
Writeln('xxx'); // Zum Test
Code: Alles auswählen
TJSHTMLElement(mydiv).style.cssText := 'width:200px; height:200px'Code: Alles auswählen
<style>
#MyDiv {
width:200px;
height:200px;
}
.MyClass {
width:100px;
height:100px;
}
</style>
<div id="MyDiv"></div>
<div class="MyClass"></div>Code: Alles auswählen
<style>
.Red {
background-color: red;
}
.Green {
background-color: green;
}
.Square {
width: 200px;
height: 200px;
}
</style>
<div class="Red Square"></div>
<div class="Green Square"></div>Code: Alles auswählen
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
<div></div>Code: Alles auswählen
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}Code: Alles auswählen
<style>
.MyClass div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
<div class="MyClass"><div></div></div>/code]
Hier wird die Regel auf alle "div" elemente angewendet die Kinder von einem MyClass Element sind. Das heist, das erste div in diesem beispiel ist nicht davon betroffen, beim zweiten Div allerdings das interne, da das das Kind eines MyClass divs ist.
[hr]
Jetzt zu deinem Problem:
[code]TJSHTMLElement( mydiv).style.cssText:='div { width: 100px; height: 100px; position: relative; animation: blamove 5s infinite;} [...]';Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<script src="test.js"></script>
<style>
.AnimatedClass {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body onload="siteLoaded()">
</body>
</html>
Code: Alles auswählen
function siteLoaded() {
// Erstelle neues div element
let newDiv = document.createElement("div");
// Setze die klasse auf AnimatedClass (definiert in CSS style)
newDiv.className = "AnimatedClass";
// Füge div zu website hinzu
document.body.appendChild(newDiv);
}Code: Alles auswählen
type
TNewJSHTMLElement = class(TJSHTMLElement)
procedure animate(contextAttributes : TJSObject);varargs external name 'animate';
end;
var
mydiv: TJSElement;
begin
mydiv := document.createElement('div');
mydiv['style'] := 'width: 300px; height: 200px;';
document.body.appendChild(mydiv);
TNewJSHTMLElement(mydiv).animate(
new([
'background', TJSArray._of('black', 'red', 'black'),
'width', TJSArray._of('100px', '300px', '100px')]),
10000);Das kannst du zwar machen, damit machst du aber den selben Fehler den JavaScript entwickler vor 10 Jahren gemacht haben, da damit die Seiten extrem langsam laden, ineffizient und fehleranfällig sind und sich auch nicht cachen lassen.
Ups, mach das so viel aus!Wir reden hier also von einem Faktor 100-1000
Code: Alles auswählen
document.body.innerHTML :=
'<div>' +
' <style>' +
' div {' +
' width: 100px;' +
' height: 100px;' +
' background: red;' +
' position: relative;' +
' animation: mymove 5s infinite;' +
' }' +
'' +
' @keyframes mymove {' +
' from {top: 0px;}' +
' to {top: 200px;}' +
' }' +
' </style>' +
'</div>'; Wie sieht es da mit meiner jetzt entdeckten Lösung aus, ist dies immer noch viel lahmer als bei dem direkten Reinschreiben in die HTML ?Genau, Browser sind extrem schnell darin Statische HTML Seiten zu Zeichnen, da HTML bereits angefangen werden kann zu zeichnen bevor die ganze Seite geladen ist und somit ist die Zeit zum Zeichnen meist nicht länger als die Ladezeit des Netzwerks.
Da muss ich dir leider recht geben, gerade spärlich wird da nicht umgegangen.Das Problem hierbei ist, Pas2JS generiert dir JavaScript dateien mit Zehntausenden zeilen Code.
Das ist der Preis, den man zahlen muss, um die gewohnte FPC/Delphi RTL nutzen zu können
Verein
Links Suche
