Quoi de neuf dans Symbols SF 7

Bonjour, je m’appelle Kelsey et je travaille au sein de l’équipe Apple Design. Aujourd’hui, je suis ravie de vous présenter les nouveautés de SF Symbols. Si ce n’est pas déjà fait, regardez l’excellente séance WWDC de l’année dernière : « What’s New in SF Symbols 6 » pour vous mettre à niveau et vous préparer pour la suite. Avant de démarrer, examinons la façon dont les symboles sont conçus et construits, afin de comprendre certaines des nouvelles fonctionnalités de cette année. Chaque symbole est conçu avec soin pour transmettre une idée ou un sentiment immédiatement reconnaissable. Ces idées sont ensuite traduites en un concept qui commence par un point vectoriel unique, puis lentement prend la forme d’un tracé continu. Chaque point vectoriel et chaque courbe guident la ligne avec intention, afin de définir le caractère et le contour de la forme. Chaque courbe et angle doivent être délibérés, équilibrés et visuellement communicatifs.

Concentrons-nous sur la flèche. Un symbole n’est pas seulement un tracé avec un contour visible, car il ne tient pas compte des détails subtils qui le rendent génial. Il est construit à partir de formes définies avec soin qui permettent un contrôle précis des proportions, de l’espace négatif et du poids visuel. Cela garantit clarté, cohérence ainsi qu’une apparence plus raffinée et intentionnelle. Certaines formes sont créées à l’aide de deux tracés différents, orientés dans des directions opposées, qui permettent à chacun d’affiner son apparence. C’est un élément important pour définir la façon dont ces tracés peuvent s’animer. Passons aux nouveautés pour savoir comment ces détails sont intégrés à nos dernières expériences. Nous commencerons par présenter Draw et ses nouveaux préréglages d’animation et de rendu. Ensuite, nous passerons aux mises à jour de Magic Replace qui est encore plus performant. Nous découvrirons les dégradés et leur application à travers les symboles et les modes de rendu, avant de s’intéresser à l’annotation de vos symboles personnalisés. Nous finirons par les mises à jour de nos API. Tout un programme, alors démarrons ! Nous incluons Draw à SF Symbols. Ces fonctionnalités inspirées de l’écriture manuscrite permettent aux symboles de se dessiner de manière expressive le long de leur tracé défini.

Draw propose deux nouveaux préréglages d’animation. Draw On qui anime le symbole à l’écran, et Draw Off qui anime le symbole hors écran. Ces préréglages profitent de la structure de calque du symbole et peuvent être intégrés à vos expériences, pour mettre en valeur les moments pertinents grâce à l’animation. Draw On et Draw Off prennent en charge les options d’exécution existantes, telles que By Layer, l’option par défaut dans laquelle chaque tracé s’affiche en décalé. Pour un effet plus rapide et immédiat, vous pouvez animer avec Whole Symbol qui rassemble tous les calques dans lesquels chaque tracé commence et finit en même temps. Vous pouvez aussi utiliser notre nouvelle option d’exécution pour les préréglages de dessin, Individually, qui dessine chaque calque un par un et attend que le calque précédent se termine avant de commencer le suivant. Utilisez cette option pour ajouter plus d’intention, en attirant l’attention sur les mouvements individuels. Nous avons conçu Draw pour qu’il soit flexible et permette à chaque symbole de définir son tracé. Par exemple, du vent qui souffle de gauche à droite pour transmettre le mouvement, tandis que ce caractère arabe le dessine soufflant de droite à gauche, ce qui correspond au sens d’écriture. De plus, certains symboles peuvent partir du centre, comme cet exemple symétrique. La compréhension des instructions de tracé disponibles sera essentielle lors de l’annotation de vos symboles personnalisés, mais nous aborderons ce point ultérieurement. Certains symboles sont plus complexes, comme les flèches, qui se composent de deux formes se comportant comme une seule. Draw prend même en charge ces formes composées pour permettre à la pointe de la flèche de suivre son tracé. Ce mouvement peut renforcer la signification d’un symbole et donner vie à votre app. Maintenant que vous connaissez Draw, passons à l’app SF Symbols et à ces nouvelles animations. Draw On et Draw Off ont été ajoutés à la liste des animations dans l’inspecteur. Commençons par Draw On, qui met à disposition les trois options d’exécution abordées précédemment. À l’instar des animations prédéfinies existantes, je peux les prévisualiser dans l’app. Draw Off est identique, mais avec l’option de retour en arrière. Cela indique si le tracé doit suivre les instructions, continuer le mouvement existant ou revenir en arrière en partant de son extrémité. Le dessin est un excellent moyen de donner vie aux symboles par le biais de l’animation, mais il peut aussi être exploité pour transmettre des progrès. Vous vous souvenez que certains symboles prennent en charge le rendu des variables comme moyen de transmettre la force ou la progression à travers la couleur. Pour encore plus de résolution, nous avons ajouté un dessin variable à nos préréglages de rendu. Le dessin variable exploite les nouvelles annotations sur les calques participants.

Il affiche le tracé à un pourcentage spécifique en plus d’une version à opacité réduite du calque. C’est un excellent moyen de visualiser la progression, par exemple lors d’un téléchargement, de refléter la température, ou même de terminer sa séance de yoga.

Revenons à l’app SF Symbols et passons en revue les mises à jour de l’inspecteur de rendu, dans lequel vous pouvez désormais prévisualiser le dessin variable. Nous avons amélioré le sélecteur de rendu de variables existant pour inclure la nouvelle option de dessin.

Je sélectionne Draw et maintenant les calques de dessin participants réagissent au rendu variable, tout comme la couleur variable.

Les symboles peuvent choisir de prendre en charge à la fois la couleur variable et le dessin, mais qu’un seul peut être choisi au moment du rendu. Dans ce cas, vous pouvez utiliser l’option par défaut pour utiliser le mode de rendu variable préféré du système. Outre nos nouvelles animations Draw, nous avons aussi amélioré Magic Replace pour assurer une plus grande continuité lors de l’animation entre des symboles associés. Magic Replace reconnaît les encadrements correspondants pour assurer une transition fluide entre deux états. Si deux symboles partagent le même encadrement, le système les préservera, tout en remplaçant simultanément les différents calques. Nous avons inclus Draw à Magic Replace pour les symboles pris en charge, en profitant de Draw Off pour le symbole sortant et de Draw On pour le symbole entrant. Combiné à la correspondance des encadrements, le système mélangera et assortira ces nouvelles fonctionnalités sur les symboles participants pour offrir la transition la plus fluide et la plus expressive. Ces améliorations peuvent être prévisualisées via le préréglage Magic Replace existant dans l’inspecteur d’animation. Si vous débutez avec l’app SF Symbols, elle se trouve dans le sélecteur d’animation aux côtés des autres préréglages. Les dégradés sont utilisés pour ajouter de la profondeur, de la dimension et un intérêt visuel à un dessin. Cette année, nous sommes ravis d’annoncer l’arrivée des dégradés dans SF Symbols. Une fois appliqué à un symbole, le dégradé crée une sensation d’éclairage inexistante avec des couleurs unies. Le nouveau rendu de dégradé de Symbols SF génère un dégradé linéaire régulier à partir d’une seule couleur source, disponible à la fois sur les couleurs système et personnalisées. Celles-ci sont disponibles dans tous les modes de rendu et peuvent également être appliquées à vos symboles personnalisés.

Les dégradés ont un rendu parfait à toutes les échelles et tailles, mais ils se démarquent vraiment à une taille importante. Exploitez des dégradés lorsque vous souhaitez attirer l’attention sur la profondeur et la dimension des symboles. Revenons à l’app SF Symbols pour prévisualiser ces dégradés, que je peux activer à l’aide de la nouvelle option sous le mode de rendu dans l’inspecteur. Lors de la prévisualisation, le dégradé de couleurs est appliqué à tous les modes de rendu grâce aux options sélectionnées. Nous venons d’examiné ces nouvelles fonctionnalités sur les symboles système, exploitons-les via l’annotation de vos symboles personnalisés. Nous allons vous montrer comment annoter certains de nos symboles système. Si vous souhaitez faire de même, vous pouvez les dupliquer en tant que symboles personnalisés, supprimer les points de repère existants et les annoter avec nous. Pour comprendre le fonctionnement des annotations de dessin, souvenez-vous de la façon dont les symboles sont dessinés. Dans cet exemple avec un cœur, le symbole est construit via deux tracés distincts. Et scribble.variable est dessiné avec une largeur variable. Nous ne pouvons pas nous contenter de suivre les tracés pour créer nos animations. Comment fonctionne réellement Draw ?

Les animations de Draw reposent sur un ensemble de points de repère à placer le long du tracé souhaité. Comme leurs noms l’indiquent, ces points guident la ligne le long du tracé défini. Au minimum, un tracé doit contenir deux points de repère pour être calculé correctement. Un point de départ indiqué par un cercle ouvert, et un point d’arrivée indiqué par un cercle fermé. À mesure que les tracés deviennent plus complexes, des points de repère supplémentaires peuvent être nécessaires pour combler les écarts entre le début et la fin, indiquer plusieurs tracés ou même guider la pointe d’une flèche le long d’un tracé. Certains symboles peuvent exiger des points de repère spécialisés pour aider le système à calculer correctement son tracé. Par exemple, plusieurs sous-tracés peuvent partager un point de départ et un point d’arrivée, tandis que les virages serrés d’un tracé doivent être marqués comme points d’angle. Cela fait beaucoup, alors passons à l’app SF Symbols pour découvrir comment annoter ces symboles. Commençons d’abord par line.diagonal. Je passe en mode Galerie à l’aide des commandes disponibles dans la barre d’outils de l’app. Lorsque vous sélectionnez Draw On ou Draw Off dans la liste des animations, la barre d’outils Draw apparaît en haut du canevas. En cliquant sur le bouton le plus à gauche, j’entre en mode point de repère pour avoir un aperçu de l’emplacement lorsque je me déplace dans la feuille.

Une fois satisfaite de l’emplacement, je place le point de repère d’un simple clic, puis je place mon point suivant. Vous remarquerez que le premier point de repère placé devient automatiquement le point de départ. Lorsque je place mon deuxième point de repère, le système détermine le point de terminaison et la direction de tracé par une flèche.

Je suis prête à essayer l’animation.

Parfait, notre ligne se dessine vers le haut le long du tracé défini.

Mais que se passe-t-il dans le cas d’un symbole plus complexe ? Scribble a pas mal de virages, et afin de guider l’animation au mieux, nous devons placer quelques points de repère supplémentaires le long du tracé. Passons à l’app SF Symbols pour tenter de reproduire cette annotation.

J’ai déjà placé quelques points de repère, mais je dois combler les écarts autour des virages serrés. Il est essentiel d’être précis pour veiller à ce que le tracé s’anime en douceur à travers les formes les plus complexes. Testons-le.

Parfait. L’animation gère désormais parfaitement les virages. Nous n’avons annoté que des symboles avec un seul tracé. Que se passe-t-il si vous avez un symbole avec plus d’un tracé à dessiner ? Chaque symbole peut utiliser le même ensemble de règles pour définir son tracé et sa direction spécifiques. Si vous annotez avec moi, choisissez line.3.horizontal pour faire le test.

Je peux annoter ce symbole de différentes manières, mais je vais commencer par annoter chaque ligne de gauche à droite, en sélectionnant chaque calque.

Je souhaite peut-être que la ligne médiane se dessine dans la direction opposée. Je peux faire glisser les points de repère existants le long du tracé pour les déplacer. Vous remarquerez que lorsque je fais glisser le point de départ sur un autre point de repère existant, la direction de la flèche s’inverse, indiquant que le tracé va dans la direction opposée. C’est parfait pour dessiner les symboles dans une seule direction, mais certains symboles ont une directionnalité implicite depuis leur centre. Nous pouvons annoter ces symboles pour les dessiner de manière bidirectionnelle. Pour cela, wave.3.up est un excellent cas d’utilisation. Je commence par placer mon point de départ au centre du tracé, puis des points de repère supplémentaires de chaque côté du point de départ. Le système reconnaît automatiquement sa bidirectionnalité et l’indique par des flèches de chaque côté du point de départ. Dans ce cas, il faut s’assurer que tous mes points de départ s’alignent sur les calques pour garantir un effet symétrique. Je peux activer l’alignement pour m’aider.

À mesure que j’annote les deux tracés suivants, vous remarquez que mes points de repère s’alignent à la fois sur les sommets du tracé et sur les points de repère existants sur d’autres calques.

Je vais tester mon animation pour m’assurer que tous mes tracés partent vers l’extérieur depuis le centre. Nous avons déjà annoté quelques symboles, alors examinons certaines options de configuration supplémentaires pour personnaliser les animations à votre guise. Par défaut, les tracés dessinent avec une extrémité arrondie, mais vous avez peut-être besoin de quelque chose de différent. Dans cet exemple, vous remarquerez que l’animation est un peu abrupte à la fin, car l’extrémité arrondie ne correspond pas au dessin, mais nous pouvons corriger cela. En utilisant le menu contextuel sur les points de départ, nous pouvons configurer des extrémités adaptatives, qui utiliseront le style d’extrémité du tracé pendant l’animation. Réessayons.

Beaucoup mieux. Les tracés s’animent désormais en fonction du style dessiné. Notez que les extrémités adaptatives ne sont disponibles que sur les symboles qui se dessinent dans une seule direction. Tous les symboles examinés jusqu’à présent sont construits à partir de formes dessinées comme un seul sous-tracé. Pourtant, tous les symboles ne sont pas conçus de cette façon. Les symboles construits via plusieurs sous-tracés peuvent aussi être annotés pour Draw, mais ils ont des mécanismes légèrement différents. Annotons ce cercle. Lorsque je place mon premier point de repère, le système détecte qu’il est placé sur deux sous-tracés et le traite à la fois comme le point de départ et le point d’arrivée, ce qui est indiqué par le point à postérieur du point de repère. Par défaut, l’animation s’exécute dans le sens des aiguilles d’une montre.

Si je veux que le cercle se dessine dans le sens inverse des aiguilles d’une montre, je peux changer la direction via le menu contextuel du point de repère et si nécessaire, je peux ajouter des points de repère supplémentaires le long du tracé pour créer des formes plus complexes. Ces types de dessins ne prennent en charge que l’animation unidirectionnelle et ne peuvent pas être annotés pour dessiner de manière bidirectionnelle. Pour les symboles avec des composants dessinés et non dessinés, les composants non dessinés apparaîtront par défaut, mais dans certains cas, comme les flèches, vous devrez effectuer des annotations supplémentaires pour obtenir le résultat souhaité. Voyons comment les annoter.

Naturellement, la composante linéaire du symbole s’anime dans le sens des aiguilles d’une montre. Mais ce serait encore mieux si la pointe de la flèche suivait la ligne lors du tracé. En faisant glisser la pointe de la flèche sur un point de repère déjà placé, je peux créer une association, un élément non dessiné associé à un point de repère. Le point de repère associé indique où l’association apparaîtra et commencera à suivre le tracé. Une fois l’association créée, vous pourrez prévisualiser le tracé associé à son point de repère. Pour le supprimer, il vous suffit de faire glisser le tracé hors du point de repère et le déposer n’importe où ailleurs sur la zone de dessin. Notez que pour créer une association, la pointe de la flèche doit être dessinée comme un tracé séparé de la base. Pour exploiter les associations, vous devrez peut-être revoir et modifier vos symboles personnalisés afin de séparer certains éléments, tels que les pointes de flèche. Nous avons déjà annoté différents symboles grâce au placement automatique des points de repère. Mais tous les symboles ne sont pas aussi simples, nous avons donc inclus des options avancées pour annoter ces tracés plus délicats. Lors du placement des points de repère, le système décide du placement par défaut de chaque côté du point de repère. Dans certains cas, cependant, l’emplacement par défaut peut ne pas être le meilleur choix pour votre symbole.

Dans ce cas, vous pouvez maintenir la touche option enfoncée et faire glisser un côté du point de repère vers l’avant ou vers l’arrière le long du tracé, sans affecter son point associé. Pour les symboles avec de nombreux tracés qui se chevauchent ou directement les uns sur les autres, il peut être difficile de placer votre point de repère sur le sous-tracé droit à partir du niveau du calque. Dans ces cas-là, vous pouvez sélectionner le sous-tracé directement dans la liste des calques, pour imposer un point de repère spécifique sur ce sous-tracé. Lorsque nous avons abordé les points de repère plus tôt dans la séance, nous avons abordé certains types de points de repère, tels que les points de départ et les points d’arrivée. Lors du placement des points de repère, le système détermine les types en fonction du placement le long du tracé. Comme pour le placement, vous pouvez remplacer le type par défaut via le menu contextuel d’un point de repère. Là, vous pouvez décider si vous souhaitez qu’un point de repère soit standard ou qu’il joue le rôle de point final. Vous pouvez toujours définir automatiquement un point de repère pour faire travailler le système à votre place. Vous avez peut-être remarqué un type de point de repère supplémentaire dans cette liste que nous n’avons pas encore abordé : les angles. Pour qu’un tracé contourne des angles particulièrement aigus, le système doit gérer cela d’une manière spéciale, en spécifiant des points de repère comme points d’angle. Tous les autres types de points de repère fonctionnent en associant deux points, un de chaque côté du tracé à dessiner. Ce qui est unique avec les points d’angle, c’est qu’ils associent deux points du même côté du tracé et sont indiqués par un losange. Selon le design de votre symbole, l’annotation peut faire l’objet de quelques essais et erreurs. Si vous devez recommencer, utilisez l’option de réinitialisation du point de repère dans le menu contextuel de chaque calque. Il n’existe pas une seule façon de placer les points de repère. Essayez différents emplacements pour trouver celui qui convient le mieux à votre symbole. N’oubliez pas que les symboles prennent en charge neuf épaisseurs différentes et trois échelles. Il est essentiel de veiller à ce que votre symbole personnalisé s’anime correctement dans toutes les configurations. Mais ne vous inquiétez pas, vous ne devrez en annoter que trois, et le système s’occupera du reste. Lorsque vous annotez un symbole personnalisé, il est important de commencer par annoter le modèle d’épaisseur standard. Cela sert d’annotation de base et c’est la seule épaisseur sur laquelle vous pouvez ajouter et supprimer des points de repère.

Le système interpolera automatiquement les points de repère placés sur les deux autres modèles d’épaisseur : ultrafin et noir.

Notez que chaque point de repère ultrafin et noir est associé à son point de repère d’origine dans le modèle d’épaisseur standard.

Si je déplace le point de repère dans l’épaisseur standard, les points de repère associés dans les modèles ultrafin et en noir bougent également.

Étant donné que les symboles peuvent interpoler entre les épaisseurs à l’aide des modèles, il faut s’assurer que les points de repère associés sont dans le même ordre pour les modèles standard, ultrafin et noir. Examinons l’emplacement actuel de nos points de repère. La plupart assez bien placés. Mais il semble qu’il y ait quelques points de repère mal placés dans le modèle d’épaisseur noir. Nous pourrions facilement corriger ces points de repère, mais nous devons nous assurer qu’ils sont dans le bon ordre. Pour vous aider, nous pouvons activer les numéros qui s’affichent à côté de chaque point de repère pour indiquer l’ordre dans lequel ils doivent s’exécuter, en fonction de l’ordre associé dans le modèle d’épaisseur standard. Vous remarquerez que six, sept et huit sont dans le désordre. Je peux rapidement corriger cela en les faisant glisser vers de nouveaux emplacements. Les points de repère remplacés sont indiqués en orange et permettent de s’assurer que les symboles s’affichent correctement dans toutes les configurations. Et voilà, nous avons terminé d’annoter nos symboles avec Draw. En quelques étapes, vous pouvez animer vos symboles.

Maintenant qu’ils sont annotés, nous pouvons décider si nous voulons activer le dessin variable ou non.

Une fois l’option de rendu variable activée dans la fenêtre contextuelle des paramètres, vous pouvez activer un calque à l’aide du bouton de dessin variable dans la liste des calques. Vous pouvez toujours le prévisualiser avec le curseur de rendu variable que nous avons étudié plus tôt dans la séance. Lors de cette sélection, examinez attentivement chaque calque pour déterminer ceux qui doivent participer. Dans l’exemple du thermomètre, nous n’avons activé qu’un seul calque, ce qui permet à la partie compteur de transmettre la progression sans affecter les autres calques du dessin. Voilà pour l’annotation des symboles personnalisés avec Draw. Maintenant que nous avons présenté les fonctionnalités à venir dans Symbols SF 7, examinons les mises à jour de nos API pour exploiter ces nouvelles fonctionnalités directement dans le code. Pour nos nouveaux préréglages d’animation, vous pouvez appliquer Draw à l’aide du modificateur symbolEffect, en suivant le modèle existant pour les animations de symboles. Dans SwiftUI, lorsque la valeur de isHidden est mise à jour, le symbole disparaît et réapparaît en exécutant l’animation. Dans AppKit et UIKit, vous pouvez spécifier respectivement Draw On et Off pour déclencher chaque animation. À l’instar des autres effets de symbole, si vous souhaitez remplacer l’option par défaut, By Layer, vous pouvez définir le mode d’exécution souhaité directement en ligne.

Pour exploiter le dessin variable, spécifiez le mode pour les valeurs variables dans les sections appropriées. Veillez à définir la valeur de variable souhaitée lors de la configuration du symbole. Enfin, pour exploiter le rendu dégradé, définissez le mode de rendu des couleurs en dégradé à l’aide du modificateur de vue SwiftUI ou via les options de configuration des symboles pour UIKit et AppKit. En procédant à quelques ajouts simples dans votre code, vous exploitez toute la puissance de SF Symbols 7. Au besoin, vous pouvez toujours revenir au bouton Copier le code directement dans l’app SF Symbols. Nous avons abordé pas mal de points, alors examinons les prochaines étapes pour profiter de ces nouvelles fonctionnalités.

Téléchargez la nouvelle version bêta de SF Symbols 7 pour parcourir les mises à jour de notre bibliothèque de symboles, prévisualiser les dégradés et découvrir toute la puissance de Draw. Examinez vos dessins personnalisés pour vous assurer qu’ils sont conçus de manière à exploiter toutes les options d’annotation disponibles. Et parcourez la documentation de nos frameworks pour plus d’informations sur l’exploitation de ces nouvelles fonctionnalités directement dans le code. Et c’est la fin de la séance Quoi de neuf dans SF Symbols 7. Nous avons hâte de voir comment vous exploiterez ces nouvelles fonctionnalités.