Comment transformer un dessin de procréation en animation web

J'ai récemment commencé à dessiner sur mon iPad en utilisant l'application ProCreate avec Apple Crayer. J'apprécie la flexibilité de dessiner de cette façon. Ce qui m'empêche généralement de peindre à la maison, ce sont des choses de base, comme la configuration, les brosses de nettoyage, la ventilation appropriée et d'autres facteurs qui ne sont pas vraiment liés à la peinture elle-même. ProCreate fait un travail assez agréable pour imiter les processus de peinture et de dessin, mais ajoutant des fonctionnalités numériques telles que l'annulation / refaire, les couches et les effets de couche.

Voici une peinture de procréation que j'ai faite que j'ai fini par exporter et animer sur le Web.

Vous pouvez le faire aussi! Il y a deux effets d'animation de base que nous couvrirons ici: l'effet de parallaxe qui a lieu sur le plan de survol (avec la possibilité de l'éteindre pour ceux qui souffrent de troubles vestibulaires) et le petit effet de dessin lorsque la page se charge.

Parallaxe avec les couches de dessin

J'ai mentionné qu'une partie de la raison pour laquelle j'aime dessiner sur l'iPad est la capacité de travailler en couches. Lors de la création de couches, je prends soin de garder certains «thèmes» sur la même couche, par exemple, les rayures zébrées sont sur une couche et les points sont sur la propre couche sous les rayures.

J'étendrai le dessin au-delà des limites de la fin de la ligne par rapport au coucher, principalement parce que vous pourrez un peu jeter un coup d'œil pendant que nous déplaçons le trajet dans l'effet de parallaxe. Si les lignes sont nettes à tout moment, cela semblera contre nature.

Une fois que j'ai terminé la création de mes calques, je peux exporter des choses en tant que fichier Photoshop (PSD), grâce aux options d'exportation de ProCreat.

Ensuite, je me réunirai quelques-uns, afin que je ne travaille qu'avec environ 8 couches au maximum. J'utilise un plugin Photoshop appelé TinyPNG pour exporter chaque couche individuellement. J'ai entendu dire qu'il existe de meilleurs outils de compression, mais j'ai été assez content de celui-ci.

Ensuite, je vais entrer dans mon éditeur de code et créer un div pour abriter toutes les différentes images contenues dans les couches. Je donne ce positionnement relatif div tandis que toutes les images à l'intérieur obtiennent un positionnement absolu. Cela place les images l'une sur l'autre.

 <div role="présentation">
  <img  src="'https:" alt="Comment transformer un dessin de procréation en animation web" >
  <img  src="'https:" alt="Comment transformer un dessin de procréation en animation web" >
 …
</div>

 # zebra-ul {
  Position: relative;
  Min-Height: 650px;
  largeur maximale: 500px;
}

.zebraimg {
  Position: absolue;
  en haut: 0;
  à gauche: 0;
  Perspective: 600px;
  style transform: Preserve-3d;
  Transform: Translatez (0);
  Largeur: 100%;
  }

La largeur à 100% sur l'image limitera toutes les images à la taille du div parent. Je le fais pour que je les contrôle tous en même temps avec les mêmes restrictions, ce qui fonctionne bien pour des conditions réactives. La largeur maximale et la hauteur min sur le parent me permettent de limiter la façon dont la div se rétrécit et grandit, surtout lorsqu'elle est tombée dans une disposition de la grille CSS. Il devra être flexible, mais avoir également des contraintes et la grille CSS est idéale pour cela.

Ensuite, j'ajoute un auditeur d'événements MouseMove sur le parent div avec javascript. Cela me permet de capturer des informations sur les coordonnées de la souris à l'aide de e.clientx et d'e.clienty.

 const zebraLl = document.QuerySelector («# zebra-ul»)

// planer
ZEBRALL.ADDEVENTLISTERNER ('MOUSEMOVE', E => {
  Soit x = e.clientx;
  Soit y = e.clienty;
})

Ensuite, je vais passer par chacun des dessins et utiliser ces coordonnées pour déplacer les images. Je vais même appliquer des styles de transformation connectés à ces coordonnées.

 const zebraLl = document.QuerySelector («# zebra-ul»)
const zebraillimg = document.queryselectorall ('. Zebraimg')
Taux const = 0,05

//flotter
ZEBRALL.ADDEVENTLISTERNER ('MOUSEMOVE', E => {
  Soit x = e.clientx;
  Soit y = e.clienty;
  
  zebraillimg.ForEach ((el, index) => {
    el.style.transform = 
      `rotatex ($ {x} deg) rotatey ($ {y} deg)`
  })
}) 

Woah, ralentissez là-bas partenaire! C'est beaucoup trop de mouvement, nous voulons quelque chose d'un peu plus subtil. Je vais donc avoir besoin de le ralentir en le multipliant par un taux bas, comme 0,05. Je veux également le changer un peu par couche, donc je vais utiliser l'index des couches pour accélérer ou ralentir le mouvement.

 const zebraLl = document.QuerySelector («# zebra-ul»)
const zebraillimg = document.queryselectorall ('. Zebraimg')
Taux const = 0,05

// planer
ZEBRALL.ADDEVENTLISTERNER ('MOUSEMOVE', E => {
  Soit x = e.clientx;
  Soit y = e.clienty;
  
  zebraillimg.ForEach ((el, index) => {
    Soit Speed ​​= index = 1
    Laissez xpos = vitesse de vitesse * x
    Laissez YPOS = vitesse de vitesse * y
    
    el.style.transform = 
      `rotatex ($ {xpos - 20} deg) rotatey ($ {ypos - 20} deg) tradatez ($ {index * 10} px)`
  })
})

Enfin, je peux créer une case à cocher qui demande à l'utilisateur si vous souhaitez désactiver cet effet.

 <p>
  <input type="checkbox" name="motiona11y">
   Si vous souffrez d'un trouble vestibulaire, vérifiez cela pour désactiver certains des effets 
</p>

 const zebraLl = document.QuerySelector («# zebra-ul»)
const zebraillimg = document.queryselectorall ('. Zebraimg')
Taux const = 0,05
const motioncheck = document.getElementById ('motiona11y')
Soit Ischecked = false

// Vérifiez si quelqu'un a vérifié la partie du trouble vestibulaire
motioncheck.addeventListener ('change', e => {
  ischecked = e.target.checked;
})

// planer
ZEBRALL.ADDEVENTLISTERNER ('MOUSEMOVE', E => {
  Si (ischecked) retourne
  Soit x = e.clientx;
  Soit y = e.clienty;
  
  // ...
})

Maintenant, l'utilisateur a la possibilité de regarder la dimensionnalité en couches du dessin sur le plan de survol, mais peut également désactiver l'effet s'il est gênant.

Effet de dessin

La capacité de faire en sorte que quelque chose ressemble à ce qu'elle a été attirée sur la page existe depuis un certain temps et il y a beaucoup d'articles sur la façon dont cela se fait. Je le couvre également dans un cours que j'ai fait pour Frontend Masters.

La prémisse va comme ceci:

• Prenez un chemin SVG et faites-le précipiter avec Dashoffset.
• Faites du tableau de bord toute la longueur de la forme.
• Animez le dashoffset (l'espace entre les tirets).

Ce que vous obtenez en fin de compte est une sorte d'effet «dessiné».

Mais dans ce dessin particulier, vous avez peut-être remarqué que les pièces que j'ai animées ressemblent à la main, ce qui est un peu plus unique. Vous voyez, bien que cet effet fonctionnera bien pour des dessins plus mécaniques, le Web ne prend pas tout à fait la prise en charge de l'utilisation de lignes effilées (lignes qui varient en épaisseur, comme cela est typique d'une sensation plus dessinée à la main).

Pour cette approche, j'ai introduit le fichier dans Illustrator, tracé les lignes de cette partie de mon dessin, et j'ai rendu ces lignes effilées en entrant dans le panneau de trait, où j'ai sélectionné «plus d'options» et cliqué sur l'option effilée dans la liste déroulante.

J'ai dupliqué ces lignes et créé des chemins uniformes plus grosses en dessous. J'ai ensuite pris ces grosses lignes et les ai animées sur la page. Maintenant, mon dessin montre la forme:

Voici ce que j'ai fait:

• J'ai tracé avec un outil de stylo et utilisé une brosse conique.
• J'ai duplifié la couche et changé les lignes pour être uniforme et plus épais.
• J'ai pris la première couche et créé un chemin composé.
• J'ai simplifié les points de chemin.
• J'ai créé un masque d'écrasement.

À partir de là, je peux tout animer avec Drawsvg et Greensock. Bien que vous n'ayez pas besoin, vous pouvez utiliser CSS pour ce type d'animation. Il y a une tonne de points de chemin, donc dans ce cas, il est donc logique d'utiliser quelque chose de plus puissant. J'ai écrit un autre article qui approfondit la façon de commencer à créer ce type d'animations. Je vous recommande de commencer là-bas si vous y êtes frais.

Pour utiliser des drawsvg, nous devons faire quelques choses:

• Chargez le script du plugin.
• Enregistrez le plugin en haut du fichier JavaScript.
• Assurez-vous que les chemins sont utilisés et qu'il y a des accidents vasculaires cérébraux sur ces chemins.
• Assurez-vous que ces chemins sont ciblés plutôt que les groupes qui les abritent. Les éléments parents pourraient être ciblés à la place.

Voici un exemple très basique de DrawsVG (gracieuseté de Greensock):

Ainsi, dans l'éditeur graphique, il y a un masque de coupure avec des lignes plus astucieuses, qui exposent des lignes uniformes de graisse en dessous. À partir d'ici, nous allons saisir ces chemins plus épais et utiliser le plugin drawsvg pour les animer sur la page.

 // enregistrer le plugin
gsap.registerPlugin (drawsvgplugin);

const Drawlines = () => {
  gsap.set ('. CLS-15, #yellowunderline, .cls-13', {
    Visibilité: «visible»
  })
  
  const timeline = gsap.timeline ({ 
    par défaut: {
      retard: 1,
      facilité: 'circond',
      Durée: 2
    }		  
  })
  .add ('start')
  .fromto ('. CLS-15 PATH', {
    drawsvg: '0%'
  }, {
    drawsvg: «100%»,
    immédiatementRender: vrai
  }, 'commencer')
  .fromto ('# yellowunderline path', {
    drawsvg: '50% 50% '
  }, {
    drawsvg: «100%»,
    immédiatementRender: vrai
  }, 'start = 1')
  .fromto ('. CLS-13', {
    drawsvg: '50% 50% '
  }, {
    drawsvg: «100%»,
    immédiatementRender: vrai
  }, 'start = 1')
}

window.onload = () => {
  Drawlines ()
};

Et là, nous l'avons! Une illustration initiale pour notre site créé à partir d'un dessin en couches dans l'application IPad Procreat. J'espère que cela vous permet de rendre vos projets Web uniques avec de merveilleuses illustrations dessinées à la main. Si vous faites quelque chose de cool, faites-le nous savoir dans les commentaires ci-dessous!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!