anime.js でアニメーション化されたチェックボックスを実装する方法

anime.js は、柔軟で軽量な JavaScript アニメーション ライブラリです。この記事では主に、ストローク アニメーション効果を備えたチェック ボックスを実装する anime.js を紹介します。必要な方は、

anime.js を参照してください。

anime.js は、柔軟で軽量な JavaScript アニメーション ライブラリです。

CSS、個々の変換、SVG、DOM プロパティ、JS オブジェクトで動作します。

機能

• 特定のアニメーションパラメータ

• 特定の目標値

• 複数のタイミング値

• 再生制御

• の

  モーションパス

Web ページや APP の開発では、アニメーションを適切に使用することで、さらに効果を高めることができます。アニメーションを正しく使用すると、ユーザーがインタラクションの役割を理解するのに役立つだけでなく、Web アプリケーションの魅力とユーザー エクスペリエンスも大幅に向上します。そして現在の Web 開発では、アニメーションがデザインの標準となり、その重要性がますます高まっています。特にユーザーが対話する一部の場所では、アニメーションを使用するとユーザーにフィードバックをより適切に提供でき、ユーザーの操作エクスペリエンスが向上します。

Web 開発では、アニメーションを実装するためのテクニックがたくさんあります。この記事では、軽量で強力な JavaScript アニメーション ライブラリである anime.js を使用してアニメーション効果を作成します。アニメーションの作成と管理に非常に便利です。このライブラリの使用方法にあまり慣れていない場合は、以前に書かれた紹介記事を読むことができます。この記事では主に次の効果を実現するためにこれを使用します:

このアニメーション効果は非常にシンプルで、主に円と白いチェックマークで構成されています。この円は、CSS の border-radius を使用して非常に簡単に作成できます。 SVGで円を作成するよりも簡単でコード量も少ないかもしれませんが、このエフェクトでは白チェックをSVGで実装しているため、円もSVGで実装しています。そしてSVGは現在ますます人気が高まっており、SVGはベクターなので自由に拡大したり縮小したりすることができます。以下は、この円の SVG コードです:

<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>

上記のコードは、主に半径 16 ピクセルの緑色の円を描画します:

まず、円を作成する簡単なアニメーション効果を実装しましょう。最初からフルサイズに拡大します。この効果を実現するには、次の 2 つのことを行う必要があります: 1. サークルにクラス名を付けます。 2. anime.js タイムラインをインスタンス化し、それを使用して複数のアニメーション効果を組み合わせます。もちろん、アニメーション効果を作成するためにタイムラインを使用するのではなく、コンストラクターを直接使用してアニメーション効果を作成できます。ただし、タイムラインを使用する利点は、さまざまなエフェクト間の接続や遅延など、アニメーションをより便利に管理できることです。アニメーション効果をより正確に制御できます。ここでのスケーリング効果は、SVG をスケーリングすることによって直接実現されます。 コードは次のとおりです。

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

このコードを簡単に説明すると、アニメーションのインスタンスが定義され、自動再生、方向、ループによって自動的に再生されます。ループを繰り返して交互にアニメーションを実行します。ターゲット パラメーターを使用して、アニメーション化する要素、つまり 0 から 1 にスケールされるチェックマークを指定します。アニメーション時間は 600 ミリ秒で、アニメーションのモーション カーブも定義されます。

アニメーション制作において、アニメーションの実行サイクルタイムの選択も非常に注意が必要なポイントです。一方で、ユーザーがあまり長く待たされると、インタラクティブなエクスペリエンス全体が低下し、ユーザーがインタラクション中に反応が遅く感じられることは避けたいと考えています。一方で、ユーザーの操作中にすべてのインタラクションが即座に発生することは望ましくなく、これも唐突に見えることになります。この例では、ズームインとズームアウトのアニメーション サイクル全体がまだ少し長くなっています。もちろん、開発段階では、適切な拡張ポイントがデバッグに役立ちます。しかし、実際の制作環境では、UI アニメーションはシンプルであるほど優れています。そのため、アニメーション開発では理想的な状態を実現するために常にデバッグを行う必要があります。実際、いくつかのアニメーション カーブ ツールを使用すると、アニメーション エクスペリエンスをより快適かつ自然にすることができます。ここでは、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中如何实现带进度条的文件拖动上传功能

以上がanime.js でアニメーション化されたチェックボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。