Comment implémenter des cases à cocher animées dans animation.js

anime.js est une bibliothèque d'animation JavaScript flexible et légère. Cet article présente principalement anime.js pour implémenter des cases à cocher avec des effets d'animation de traits. Les amis qui en ont besoin peuvent se référer à

anime.js

. anime.js est une bibliothèque d'animation JavaScript flexible et légère.

Il fonctionne avec CSS, les transformations individuelles, SVG, les propriétés DOM et les objets JS.

Caractéristiques

• Paramètres d'animation spécifiques

• Valeurs cibles spécifiques

• 🎜>

• Valeurs de synchronisation multiples

• Contrôle de lecture

Trajectoire de mouvement

Dans le développement de pages Web ou d'applications, la bonne utilisation de l'animation peut être la cerise sur le gâteau. L'utilisation correcte de l'animation peut non seulement aider les utilisateurs à comprendre le rôle de l'interaction, mais également améliorer considérablement le charme et l'expérience utilisateur des applications Web. Et dans le développement Web actuel, l’animation est devenue un standard de conception et prend de plus en plus d’importance. Surtout dans certains endroits où les utilisateurs interagissent, l'utilisation de l'animation peut mieux donner des commentaires aux utilisateurs et améliorer leur expérience de fonctionnement.

Dans le développement web, il existe de nombreuses techniques pour mettre en œuvre l'animation. Dans cet article, nous utilisons anime.js, une bibliothèque d'animation javascript légère et puissante, pour écrire des effets d'animation. C'est très pratique pour créer et gérer des animations. Si vous ne savez pas très bien comment utiliser cette bibliothèque, vous pouvez lire un article d'introduction rédigé auparavant. Cet article l'utilise principalement pour obtenir l'effet suivant :

<svg class="checkmark"
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 32 32">
 <circle class="circle"
   cx="16"
   cy="16"
   r="16"
   fill="#0c3"/>
</svg>

Cet effet d'animation est très simple, composé principalement d'un cercle et d'une coche blanche. Ce cercle peut être créé très facilement en utilisant border-radius en CSS. Son utilisation peut être plus simple que d'utiliser SVG pour créer un cercle et la quantité de code est plus petite. Cependant, dans cet effet, puisque la coche blanche est implémentée en utilisant SVG, le cercle est également implémenté en utilisant SVG. Et SVG devient de plus en plus populaire maintenant, et SVG est un vecteur et peut être agrandi ou réduit à volonté. Voici le code SVG de ce cercle :

Le code ci-dessus est concis et clair. Il dessine principalement un cercle vert d'un rayon de 16px :

var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
 .add({
 targets: '.checkmark',
 scale: [
  { value: [0, 1], duration: 600, easing: 'easeOutQuad' }
 ]
 })

Tout d’abord, implémentons un effet d’animation simple, en agrandissant le cercle de zéro à sa taille réelle. Pour obtenir cet effet, nous devons faire deux choses : 1. Donner au cercle un nom de classe ; 2. Instancier une chronologie anime.js et l'utiliser pour combiner plusieurs effets d'animation ; Bien entendu, vous n'utilisez pas la chronologie pour créer des effets d'animation. Vous pouvez directement utiliser le constructeur pour créer des effets d'animation. Cependant, l'avantage d'utiliser la timeline est qu'elle permet de gérer plus facilement les animations, comme la connexion et le délai entre les différents effets, etc. Nous pouvons contrôler les effets d'animation plus précisément. L'effet de mise à l'échelle ici est obtenu directement en mettant à l'échelle le SVG. Le code est le suivant :

Expliquez brièvement ce code. Tout d'abord, une instance d'anime est définie, et via la lecture automatique, la direction et la boucle. défini que l'animation est automatiquement jouée et que l'animation est exécutée alternativement en boucle. Utilisez le paramètre cibles pour spécifier l'élément à animer, c'est-à-dire la coche, qui est mise à l'échelle de 0 à 1. La durée de l'animation est de 600 millisecondes et la courbe de mouvement de l'animation est également définie.

Dans la production d'animation, le choix du temps de cycle d'exécution de l'animation est également un point qui nécessite une grande attention. D’une part, nous ne voulons pas que les utilisateurs attendent trop longtemps, ce qui réduirait l’ensemble de l’expérience interactive et les rendrait lents pendant le processus d’interaction. D'un autre côté, nous ne voulons pas que toutes les interactions se produisent immédiatement pendant l'opération de l'utilisateur, qui semblera également abrupte. Dans cet exemple, l'ensemble du cycle d'animation de zoom avant et arrière est encore un peu long. Bien entendu, au stade du développement, un point d'extension approprié est utile pour le débogage. Mais dans l’environnement de production actuel, plus l’animation de l’interface utilisateur est simple, mieux c’est. Par conséquent, dans le développement d’animations, il est nécessaire de déboguer constamment pour atteindre l’état idéal. En fait, avec certains outils de courbes d'animation, l'expérience d'animation peut être rendue plus confortable et naturelle. Ici, vous pouvez vous référer à un guide des courbes d'animation de Google.

使用曲线在动画开发中是一个必不可少的一部分，它可以使动画的体验更加舒服自然。在实际开发中，为不同类型的动画选择不同的动画曲线也是做动画时，必须要注意的一点。曲线选择也受制于具体动画的场景，比如形状与形状之间的动画，抛物线运动等等，总而言之就是要复合物理运动的一个规律。在CSS3中经常使用的运动曲线是ease-in、ease-out和ease-in-out这三个，比如ease-out表示缓出动画，缓出使动画在开头处比线性动画更快，还会在结尾处减速。ease-out缓入动画，缓入动画开头慢结尾快，与缓出动画正好相反。一般在UI界面动画中，适合使用缓出动画即ease-out。所以，在这个复选框的动画实例中，适合使用缓出动画。

接下来是勾的动画。像勾这类的形状通常由SVG中的路径（path）来实现。具体路径的详细介绍，可以去这篇文章看看。在实际开发中，一般都是使用诸如AI或者是Inkscape等矢量设计工具来设计，然后导出SVG格式。具体到这个勾，实现起来也非常简单，三个锚点就可以实现一个勾的形状。最后设置linecap的属性的值为2.5px来实现勾的两端的圆角效果。

这里要注意的一点的是：要在整个设计过程中，遵守一定的设计原则。比如在这个效果中，一致性就是一个重要的设计原则。如果在静态的图形中，使用了圆角，那么在动画中最好也要保持这个圆角。当然你也可以使用方的角。总之，在整个过程中，请保持UI的一致性。

导出来代码如下：

<path class="check"
  d="M9 16l5 5 9-9"
  fill="none"
  stroke="#fff"
  stroke-width="2.5"
  stroke-linecap="round">

和圆整合一下，效果如下：

现在看起来还不错，只剩下最后一步就是这个勾要做一个绘制的动画效果。使用SVG实现描边动画效果讲了很多了。在anime.js中，实现一个描边绘制动画也非常简单，它提供了anime.setDashoffset这个方法来计算路径（path）的长度，使用它就可以实现一个绘制的动画效果。代码如下：

checkTimeline
 .add({ ... }) /* Previous steps */
 .add({
 targets: '.check',
 strokeDashoffset: {
  value: [anime.setDashoffset, 0],
  duration: 700,
  delay: 200,
  easing: 'easeOutQuart'
 }

还是老套路，先选择要做动画的元素。后面是来设置路径（path）的dashoffset的值，初始的值整个路径（path）的长度，整个路径是在画布外的不可见；通过anime.setDashoffset方法，把它的值设置为0，出现在画布中，就可以实现绘制动画效果。

最后还通过设置勾的transform来移动它的位置，使它居于圆圈的中心位置。

OK，一个带有动画效果的复选框就完成了！可以发现使用anime.js来开发动画效果还是很简单的。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue组件中实现动态添加和删除属性

在vue中处理对象属性改变视图不更新问题？

在vue2.0中不同屏幕适配px与rem转换问题

在Vue中如何实现带进度条的文件拖动上传功能

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!