Home Blog erstellt am: : 12/03/08 Zuletzt aktualisiert : 03/01/10 18:47 / 126 veröffentlichte Einträge
 

III. Bewegung CSS

Alle Einträge | nächste >

3.1 left und top  (III. Bewegung CSS) Verfasst: Dienstag, den 18. März 2008 06:34

Blog von izero :iPhone SDK (Anfänger), 3.1 left und top

fangen wir ganz easy an neues Projekt ... 2 Knöpfe apsolut nebeneinander ziehmlich weit unten positionieren und beide bekommen ein event on click ... dan noch das ovalShap in die mitte auch absolut ... dann noch die 4 Zeilen in die Events eintragen und fertig ... das Dingen läßt sich nun mit den zwei knöpfen hin und her bewegen ....

____________________________

function meinClickHandler(event)
{
 document.getElementById("ovalShape").style.left="50px"; /* x verschieben */
    document.getElementById("ovalShape").style.top="50px"; /* y verschieben */
 
}


function meinClickHandler1(event)
{
    document.getElementById("ovalShape").style.left="150px"; /* x verschieben */
    document.getElementById("ovalShape").style.top="150px"; /* y verschieben */
}

 

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.1.2 string ; number ; replace  (III. Bewegung CSS) Verfasst: Dienstag, den 18. März 2008 15:44

jetzt fängt der Spass an ...

var conposx = Number(document.getElementById("ovalShape").style.left.replace(/px/,"") ) ;

 

was mach ich da ..und warum ? und gleich zwei Probleme ....also ich lese da die Position x hoffentlich aus von dem Oval.  Dummerweise als String (Wert + Schrift = String) z.B. "23px" , dann lösche ich mit "replace" das "px" und kann mit "Number" dern String in eine Number (Numer = nur Wert z.B 23 mit der man rechnen kann) convertieren -> "23px" + 5 = "23px5" und wir brauchen "28px" ... hier sollte dan in conposx der Wert x ohne "px" enhalten sein ... so und jetzt soll das ganze geändet wieder als String zrück ... zB

 var newposx = conposx + 23;
 var strposx = newposx +"px" ;

und schreiben mit

 document.getElementById("ovalShape").style.left=strposx;

 

dass Ganze erscheint mir aber irgendwie recht umständlich und mit dem Auslesen des Startwertes von conposx klappt es auch nicht  beim ersten Knopfdruck. Der fängt mit dem  Wert Null an ....{#} ... weiß einer wovon ich hier  rede ?  unwahrscheinlich ...

vieleicht ist das der falsche Ansatz hier sowas anstrengendes ins Spiel zu bringen ... wo doch gerade so große Fortschritte da waren...hmm mal sehen ...

___________

par Stunden später ... ok ... ich hab mal bischen rumgelesen und bemerkt daß die Jungs von Apple vor ein par Stunden (ca. 20 Uhr) mir ne Mail geschickt haben , daß es auf der DEV Seite Neues gibt.... und siehe da genau 38 Seiten über meine Problematik schön in Englisch .... Wenn ich die Jungs von Apple richtig verstehe haben die sich das alles ganz anders gedacht .... CSS... 

 

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.2 Animation als Slide  (III. Bewegung CSS) Verfasst: Mittwoch, den 19. März 2008 03:25

Blog von izero :iPhone SDK (Anfänger), 3.2 Animation als Slide

ok und wieder neues Projekt und nun einfach index.html komplett löschen und durch folgende Zeilen ersetzen:

<html>
<head>
<title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style>
div {
width:100px; height:100px; background-color:blue;
position:absolute;
}
.diagonalslide {
-webkit-animation-name: 'diagonal-slide';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 2;
}
@-webkit-keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
</style>
<div onClick="this.className='diagonalslide'">
touch me
</div>
iZero Slide Safari CCS Ani. G. 4 iPhone OS Seite.23 und 24
</body>
</html>

 

Also ich find das Ergebnis erstaunlich

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.2.2 webkit-transition-property:  (III. Bewegung CSS) Verfasst: Donnerstag, den 20. März 2008 18:43

-webkit-transition-property: opacity,left,top;
-webkit-transition-duration: 2s,3s,3s;

 

also nach meinem Verständnis baut man z.B. ein shape in die mitte absolute bei left 100px und top 100 px  dann setze ich die zwei Zeilen (oben) in die Definition des Shape in der Datei main.css ... damit gebe ich dem Teil die eigenschaften Sichtbarkeit 2s und position left , top in 3 sekunden zu verändern.

wenn ich nun einen Button mit event einabaue und diesem dann nach left,top 50px springen lasse funktioniert die animation auch , wenn ich jedoch Werte über 100 benutze also nach rechts unten bewege passiert irgendwie nix .... evt. ist das noch Buggy ... löscht man die -webkit Zeilen springt das Shape normal wie erartet . hmmm und nu ... mach ich das was Faslch oder ist der Browser buggy ... naja man kann ja erstmal die Animationen benutzen ... ich mach hier weiter mit der Bewegung wenn ich geschnallt hab wo das Problem liegt ....

_____________________

Zwei wichtige Dokus von Apple - Safari CSS Transform Guid for iPhone OS und das gleiche nochmal für Animation ... relative frische Dokus ... durch es macht den Eindruck als wenn die Dashcode Anwendung das ganze gar nicht so richtig toll findet (evt. wegen Beta!){#}

___________

so hab mal bei Apple ein Bug gemldet ... mal sehen was das gibt 23.3.08

Bug Link Apple : https://bugreport.apple.com/cgi-bin/WebObjects/RadarWeb.woa/wa/signIn

5815013

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.3 Orientation auslesen  (III. Bewegung CSS) Verfasst: Freitag, den 21. März 2008 09:43

Blog von izero :iPhone SDK (Anfänger), 3.3 Orientation auslesen

hier nun ein kleines Beispiel aus der Apple Doku wie man die Lage (Augenblickliche Darstellung) auslesen kann (90 Grad rechts gedreht usw.)

einfach komplett in die index.html einfügen... nicht Wundern erste Seite ist leer ... dann den Sim unter Hardware drehen ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<title>Orientation</title>
<meta name = "viewport" content="width=320, user-scalable=0"/>
<script type="text/javascript" language="javascript">
 function updateOrientation()
 {
  var displayStr = "Orientation : ";
  switch(window.orientation)
  {
  case 0:
   displayStr += "Portrait";
  break;
  case -90:
  displayStr += "Landscape (right, screen turned clockwise)";
  break;
  case 90:
  displayStr += "Landscape (left, screen turned counterclockwise)";
  break;
  case 180:
 displayStr += "Portrait (upside-down portrait)";
 break;
}
document.getElementById("output").innerHTML = displayStr;
}
</script>
</head>
<body onorientationchange="updateOrientation();">
<div id="output"></div>
</body>
</html>

Kommentar hinzufügen |  0 Kommentar(e)
Permalink