Positionen in einem Array

[dermitderfrage]

Hallo.

ich möchte folgendes: ein Div/Objekt soll von einem bestimmten Punkt aus zu der Stelle bewegt werden wo ein Mausklick erfolgt ist. Soweit so gut und doch nicht zufrieden. Ich möchte jetzt dass das Div einen (weitgehend) von mir bestimmten "Weg" geht.
Und da komme ich nicht weiter. Ich hab mir gedacht das ich die Positionen/Koordinaten (x und y) in ein Array schreibe und diese dann nutze um so das Div zu bewegen.

Jetzt ist meine Frage ob ich komplett danebenliege oder mein Plan für die Lösung des Problems gar nicht so absurd ist? Und gibt es einen optimalere Weg mein Vorhaben zu realisieren?

Ich grübel auch gerade wie mein Array am Ende aussehen sollte denn ich kann ja nicht 1000 Koordinaten eingeben und diese auslesen lassen. Vielleicht von-bis und von-bis usw. ?

Mfg

[Gunnar Bittersmann]

@@dermitderfrage:

nuqneH

Jetzt ist meine Frage ob ich komplett danebenliege

Du solltest die Bewegung nicht mit JavaScript realisieren, sondern mit CSS. (Performanter, Ausnutzung der GPU) Mit JavaScript berechnest du jeweils Start- und Endpunkt und weist die Werte der translate-Funktion der transform-Eigenschaft zu. Die Bewegung erledigt transition.

Qapla'

[molily]

Hallo,

Ich möchte jetzt dass das Div einen (weitgehend) von mir bestimmten "Weg" geht.

Das heißt also, dass es ist nicht der direkte Weg zwischen der aktuellen und der gewünschten Position? Soll es sich in Kurven oder entlang eines Pfades dahin bewegen?

Ich hab mir gedacht das ich die Positionen/Koordinaten (x und y) in ein Array schreibe und diese dann nutze um so das Div zu bewegen.

Wenn du mehrere zahlreiche Koordinaten speichern willst, ist ein Array die richtige Datenstruktur, ja.

Wie letztliche Animation erfolgt, ist eine andere Frage. CSS-Transitions ermöglichen es, dass der Browser ein Element automatisch von einem Punkt zum anderen bewegt – auf direktem Weg. Man muss also nicht alle Zwischenpunkte berechnen, es reichen die Eckpunkte. Bei Kurven ist es natürlich nötig, viele Zwischenpunkte zu berechnen.

Ich grübel auch gerade wie mein Array am Ende aussehen sollte

Zum Beispiel

[
 [x, y], …
]

oder

[
  {x: x, y: y}, …
]

denn ich kann ja nicht 1000 Koordinaten eingeben und diese auslesen lassen.

Wieso nicht?

Vielleicht von-bis und von-bis usw. ?

Es reichen die Zwischenpunkte, wie gesagt. Den Rest kann der Browser berechnen.

Mathias

[dermitderfrage]

Hallo,

danke für die Antworten. An CSS-Transition hab ich für mein Vorhaben gar nicht gedacht. Doch da ich mich damit bisher nicht ernsthaft auseinander gesetzt habe bzw. keine Erfahrung habe stellt sich mir die Frage ob dies Browser-konformer ist als eine nur auf JS basierte Lösung?

Im Moment kämpfe ich gerade noch mit der Übergabe der Koordinaten per Javascript an das CSS. Entweder benutze ich die falschen Suchbegriffe oder es gibt keine ordentliche gut erklärte Tutorials. Ich zumindest finde keines (international). Könnt ihr mir bitte behilflich sein?

MfG

[Auge]

Hallo

danke für die Antworten. An CSS-Transition hab ich für mein Vorhaben gar nicht gedacht. Doch da ich mich damit bisher nicht ernsthaft auseinander gesetzt habe bzw. keine Erfahrung habe stellt sich mir die Frage ob dies Browser-konformer ist als eine nur auf JS basierte Lösung?

Wenn du auf jene, die sowohl Windows XP als dort zu allem Überfluss auch den IE8 benutzen, verzichten kannst, ist die Unterstützung praktisch durchgängig. Dass der IE9 Transitions ebenfalls nicht unterstützt, sollte kein Problem sein. Die Windowsversionen, auf denen der läuft, vertragen auch eine neuere IE-Version und sollten sie auch installiert haben.

Tschö, Auge

[molily]

Hallo,

mal ein Beispiel:

http://jsfiddle.net/2ZbJJ/1/

Hier wird die Animation per Transitions durchgeführt. Mit JavaScript wird der nächste Punkt gesetzt, sodass der Browser animiert. Mit dem transitionEnd-Event wartet man auf das Ende der Transition und startet die nächste Transition. Die Punkte befinden sich in einem Array.

Falls Transitions nicht unterstützt werden, kann eine JavaScript-Lösung verwendet werden. Z.B. jQuery oder kleinere Animations-Bibliotheken wie Morpheus.

Im Moment kämpfe ich gerade noch mit der Übergabe der Koordinaten per Javascript an das CSS.

Das geht über element.style.eigenschaft = 'wert';

http://de.selfhtml.org/javascript/objekte/style.htm
http://molily.de/js/css.html#style-objekt

Mathias

[dermitderfrage]

Hallo,

vielen Dank für eure Antworten. Ich weiß nun das ich viel zu kompliziert gedacht habe und habe und werde mir in Zukunft mehr Gedanken machen wie man vermeintlich uninteressante Elemente nutzen kann. Die Angst mit den Browsern bzw. der Konformität kann mir keiner nehmen. Trotz "Hacks"

Ich habe jetzt ein Beispiel mit dem ich mein Ziel erreichen könnte aber zuerst will ich auch zu mindestens 99% alles verstehen. Und das ich viel - sehr viel lernen muss zeigt sich schon am ersten Zeichen des o.g. Beispiels bei Javascript. Falls es eine dumme Frage ist tut es mir leid aber scheinbar nutze ich Google und Suchfunktion falsch, ich finde keine Antwort darauf. Wieso steht die function in einer Klammer und trägt keinen Namen?

MfG

[molily]

Hallo,

Falls es eine dumme Frage ist tut es mir leid aber scheinbar nutze ich Google und Suchfunktion falsch, ich finde keine Antwort darauf.

Kein Problem, frag ruhig. Nicht alles lässt sich so einfach ergoogeln.

Wieso steht die function in einer Klammer und trägt keinen Namen?

Du meinst wahrscheinlich den Code, der den restlichen umschließt:

(function() {  
  // Hier der ganze Code  
})();

Das ist eine sogenannte Immediately-invoked Function Expression (IIFE), auf Deutsch ein sofort aufgerufener Funktionsausdruck. Das ist eine anonyme Funktion, die eben sofort ausgeführt wird und nirgends gespeichert wird.

Diese Technik nutzt man, um schnell und einfach einen Variablen-Gültigkeitsbereich (Scope) zu erzeugen. Innerhalb der Funktion kann man nach Lust und Laune lokale Variablen erstellen, ohne dass der globale Scope (das globale window-Objekt) in Mitleidenschaft gezogen wird.

(function() {  
  var variable = "wert"; // Lokale Variable, nicht von außen sichtbar!  
  var func = function() {}; // Dito  
})();

Wenn der Code nicht derartig umschlossen wäre, dann wären die beiden Variablen global – und könnten somit schnell mit anderen gleichnamigen in Konflikt kommen.

Außerdem kann man eine solche IIFE nutzen, um den Strict-Modus von JavaScript anzuschalten. Das ist eigentlich immer eine gute Idee, da es einem hilft, Fehler zu vermeiden.

(function() {  
  'use strict';  
  // Der restliche Code  
})();

Ich hoffe, das hat etwas Aufklärung gebracht.

Hintergrundlektüre:
Organisation von JavaScripten: Module und Kapselung

Viele Grüße
Mathias