Ich liebe Hochleistungs-JavaScript und liebe es, das zu teilen, was ich für das wahre Potenzial halte. In diesem Tutorial möchte ich mich auf Famo.us konzentrieren, mit dem Sie seidige 60 fps beibehalten können, während Sie reibungslose Animationen auf dem Bildschirm haben.
Famo.us verwendet dazu das CSS3-Grundelement -webkit-transform:
matrix3d, mit der das Framework die zusammengesetzte Matrix berechnen und die Browser-Rendering-Engine ignorieren kann. Kein Plug-In, kein Download, kein Hack. Durch Hinzufügen zu jedem DIV können Entwickler die Matrix zusammensetzen und direkt auf die GPU zugreifen.
Ich gehe näher auf die Besonderheiten von Famo.us ein dieser Blog-Beitrag. Dank an Zack Brown für all seine Hilfe dabei! Lasst uns beginnen.
Am Ende dieses Projekts können Sie:
- Verstehen, wie Angular im Kontext einer Famo.us-Anwendung funktioniert
- Nutzen Sie die wahre Kraft von JavaScript und die guten Teile von HTML5
- Erstellen Sie flüssige Animationen
Mein Ziel für dieses Projekt ist es zu veranschaulichen, wie einfach Sie HTML5- und JavaScript-Projekte erstellen können, die auf mobilen Apps mit nahezu nativen Geschwindigkeiten ausgeführt werden.
Züge
- Die mobile App funktioniert unter iOS und Android über Cordova.
- Die universelle Windows 10-App funktioniert nativ unter Windows 10.
- Dieses Projekt kann auch als gehostete Website ausgeführt werden, obwohl ich es vergrößert habe, was für mobile Geräte am besten ist.
Bedarf
- PC oder Mac
- Webserver
- Plattformübergreifende Testmatrix (wie BrowserStack, IDE oder kostenlose virtuelle Maschinen für EdgeHTML, den Renderer für Microsoft Edge, und Webanwendungsinhalte, die unter Windows 10 gehostet werden)
Installateur
- Laden Sie die Quelle von herunter GitHub.
- Laden Sie einen Webserver herunter und installieren Sie ihn (ich verwende MAMP unter OS X oder dem in Visual Studio unter Windows integrierten IIS-Server).
Öffnen Sie das Projekt
- Starten Sie Ihren Webserver.
- Bewegen Sie sich in Richtung berühmtes-eckiges-Pokémon / app /.
Das Projekt ist für mobile Geräte konzipiert. Verwenden Sie daher den mobilen Emulator Ihres Browsers, um die richtige Ansicht zu erhalten. So würde es auf einem iPhone 6 im Emulator über den Chrome-Desktop-Browser (375 × 667) aussehen:
Wie es funktioniert
Greifen Sie auf die Datenbank zu
Ich bekomme alle Informationen von PokeAPI, das eine gut dokumentierte API hat, aber keine Bilder für jedes der Pokémon hat. Für die Bilder ziehe ich einfach den Namen des aktuell ausgewählten Pokémon und füge ihn am Ende dieser URL hinzu: http://img.pokemondb.net/artwork/. Zum Beispiel: http://img.pokemondb.net/artwork/venusaur.jpg bringt Sie zu einem Bild von Vanosaur. Schlau, richtig? Leider steht ihnen keine API zur Verfügung.
Jedes Mal, wenn der Benutzer drückt Nächster Auf der Schaltfläche wird eine Zufallszahl zwischen einem von mir festgelegten Min / Max-Wert (z. B. 1 bis 20) generiert und ein Pokémon aus der Datenbank abgerufen, das dieser Zahl entspricht. So sieht es aus:
http://pokeapi.co/api/v1/pokemon/1/ Gibt ein JSON-Objekt für Bulbasaur zurück. Sie können spielen Sie mit ihrer API.
Daten durchlaufen
Ich durchlaufe dann das JSON-Objekt und setze die Eigenschaften, die ich für Variablen in Angular finde, mithilfe von $Scope Objekt.
Hier ist ein Beispiel:
/*
* Grab Pokemon from the DB
*/
$scope.getPokemon = function () {
// Generate a random num and use it for the next pokemon
getRandomInt($scope.minVal, $scope.maxVal);
// Retrieve data from DB and draw it to screen
$http.get($scope.dbURL + $scope.pokemonNum + "/")
.success(function(data) {
$scope.name = data.name;
$scope.imageUrl = $scope.imgDbURL + $scope.name.toLowerCase() + '.jpg';
/* 1) Empty out the current array to store the new items in there
* 2) Capitalize the first character for each ability from the database
* 3) Store that ability in a new abilityObj & add it into the abilities array
*/
$scope.abilities.length = 0;
for (var i = 0; i < data.abilities.length; i++){
var capitalizedString = capitalizeFirstLetter(data.abilities[i].name);
var abilityObj = {name: capitalizedString };
$scope.abilities.push(abilityObj);
}
$scope.hitPoints = data. hp;
var firstType = data.types[0].name;
$scope.types.name = capitalizeFirstLetter(firstType);
determineNewBgColor();
})
.error(function(status){
console.log(status);
$scope.name = "Couldn't get Pokemon from the DB";
});
};
Sie werden vielleicht bemerken, dass ich auch hier einige andere Funktionen habe, wie z capitalizeFirstLetter, was genau das tut. Ich wollte, dass die Fähigkeiten und der Typ (z. B. Gift, Kraut, Flucht) den ersten Buchstaben in Großbuchstaben haben, da sie in Kleinbuchstaben aus der Datenbank zurückkommen.
Ich schleife auch die Fähigkeiten und schiebe sie zu einem Fähigkeitsobjekt, das so aussieht:
$scope.abilities = [
{ name: "Sleep"},
{ name: "Eat" }
];
Die Datenbank gibt auch verschiedene Typen für einige Pokémon zurück, z. B. Charizard, der sowohl stiehlt als auch feuert. Um die Sache einfach zu halten, wollte ich jedoch nur eine aus der Datenbank zurückgeben.
$scope.types = { name: "Grass" };
var firstType = data.types[0].name;
Auf dem Bildschirm zeichnen
Famo.us hat zwei Wellen zum Zeichnen von Inhalten auf dem Bildschirm durch Erstellen OberflächenDies sind die Elemente, die Ihren Text, Ihre Bilder usw. enthalten:
- JavaScript
- Richtlinien FA (HTML)
Ich habe kein JavaScript verwendet, um die Oberflächen in dieser App zu zeichnen. Stattdessen habe ich nur Famous-Angular (FA) -Richtlinien verwendet, wie z.
{{name}}
Dies ist für den Namen über dem Pokemon auf dem Frontbildschirm.
Sie werden feststellen, dass die Oberfläche in a eingewickelt ist fa-modifier. Sie können Lesen Sie dazu in der Famo.us-DokumentationSie passen jedoch im Wesentlichen die Eigenschaften einer Oberfläche an, z. B. Ausrichtung, Größe und Ursprung. Es hat eine Weile gedauert, bis ich den Unterschied zwischen Ausrichtung und Herkunft herausgefunden habe. So habe ich ihn verstanden.
Ursprung
Es ist der Bezugspunkt auf jeder Oberfläche. Wenn ich ein Rechteck zeichnen und auf dem Bildschirm verschieben möchte, muss ich entscheiden, welcher Punkt dieses Rechtecks mein Ausgangspunkt sein soll. das Dokumente Famo.us erkläre es gut. Die Werte werden wie folgt dargestellt:
$scope.origin = {
// X Y
topLeft: [0, 0 ],
topRight: [1, 0 ],
center: [0.5, 0.5],
bottomLeft: [0, 1 ],
bottomRight: [1, 1 ]
};
Ausrichtung
Dies ist die Position einer Oberfläche auf dem Bildschirm. Wenn Sie die Ausrichtung ändern, wird der Ursprung als Referenzpunkt zum Starten verwendet.
$scope.align = {
// X Y
frontName: [0.50, 0.10],
frontImg: [0.50, 0.40],
backImg: [0.5, 0.38],
center: [0.50, 0.50]
};
Wo Angular endlich kommt
Hier können Sie nun alle Ihre Angular-Kenntnisse und Datenbindungen für die Angular-Implementierung einsetzen. Wenn Sie bereits Erfahrung mit Angular haben, ist dies hier nicht drastisch anders.
{{nextBtn}}
Diese Schaltfläche erscheint auf dem ersten Bildschirm und zieht einfach ein anderes Pokémon aus der Datenbank. Alle der ng Die (Winkel-) Anweisungen, die Sie kennen, sind hier, wie z ng-click. Ich habe hier mehrere Funktionen. Beachten Sie, dass sie nicht durch Kommas getrennt sind.
Ich verknüpfe auch den Wert von $scope.nextBtn beim {{nextBTn}} und HTML.
Damit Famo.us und Angular zusammenarbeiten, müssen wir einbeziehen $Famo.us oben in unserer JavaScript-Datei. So geht's:
angular.module('famousAngularStarter')
.controller('PokemonCtrl', ['$scope', '$http', '$famous', function ($scope, $http, $famous) {
/* Inject famo.us to DOM */
var View = $famous['famous/core/View' ];
var Modifier = $famous['famous/core/Modifier' ];
var Surface = $famous['famous/core/Surface' ];
var Transform = $famous['famous/core/Transform' ];
var Transitionable = $famous['famous/transitions/Transitionable'];
var Timer = $famous['famous/utilities/Timer' ];
Animationen
Was wäre eine Hochleistungsanwendung ohne Animationen? Famo.us ist vollgepackt mit ihnen, was den Einstieg erleichtert. Hier ist eine, um das Bild auf der Vorderseite zu beleben.
/*
* @OnClick: Sets the opacity and scale for the front image when user clicks "Next" btn
* 1) Turns opacity invisible quickly before returning to original opacity, revealing new Pokemon
* 2) Turns scale down before quickly turning it back up to original size
*/
$scope.frontImgAnim = function() {
var hideDuration = 200;
var returnDuration = 1300;
$scope.opac.imgFront. set(0, {duration: hideDuration, curve: "easeIn"},
function returnToOrigOpacity() {
$scope.opac.imgFront.set(1, {duration: returnDuration, curve: "easeIn"})
}
);
$scope.scale.imgFront .set([0.5, 0.5], {duration: hideDuration, curve: "easeIn"},
function returnToOrigSize() {
$scope.scale.imgFront.set([0.8, 0.8], {duration: returnDuration, curve: "easeIn"})
}
)
};
Es gibt verschiedene Arten von Kurven, die Sie hier verwenden können. Weitere Informationen finden Sie in den Dokumenten. Ich benutze auch eine Rückruffunktion, returnToOrigSize, um das Bild zu vergrößern und es dann auf seine ursprüngliche Größe zu reduzieren.
Frustrationspunkte
Auf dem Weg bin ich auf einige Probleme gestoßen.
Bei FA-Direktiven sind die Eigenschaften als Zeichenfolgen definiert
fa-origin ="origin.center"
Wenn Sie einen Rechtschreibfehler haben, verwendet die App nur die Standardwerte für diese Eigenschaft. Es hat mich ein paar Mal süchtig gemacht, weshalb Sie sehen, dass ich alle meine Eigenschaften als Objekt definiert habe, wie z align.frontNamezum einfachen Lesen.
Klassen hinzufügen
In FA-Direktiven fügen Sie mehrere Klassen als Zeichenfolgen hinzu unterlassen Sie durch Kommata abgetrennt.
{{infoBtnText}}
Wenn Sie versuchen, Klassen hinzuzufügen, indem Sie Oberflächen in JavaScript erstellen, übergeben Sie ein Array von Zeichenfolgen.
var logo = new Surface({
properties: {
...
},
classes: ['backfaceVisibility, class-two']
});
Ich habe eine Weile gebraucht, um das herauszufinden, weil ich nur die Lösung gefunden habe in diesem Thread.
Famo.us + Angular scheint (im Moment) veraltet zu sein
In der Mitte dieses Projekts sah ich, dass Famo.us an einer verbesserten Version des Frameworks arbeitete, das Folgendes enthält Mischform. Famo.us + Angular nutzt diese Ergänzungen (noch) nicht. Dies bedeutet nicht, dass FA irgendwohin geht, da es einwandfrei funktioniert - es ist nur so, dass Sie nicht die neuesten Funktionen erhalten.
Ressourcen
- Famo.us Slackchat
- BizSpark, kostenlos MSFT-Entwicklungslizenzen und Webhosting
- Mailen Sie mir Fragen
- Erfahren Sie, wie Sie daraus eine Cordova-App für mobile Plattformen machen können
Bequemer mit JavaScript
Dieser Artikel ist Teil der Webentwicklungsreihe von Microsoft Technical Evangelists zum praktischen Lernen von JavaScript, zu Open Source-Projekten und zu Best Practices für die Interoperabilität Microsoft Edge Browser und das neue EdgeHTML-Renderer.
Wir empfehlen Ihnen, auf verschiedenen Browsern und Geräten zu testen, einschließlich Microsoft Edge, dem Standardbrowser für Windows 10, mit kostenlosen Tools unter dev.modern.IE::
- Scannen Sie Ihre Site nach veralteten Bibliotheken, Layout- und Eingabehilfen
- Verwenden Sie virtuelle Maschinen für Mac, Linux und Windows
- Remote-Test von Microsoft Edge auf Ihrem eigenen Gerät
- Coding Lab auf GitHub: Cross-Browser-Tests und Best Practices
Eingehende technische Informationen zu Microsoft Edge und der Webplattform von unseren Ingenieuren und Evangelisten:
- Microsoft Edge Web Summit 2015 (Was erwartet Sie mit dem neuen Browser, den neuen unterstützten Standards für Webplattformen und den Gastrednern aus der JavaScript-Community?)
- Woah, ich kann Edge und IE auf einem Mac und Linux testen! (von Rey Bango)
- JavaScript weiterentwickeln, ohne das Web zu beschädigen (de Christian Heilmann)
- Der Edge-Renderer, mit dem das Web funktioniert (von Jacob Rossi)
- Entfesseln Sie 3D-Rendering mit WebGL (von David Catuhe, einschließlich der Vorlon.js und Babylon.js Projekte)
- Gehostete Webanwendungen und Innovationen für Webplattformen (von Kevin Hill und Kiril Seksenov, einschließlich der VerteilerJS Projekt)
Weitere kostenlose plattformübergreifende Tools und Ressourcen für die Webplattform:
