Contenu
- Importer à partir de l'esquisse
- Créer des calques de masque et d'avatar
- Définir les états
- Animer entre les états
- Essayez-le sur un vrai appareil mobile
Le raisonnement derrière le prototypage de conception n'est pas nouveau - c'est le même que tout le buzz autour de la conception dans le navigateur. Lorsque vous voyez un design dans son contexte réel, il est totalement différent. Vous prenez de meilleures décisions lorsque vous n’avez pas à faire des hypothèses sur la façon dont une interface fonctionnera et se sentira. Cela peut sembler être un travail supplémentaire, mais les informations que vous pouvez obtenir en voyant votre conception fonctionner sont inestimables.
Framer est un nouvel outil de prototypage basé sur du code. Vous pouvez créer des maquettes dans Sketch (ou Photoshop) comme vous le feriez habituellement et les importer dans Framer. Ensuite, écrivez un peu de CoffeeScript et vous pouvez accomplir beaucoup de choses.
Je vais vous apprendre les bases du prototypage dans Framer, en utilisant l'exemple d'un prototype d'application iOS avec deux vues: une vue de profil et une vue agrandie de l'image de l'avatar de l'utilisateur. Nous allons prototyper la façon dont la vue agrandie de la photo s'ouvrira et se fermera, et nous l'animerons également. Regardez la démo en ligne ici (pour voir le code source, cliquez simplement sur l'icône dans le coin supérieur gauche). Vous aurez également besoin de l'essai gratuit de Framer, que vous pouvez obtenir sur framerjs.com.
Importer à partir de l'esquisse
La première étape consiste à importer des calques de Sketch dans Framer. Cliquez simplement sur le bouton Importer dans Framer pendant que le dessin est ouvert dans Sketch et choisissez le fichier correct dans la boîte de dialogue qui suit. Framer importera automatiquement les images de chaque couche et les rendra accessibles via un code comme celui-ci:
sketch = Framer.Importer.load "importé / profil"
Utilisez cette variable pour accéder aux couches importées. Par exemple, pour référencer le calque nommé "contenu" dans le fichier Sketch, vous devez taper sketch.content dans Framer.
Créer des calques de masque et d'avatar
La fonction principale de ce prototype est d’élargir l’image de l’avatar lorsque vous la touchez, puis de la fermer lorsque vous la touchez à nouveau. Tout d'abord, nous allons créer deux calques de masque: un masque imbriqué ou un masque à l'intérieur d'un autre masque. Nous animerons les deux masques à la fois pour créer un effet d'ouverture et de fermeture agréable et subtil. Le calque headerMask recadrera la photo de l'avatar en un rectangle lorsqu'il sera agrandi, et le calque de masque la recadrera en un petit cercle sur la vue de profil.
Créez le calque headerMask comme ceci:
headerMask = new Layer width: Screen.width, height: 800 backgroundColor: "transparent"
La première ligne de code crée et nomme le nouveau calque. Ensuite, à l'aide de la syntaxe d'indentation de CoffeeScript, nous définissons les propriétés de largeur, de hauteur et d'arrière-plan. Nous utiliserons un arrière-plan transparent pour que les calques en dessous s'affichent lorsque la photo de l'avatar est agrandie.
Ensuite, créez le calque de masque:
mask = new Largeur du calque: 1000, hauteur: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Nous créons un nouveau calque et définissons les propriétés de la même manière. Le grand borderRadius fait de ce calque un cercle. Nous positionnons le calque de masque de sorte qu'il chevauche le calque d'en-tête, qui a été importé de Sketch. Nous passerons également à 20%, soit 0,2. Une origine Y de zéro définit le point d'ancrage ou l'enregistrement de l'image sur le bord supérieur.
La propriété restante, superLayer, définit le calque headerMask que nous avons créé comme parent de ce nouveau calque. C'est ainsi que fonctionne le masquage dans Framer. Définissez simplement la propriété superLayer et le calque parent masquera l'enfant.
Ensuite, nous devons créer le graphique de l'avatar et le placer à l'intérieur de ces nouveaux masques. Pour zoomer et animer les limites de rognage, nous allons créer manuellement le calque d'avatar. Copiez une photo dans le sous-dossier "images" du dossier du projet. Ensuite, créez un calque en utilisant cette image:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Notez que nous définissons le super-calque de l'avatar comme calque de masque. Les deux sont maintenant imbriqués dans headerMask. Nous définissons également la largeur et la hauteur pour que l'image remplisse complètement la zone masquée.
Enfin, nous allons créer une variable pour stocker la position Y du masque que nous utiliserons pour l'animation. Nous allons le centrer horizontalement, car il est plus grand que l'écran.
maskY = masque.y mask.centerX ()
Définir les états
La première étape de la création d'une animation consiste à définir les états de début et de fin. Dans Framer, les états sont comme des images clés écrites dans le code. Un état n'est qu'une collection de propriétés. Chaque couche a un état par défaut. Pour ce prototype, cette valeur par défaut servira de point de départ pour l'animation, il suffit donc de définir un deuxième état pour chaque couche.
La syntaxe des états est très simple. Faites référence au calque, utilisez la méthode layer.states.add (), puis répertoriez les propriétés à inclure.
sketch.content.states.add (masquer: {opacity: 0}) headerMask.states.add (déplacer: {y: 120}) mask.states.add (agrandir: {échelle: 1.1, y: maskY - 420})
Le deuxième état du calque de contenu, qui a été importé de Sketch et contient tous les autres éléments de l'écran de profil, doit être complètement transparent. De cette façon, lorsque l'avatar est développé, nous aurons un arrière-plan noir et les icônes et éléments importés restants apparaîtront.
La deuxième ligne de code crée un état pour headerMask, qui le déplacera simplement vers le bas à une position Y de 120. Cela permettra au titre et au bouton de fermeture de s'afficher en haut de l'écran lorsque la photo de l'avatar est agrandie. Il animera également les limites de recadrage de la photo d'avatar.
Enfin, un nouvel état pour le calque de masque le redimensionnera et le déplacera vers le haut, en utilisant la variable maskY que nous avons créée précédemment. Étant donné que l'origineY (ou point d'ancrage) du calque de masque est son bord supérieur, nous devons le déplacer vers le haut de 420 pixels afin que le centre de l'image soit visible.
Animer entre les états
Pour animer entre les états par défaut et les nouveaux que nous venons de créer, nous n'avons besoin que de quatre lignes de code supplémentaires. Nous allons définir un gestionnaire de clics sur la couche d'avatar. Lorsqu'un utilisateur appuie dessus sur l'écran du profil, nous passons à la vue développée en parcourant les états. Lorsqu'il sera à nouveau appuyé, nous reviendrons aux états par défaut pour qu'il revienne à un petit cercle. Les mêmes lignes de code gèrent les deux interactions:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
La première ligne de ce bloc configure le gestionnaire de clics sur la couche d'avatar. À chaque fois qu'il est tapé, quelle que soit la façon dont il est recadré ou sa taille, les instructions suivantes s'exécutent.
Ensuite, nous référençons simplement chaque couche et utilisons la méthode layer.states.next () pour basculer les états. Lorsque vous utilisez layer.states.next (), Framer utilisera ses paramètres d'animation par défaut internes. C'est extrêmement pratique, mais vous pouvez créer des animations encore meilleures en affinant les courbes d'animation.
Lorsque vous utilisez des états comme nous le sommes ici, vous pouvez facilement modifier chaque courbe d'animation séparément en utilisant la propriété layer.states.animationOptions. Avec seulement trois légers ajustements, l'animation est complètement différente:
sketch.content.states.animationOptions = courbe: "facilité", heure: 0,3 headerMask.states.animationOptions = courbe: "ressort (150, 20, 0)" mask.states.animationOptions = courbe: "ressort (300, 30, 0) "
Pour le calque de contenu qui s’évanouit et s’insère, nous choisirons un préréglage de courbe simple, une accélération et une durée de l’animation de 0,3 afin qu’elle soit très rapide.
Pour les calques headerMask et Mask, utilisez une courbe à ressort. Pour nos besoins, il vous suffit de savoir que les valeurs de la courbe de ressort modifient la vitesse et le rebond de l'animation. Les valeurs du calque de masque rendront son animation beaucoup plus rapide que celle du headerMask et du contenu. Pour plus de détails sur les paramètres de la courbe de ressort, reportez-vous à la documentation Framer sur framerjs.com/docs.
Essayez-le sur un vrai appareil mobile
Voir la conception sur un appareil réel est tellement plus efficace que d'utiliser des émulateurs, et vous verrez les avantages de votre travail. Framer inclut une fonction de miroir, qui est un serveur intégré qui offre une URL vers votre prototype sur votre réseau local. Visitez simplement l'URL à l'aide de votre appareil.
Vous avez appris tout ce que vous devez savoir pour prototyper vos propres conceptions dans Framer. Qu'est-ce que tu attends?
Mots: Jarrod Drysdale
Jarrod Drysdale est un auteur, consultant en design et créateur de produits numériques. Cet article a été initialement publié dans le numéro 270 du magazine net.
Aimait ça? Lisez-les!
- Créez des prototypes cliquables et dynamiques dans Sketch
- Comment démarrer un blog
- Les meilleurs éditeurs de photos
