Share
De nos jours, vous n'avez plus besoin d'un logiciel de retouche d'image comme Adobe Photoshop ou Gimp pour créer des maquettes d'interface utilisateur pour vos applications mobiles. Une application conforme au langage Google Material Design de Google se compose généralement uniquement de formes géométriques simples, de couleurs unies, d'icônes et de texte. Un prototype d'interface utilisateur pour une telle application peut être créé facilement en utilisant simplement du code.
Dans cette série en deux parties, vous allez apprendre les bases de Framer, un framework Javascript open source qui vous permet de créer par programmation des prototypes interactifs et réalistes avec de superbes animations pour les applications iOS et Android..
Pour suivre ce tutoriel, vous aurez besoin de:
Parce qu'un prototype Framer n'est rien d'autre qu'une page Web ordinaire écrite en HTML, CSS et Javascript, commençons par créer une page HTML vierge. Je vais appeler cette page index.html.
"html
"
Pour utiliser l’API de Framer sur cette page, vous devez ajouter un scénario tag qui pointe vers le framer.js fichier que vous avez téléchargé.
html
Comme Framer utilise des URL relatives au protocole pour charger diverses ressources, vous ne pouvez pas simplement cliquer deux fois sur le fichier que vous avez créé pour l'ouvrir dans un navigateur. Cela entraînerait des erreurs de réseau. Au lieu de cela, vous devriez y accéder via un serveur HTTP.
Pour créer rapidement un serveur HTTP capable de servir votre page Web, vous pouvez utiliser le logiciel Python. SimpleHTTPServer module.
Ouvrez un terminal, accédez au répertoire contenant la page Web que vous avez créée et exécutez la commande suivante..
bash python -m SimpleHTTPServer 8000
Cela va démarrer un serveur qui fonctionne sur le port 8000 par défaut. Vous pouvez maintenant ouvrir Google Chrome et afficher votre page Web en visitant http: // localhost: 8000 /.
Pour que votre prototype soit réaliste sur un navigateur de bureau, vous devez afficher tous ses éléments dans le cadre d'un appareil mobile. Framer vous permet de dessiner une variété d'appareils mobiles populaires, tels que des iPhones, des téléphones et tablettes Nexus, des iPads, des montres Apple, et bien plus encore. Pour ce tutoriel, j'utiliserai un iPhone 5c rose.
Pour dessiner un périphérique, vous devez d’abord créer une instance du DeviceComponent classe et appelle sa setupContext méthode. Vous pouvez alors changer sa type d'appareil à l'appareil de votre choix. Ajouter un autre scénario Ajoutez une balise à la page HTML créée précédemment et ajoutez-y le code suivant:
"javascript var device = new Framer.DeviceComponent ();
device.setupContext (); device.deviceType = “iphone-5c-pink”; "
Lorsque vous actualisez votre page Web, les éléments suivants doivent apparaître dans la fenêtre de votre navigateur:
Si vous le souhaitez, vous pouvez également rendre une main tenant le périphérique en ajoutant -main à la fin de type d'appareil chaîne. Si l’appareil semble trop gros ou trop petit, vous pouvez utiliser le setDeviceScale méthode pour changer sa taille.
"javascript // Affiche une main avec le périphérique device.deviceType =“ iphone-5c-pink-hand ”;
// Changer la taille device.setDeviceScale (0.3); "
Ceci termine la configuration initiale. Le résultat devrait ressembler à ceci:
Presque chaque élément de votre prototype Framer sera un exemple de Couche classe. UNE Couche est très similaire à un HTML div élément et peut être utilisé pour dessiner des rectangles, des images et du texte.
Créer un Couche vous devez appeler son constructeur et lui transmettre un objet JSON qui définit diverses propriétés du Couche. En créant un Couche, vous spécifiez habituellement ses dimensions (largeur et la taille) et la position (X et y). Vous pouvez également utiliser le centerX et centreY méthodes pour le centrer horizontalement et verticalement. Voici un exemple de la façon de créer un Couche.
"javascript // Dessine un carré blanc
var whiteSquare = new Layer (backgroundColor: “#FFFFFF”, width: 400, height: 400, y: 20);
// Centrer horizontalement whiteSquare.centerX (); ""
Pour afficher une image, vous devez créer un Couche dont image propriété pointe sur le fichier image que vous souhaitez afficher.
"javascript // Dessine une image
var pic = new Layer (image: “painting.jpg”, largeur: 400, hauteur: 400, y: 440);
pic.centerX (); "
Pour afficher du texte (ou HTML), vous pouvez utiliser le html propriété. Vous pouvez également ajouter un style CSS à un Couche en utilisant ses style propriété.
"javascript // Ecrire du texte
var text = new Layer (width: Screen.width, height: 100, y: 860, html: “This is a prototype”, style: fontSize: «50px», textAlign: «center», couleur: «# f1f2f3 ", PaddingTop:" 18px ");"
Avec les trois Couche objets créés à cette étape, le prototype ressemblerait à ceci:
Vous pouvez attacher des gestionnaires d’événements à un Couche en utilisant le sur méthode. le sur méthode est un peu comme Javascript addEventListener méthode. Il prend le nom d'un événement comme premier paramètre et une fonction comme deuxième paramètre..
Voici comment vous ajoutez un Cliquez sur gestionnaire à la texte calque créé à l'étape précédente:
javascript text.on ("click", function () text.html = "J'ai cliqué sur";);
Vous verrez plus de gestionnaires d’événements plus tard dans ce tutoriel..
Framer se distingue de ses concurrents par ses effets d'animation avancés. Avec Framer, vous pouvez animer presque toutes les propriétés de votre Couche objets utilisant le animer méthode. le animer La méthode prend en entrée un objet JSON qui spécifie les propriétés à animer..
L'objet JSON peut également inclure divers détails de configuration de l'animation, tels que sa durée et son comportement..
Par exemple, laissez-moi vous montrer comment créer une animation qui tourne whiteSquare dans un cercle en changeant sa borderRadius.
"javascript // Animate borderRadius
whiteSquare.animate (propriétés: borderRadius: whiteSquare.width / 2,
time: 2, // la durée est la courbe de deux secondes: "eas-in-out" // apply easing); "
Voici un autre exemple qui montre comment animer l'ombre de whiteSquare quand il est cliqué.
"javascript // Animate Shadow
whiteSquare.on (“clic”, fonction ()
Accentsconagua
// Définit d'abord la couleur de l'ombre whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("properties": shadowBlur: 40, shadowSpread: 10,); ); " Notez que seules les propriétés dont les valeurs sont des nombres peuvent être animées. Comme shadowColor n'est pas un nombre, il doit être défini avant d'appeler animer.
Si vous utilisez Framer, il est probable que vous essayez de créer un prototype hautement interactif avec de nombreuses animations. Appeler le animer méthode plusieurs fois sur un Couche peut devenir fastidieux. Au lieu de cela, vous pouvez associer une liste d’états à un Couche et juste basculer entre les états en cas de besoin.
Chaque Couche a un États propriété qui est une instance du États de couche classe. Pour ajouter de nouveaux états à un Couche, vous appelez le ajouter méthode sur le États propriété. Dans l'extrait de code suivant, nous ajoutons deux nouveaux états à la pic objet.
"javascript // Ajoute deux états
pic.states.add (“myState1”: borderRadius: 100,
"myState2": borderRadius: 200); "
L'ajout d'un état n'entraîne pas de changement visuel immédiat. Cependant, quand un Couche bascule d’un état à l’autre, vous pourrez voir l’animation. Pour changer l'état d'un Couche, vous appelez le commutateur méthode sur le États propriété du Couche objet. L’extrait de code suivant vous montre comment modifier l’état de pic quand il est cliqué.
"javascript // Changer d'état lorsque l'on clique dessus
pic.on (“click”, function () // Basculer sur myState2 pic.states.switch (“myState2”);); ")
Faire défiler les états d'un Couche, vous pouvez appeler le suivant méthode de son États objet.
javascript pic.states.next ();
Pour ajouter une couleur ou une image d'arrière-plan à votre prototype, vous créez un BackgroundLayer objet. UNE BackgroundLayer est un Couche dont les dimensions sont égales à celles de l'écran de l'appareil. Voici comment vous ajoutez un gris BackgroundLayer:
javascript var bg = new BackgroundLayer (backgroundColor: "#BDBDBD");
Le prototype Framer n’étant qu’une page HTML ordinaire, vous pouvez également utiliser du CSS pour le styler. Par exemple, si vous n'êtes pas satisfait de la couleur blanche entourant le périphérique, vous pouvez le modifier en appliquant un nouveau style à la page Web. corps étiquette.
"html
"
Avec ces modifications, le prototype ressemblera à ceci une fois les animations terminées:
Faire un Couche glissable, tout ce que vous avez à faire est de régler draggable.enabled propriété à vrai.
"javascript // Autoriser le glissement
pic.draggable.enabled = true; "
Si un Couche glissable, vous pouvez y ajouter des écouteurs d’événements qui répondent à divers événements liés au glissement, tels que dragend et dragmove. Par exemple, voici un dragend gestionnaire d'événement qui retourne pic à sa position d'origine:
"javascript // Handle dragend
pic.on (“dragend”, function () pic.animate (“properties”: x: Screen.width / 2 - pic.width / 2, // Placer au centre y: 440 // Y original );); "
Dans ce tutoriel, vous avez appris les bases de la création de prototypes interactifs pour les applications mobiles à l'aide de Framer. Comme vos prototypes Framer sont des pages Web statiques, vous pouvez les télécharger sur n’importe quel serveur HTTP pour les partager avec vos amis et vos clients..
J'aimerais également vous dire que, si vous maîtrisez Adobe Photoshop, vous n'avez pas à créer les éléments d'interface utilisateur de vos prototypes par programmation. Vous pouvez concevoir la mise en page dans Photoshop et convertir les groupes de calques de votre fichier PSD en images Framer. Couche objets. Vous avez également la possibilité d’acheter et d’utiliser Framer Studio, un environnement de développement intégré spécialement conçu pour travailler avec des projets Framer..
Pour en savoir plus sur le framework Framer, vous pouvez vous reporter à la documentation de Framer. Dans la deuxième partie de cette série, je plongerai davantage dans la navigation, le défilement et l’animation..
