Bonjour à tous, je suisLicence grise, Je suis très heureux de vous apporter un tutoriel sur les produits secs.
Le contenu du tutoriel est con?u ou la partie code 100% original par moi.Le code est prêt pour tout le mondeTrès simple, vous serez en mesure de l'utiliser.Open source sans droits d'auteur, tout le monde peut l'utiliser en toute confiance~
Je ne sais pas quand, les sites Web cloud de nombreux grands fabricants sont devenus des ic?nes très tridimensionnelles.La migration et la sortie de la souris auront un petit effet intéressant.
▲ La page d'accueil d'AliyunHttps://www.aliyun.com/
▲ L'effet de la souris pour entrer et sortir de petites ic?nes
▲ Page d'accueil de Tencent Cloud
▲ L'effet de la souris pour entrer et sortir de petites ic?nes
Afin d'aider tout le monde à comprendre le processus de réalisation de cet effet, Ah Er a spécialement écrit un tutoriel très détaillé. Vous apprendre à faire et à atteindre ces effets.Pour les concepteurs, il est également possible d'apprendre uniquement à faire la partie de l'ic?ne, permettant au programmeur de Copier mon code directement. 100% garanti que votre conception peut atterrir.
Ne dites pas de bêtises, regardons d'abord le résultat final que j'ai obtenu (visitez le lien bleu ci-dessous pour voir):
Https://www.pslkzs.com/demo/cloud/index.html
▲ C'est l'effet de mon développement et de ma production.
Les modèles du tutoriel sont très simples, car je ne peux pas vous apprendre à modéliser, à éclairer et à rendre pendant des heures... Je dois utiliser le temps le plus court pour vous faire comprendre tout le processus de mise en ?uvre. à l'avenir, vous pourrez utiliser votre propre chemin pour compléter votre propre petite ic?ne et action Alibaba Cloud.
Note spéciale:Cet article n'a rien à voir avec Alibaba et Tencent. Je ne sais pas comment sa conception est faite et comment le code est écrit. J'utilise simplement ma propre expérience pour réfléchir aux bons effets qu'ils produisent et apprendre à tout le monde à faire et à obtenir des effets similaires.
Pour que les concepteurs débutants voient plus clairement l'ensemble du processus, j'ai enregistré un tutoriel vidéo très détaillé,Je vous recommande fortement d'apprendre par vidéoCela garantit que chaque étape est très claire. Si vous ne pouvez pas regarder la vidéo dans l'entreprise, vous pouvez également regarder notre tutoriel graphique directement.
-Section tutoriel vidéo-
Copiez manuellement le lien de texte de soulignement avec la bande bleue ci-dessous et allez à la station b pour vérifier.
Vidéo pédagogique 1:"Préopéras quotidiens""
Https://www.bilibili.com/video/BV1sS4y1o7Yk
Vidéo pédagogique 2:"Utilisez C4D pour créer de petits effets de modèle""
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
Vidéo pédagogique 3:"Utiliser Adobe Xd pour créer des effets d'ic?nes hiérarchiques""
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
Vidéo pédagogique 4:"Réaliser des effets avec du code""
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
Il a été souligné à plusieurs reprises que les concepteurs d'interface utilisateur ne peuvent pas apprendre à écrire du code. Il vous suffit de vous concentrer sur la fa?on dont l'image de la partie livraison est faite. Bien s?r, si vous avez plus de compétences, vous pouvez regarder la vidéo entière est plus propice à élargir vos connaissances. Plus clair sur le flux de travail et la relation entre vous et la R & D,Plus vous en savez, plus vous avez le droit de parler et personne ne peut nier votre conception avec ?inaccessible?.
-Partie Tutoriel graphique-
Tutoriel 1:C4D crée un effet d'ic?ne stéréo
Effet final
étape 1Ouvrez le C4D pour créer un nouveau cube.
étape 2Utilisez l'outil de mise à l'échelle pour aplatir un peu le cube (vous pouvez également ajuster le panneau de propriétés en bas à droite pour entrer la valeur spécifique)
étape 3Ctrl + C Copiez un, Ctrl + V coller. Utilisez ensuite l'outil mobile pour faire glisser le copié vers le haut. De cette fa?on, vous obtenez 2 cubes.
étape 4Utilisez à nouveau l'outil de zoom pour aplatir le dessus.
étape 5Copiez le cube en haut et faites glisser vers le haut. De cette fa?on, vous avez terminé l'ic?ne entière.
▲ Oui, c'est aussi simple que ?a.
étape 6Double-cliquez sur le cadre rouge dans le coin inférieur gauche pour ajouter 1 matériau.
▲ Double-cliquez 3 fois au total pour que vous puissiez construire 3 nouvelles boules de matériau.
étape 7Sélectionnez la balle de matériau que vous venez de construire et changez-la en blanc, orange et noir.
▲ Faites attention au coin inférieur gauche, il y a maintenant trois boules de matériau.
étape 8Faites glisser les trois boules de matériau vers les trois cubes.
▲ Faites attention au coin supérieur droit, chaque cube a une boule de matériau. De cette fa?on, nous avons fait l'ic?ne avec le matériau.
étape 9Sélectionnez le haut du cube blanc. Une image clé dans l'image 0 face à la propriété H K des coordonnées dans le coin inférieur droit.
étape 10Dans la position de l'image 16, pour la propriété H, puis K pour une image clé, la propriété est modifiée à 180 °
De cette fa?on, vous avez terminé l'animation de rotation en haut. L'effet est comme ci-dessous:
De la même manière, le cadre K sur le cube orange. Toute l'animation est terminée. Mais cette fois, nous laissons le cube orange tourner à l'envers (l'attribut H du 16e cadre est changé à-180 °), et tout l'effet est terminé.
étape 11Cliquez sur Rendu> Modifier les paramètres de rendu. Ensuite, sélectionnez le format d'entrée est PNG et assurez-vous de cocher le canal alpha. Le PNG ainsi exporté est un fond transparent.
L'étape 12 change l'image de sortie en "Manuel", l'image de départ est 0 et l'image de fin est 16.
▲ Parce que notre animation a fait 16 images.
étape 13 Cliquez sur Rendu> Ajouter à la file d'attente de rendu.
Cliquez sur le bouton rendu l'étape 14... De cette fa?on, 0 à 16 images, un total de 17 images sont toutes rendues.
▲ Il y aura une barre de progression cyan au milieu. Décidez de la vitesse de rendu en fonction de la configuration de votre ordinateur.
Ce sont les 17 images bien rendues, elles sont toutes des images PNG avec un arrière-plan transparent, ce qui est très parfait. Nous allons les assembler dans le tutoriel 3 pour les livrer aux programmeurs.
Tutoriel 2 Utilisation d'Adobe Xd pour créer un calendrier avec de petits effets en couches
Effet final
L'origine de la production de ce tutoriel est que certains étudiants du groupe WeChat ont demandé s'il y avait une méthode de production rapide dans l'image ci-dessous. J'ai donc pensé à la fonction de transformation 3D d'Adobe Xd. Il a été animé.
▲ Cette image provient d'une capture d'écran d'amis du groupe WeChat, je ne sais pas quel grand dieu l'a fait. Voici juste pour faire des tutoriels gratuits, ne faites pas de commerce, si vous enfreignez accidentellement vos droits, ou si vous n'êtes pas heureux, j'ai utilisé vos photos, vous pouvez me le supprimer en privé.
étape 1Dessinez une vue frontale du calendrier dans Adobe Xd, je l'ai simplifié ici pour ne dessiner que 4 rectangles arrondis. Et obtenez un groupe.
étape 2Sélectionnez ce groupe, cliquez sur le bouton de conversion 3D à droite.
En faisant glisser et en tirant, l'ic?ne du calendrier est transformée en perspective.
étape 3Sélectionnez le calque du bouton vert et réglez son axe z à 250. De cette fa?on, le bouton est suspendu.
étape 4Sélectionnez le rectangle blanc, ajustez son axe z à 150. De cette fa?on, le rectangle blanc est également suspendu.
étape 5Sélectionnez l'avant-dernier calque, ajustez son axe z à 80.
De cette fa?on, nous ferons le résultat final de cet effet. Ensuite, nous avons simplement exporté plusieurs images pour faire tout le travail.
étape 6Sélectionnez ce groupe, changez le nom du groupe en "Groupe 20" et Ctrl E exporte l'image PNG. C'est l'image de notre 20e cadre. Pour être précis, il y a une image de notre dernière image, car il n'y aura probablement pas autant de 20 images.
étape 7Changez l'axe z du rectangle de notre troisième couche à 0 (à l'origine 80), puis changez le nom du groupe en "groupe 19". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 19.
étape 8Changez l'axe z du rectangle blanc à 75 (à l'origine il était 150), puis changez le nom du groupe en "groupe 18". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 18.
étape 9Changez l'axe z du rectangle blanc à 0 (à l'origine il était 75), puis changez le nom du groupe en "groupe 17". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 17.
étape 10Sélectionnez le calque du bouton vert, changez l'axe des z directement à 0, puis changez le nom du groupe en "groupe 16". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 16.
Jusqu'à présent, l'axe Z a un total de 5 images. C'est toute l'animation de l'axe Z. Ensuite, nous avons une fois de plus de faire tourner des images animées de vue... Après avoir sélectionné l'ensemble du groupe, vous constaterez que la rotation de l'axe des x à l'endroit de la transformation tridimensionnelle a été ajustée manuellement par nous à 12 °, la rotation de l'axe des y a été ajustée par nous à-43 °
étape 11Changez la rotation de l'axe des y à-33 °, puis changez le nom du groupe à "Groupe 15". Sélectionnez à nouveau après le groupe Ctrl + E exporter l'image 15 photos et vidéos de la propriété...
étape 12Changez la rotation de l'axe des y à-23 °, puis changez le nom du groupe en "groupe 14". Sélectionnez à nouveau après le groupe Ctrl + exporter E 14e cadres pour les photos...
étape 13Changez la rotation de l'axe des y à-13 °, puis changez le nom du groupe en "groupe 13". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 13.
étape 14Changez la rotation de l'axe des y en-0 °, puis changez le nom du groupe en "groupe 12". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 12.
Nous avons tous fait tourner l'animation de l'axe des y, puis nous avons fait l'animation de rotation de l'axe des x, la méthode est fondamentalement la même.
étape 15Changez l'axe des x à 6 °, puis changez le nom du groupe à "Groupe 11". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 11.
étape 16Changez la rotation de l'axe des x à 0 °, puis changez le nom du groupe à "Groupe 10". Après avoir sélectionné à nouveau le groupe Ctrl + E pour exporter l'image 10.
De cette fa?on, tout notre calendrier arrive. Toutes les images de cadre nécessaires pour l'animation ont été pris. Jetons un coup d'?il à la pile d'images qui vient d'être stockée, il n'y a en fait que 11 images du groupe 10-groupe 20. Cela dit, en fait, nous n'avons que 11 images.
Haha, peut-être que vous ne pouvait pas y penser pendant le processus de production de notre effet est si simple et grossier? Dans le processus de création, nous devons penser hardiment et essayer courageusement.Frères, n'oubliez pas: tant que vous êtes courageux, nous pouvons laisser le congé de maternité!
Le tutoriel sur les effets de Xd est terminé ici, et nous allons les assembler dans le tutoriel 3 pour les livrer aux programmeurs.
Didacticiel 3 via la souris se déplace dans la mise en ?uvre du code, la suppression des effets animés
Ensuite, nous allons assembler les deux effets précédents en une longue image à livrer. Vous devez couper les blancs supplémentaires dans l'image et les assembler sur une longue image verticale. Pour plus de détails, veuillez consulter la figure ci-dessous:
Pour l'étape ci-dessus, vous devez utiliser un logiciel tel que PS pour le faire vous-même manuellement, et vous rappeler la largeur, la hauteur et un total de plusieurs images après la coupe. Avec ces 3 informations clés, a terminé tout le travail, le programmeur peut écrire du code...
Ensuite, j'utiliserai le plug-in que j'ai développé moi-même "PS Efficing Code Assistant" pour terminer tout le travail, et le plug-in produira automatiquement des images de croissance.
Adresses de téléchargement du plugin:
Https://www.pslkzs.com/animate/index.php
Les étapes suivantes sont générées avec le plug-in.Si vous n'utilisez pas le plugin, peu importe, vous pouvez assembler les images manuellement vous-même. L'épissage manuel n'est pas difficile, juste un peu gênant.L'épissage des images de croissance est à la base du fonctionnement du PS (ou d'un autre logiciel de conception), je n'écrivais pas un article ici.
étape 1Ouvrez PS, créez un nouveau document vierge avec une résolution de 1920*1080 72dpi et ouvrez le plug-in "PS Activation Code Assistant".
étape 2Cliquez sur le premier bouton du plugin pour importer. Sélectionnez le dossier dans lequel vous avez précédemment stocké les trames de séquence d'exportation C4D (il ne doit y avoir que des images png dans le dossier, rien d'autre), toutes les images sont "placées" dans PS.
▲ Vous pouvez voir dans le panneau de calque dans le coin inférieur droit, il y a un total de 17 images de 0 à 16.
étape 3Cliquez sur le deuxième bouton du plugin pour trier automatiquement. Après avoir cliqué dessus, l'ordre des calques vous sera donné.
étape 4Cliquez sur le troisième bouton du plugin pour minimiser le diagramme. De cette fa?on, l'endroit vide de l'image est automatiquement coupé pour vous.
Bien que la taille supplémentaire ait été coupée, la largeur de l'ic?ne actuelle est toujours de plus de 400 pixels, nous n'avons besoin que d'une petite ic?ne et elle doit être réduite dans son ensemble.
étape 5Image> Taille de l'image, changez la largeur à 100, de sorte que toute l'ic?ne devient plus petite.
▲ N'oubliez pas de cocher les boutons tels que la réduction des proportions. De cette fa?on, la largeur et la hauteur sont réduites dans leur ensemble.
étape 6Cliquez sur le bouton 4 du plug-in et il générera un fichier avec effet. Il contient un html et une longue image épissée.
Il y aura un dossier généré sur le bureau avec un fichier html et une image png épissée. Si vous ouvrez ce fichier html, vous pouvez voir le code généré.
▲ L'assistant de code à effet dynamique est un outil pour générer des effets en boucle, mais nous n'avons pas besoin de cet effet actif qui a été joué en permanence cette fois. Nous en avons juste besoin pour générer un bon long graphique.
C'est le long graphique qu'il génère, c'est ce dont nous avons besoin. Très parfait.
▲ Le plug-in est également très intime et donne un nom significatif à l'image générée. Le nom de l'image est: w100h1343steps17.png où w représente la largeur, h représente la hauteur de l'ensemble du long graphe et les steps représentent le nombre total d'images. En d'autres termes: la largeur d'une seule petite image est 100px, la hauteur est 1347/17 = 79 et il y a 17 images au total. Ces informations clés doivent être utilisées pour la programmation.
Ici, le travail du concepteur UI est terminé. Le reste est fait par le programmeur frontal. Si vous voulez apprendre le code, ou si votre programmeur ne sait pas comment le faire. Vous pouvez regarder cette vidéo qui m'a enregistré à l'intérieurécrire du code ligne par ligneLe processus de réalisation.
Adresse du tutoriel vidéo:
鄂公网安备 42010202002647号