So implementieren Sie animierte Kontrollkästchen in animation.js

anime.js ist eine flexible und leichte JavaScript-Animationsbibliothek. In diesem Artikel wird hauptsächlich anime.js zum Implementieren von Kontrollkästchen mit Strichanimationseffekten vorgestellt. Freunde, die es benötigen, können sich auf

anime.js

beziehen anime.js ist eine flexible und leichte JavaScript-Animationsbibliothek.

Es funktioniert mit CSS, einzelnen Transformationen, SVG, DOM-Eigenschaften und JS-Objekten.

Funktionen

• Spezifische Animationsparameter

• Spezifische Zielwerte

• Mehrere Timing-Werte

• Wiedergabesteuerung

• Bewegungspfad

Bei der Entwicklung von Webseiten oder APPs kann der richtige Einsatz von Animationen das Tüpfelchen auf dem i sein. Der richtige Einsatz von Animationen kann Benutzern nicht nur helfen, die Rolle der Interaktion zu verstehen, sondern auch den Charme und die Benutzererfahrung von Webanwendungen erheblich verbessern. Und in der aktuellen Webentwicklung ist Animation zum Designstandard geworden und gewinnt immer mehr an Bedeutung. Insbesondere an einigen Orten, an denen Benutzer interagieren, kann der Einsatz von Animationen den Benutzern ein besseres Feedback geben und das Bedienerlebnis des Benutzers verbessern.

In der Webentwicklung gibt es viele Techniken zur Implementierung von Animationen. In diesem Artikel verwenden wir anime.js, eine leichte und leistungsstarke Javascript-Animationsbibliothek, um Animationseffekte zu schreiben. Es ist sehr bequem, Animationen zu erstellen und zu verwalten. Wenn Sie mit der Verwendung dieser Bibliothek nicht sehr vertraut sind, können Sie einen zuvor geschriebenen Einführungsartikel lesen. In diesem Artikel wird es hauptsächlich verwendet, um den folgenden Effekt zu erzielen:

Dieser Animationseffekt ist sehr einfach und besteht hauptsächlich aus einem Kreis und einem weißen Häkchen. Dieser Kreis kann sehr einfach mit border-radius in CSS erstellt werden. Die Verwendung ist möglicherweise einfacher als die Verwendung von SVG zum Erstellen eines Kreises und die Codemenge ist geringer. Da jedoch die weiße Prüfung mit SVG implementiert wird, wird der Kreis auch mit SVG implementiert. Und SVG wird mittlerweile immer beliebter, und SVG ist ein Vektor und kann nach Belieben vergrößert oder verkleinert werden. Das Folgende ist der SVG-Code dieses Kreises:

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

Der obige Code ist prägnant und klar. Er zeichnet hauptsächlich einen grünen Kreis mit einem Radius von 16 Pixeln:

Zuerst: Um einen einfachen Animationseffekt zu implementieren, vergrößern Sie den Kreis von Grund auf auf die volle Größe. Um diesen Effekt zu erzielen, müssen wir zwei Dinge tun: 1. Geben Sie dem Kreis einen Klassennamen. 2. Instanziieren Sie eine anime.js-Timeline und kombinieren Sie damit mehrere Animationseffekte. Natürlich verwenden Sie keine Zeitleiste, um Animationseffekte zu erstellen. Sie können den Konstruktor direkt verwenden, um Animationseffekte zu erstellen. Der Vorteil der Verwendung der Zeitleiste besteht jedoch darin, dass Animationen bequemer verwaltet werden können, z. B. die Verbindung und Verzögerung zwischen verschiedenen Effekten usw. Wir können die Animationseffekte präziser steuern. Der Skalierungseffekt wird hier direkt durch Skalieren des SVG erreicht. Der Code lautet wie folgt:

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

Erklären Sie diesen Code zunächst kurz und definieren Sie ihn durch Autoplay, Richtung und Schleife. Die Animation wird automatisch abgespielt und in einer Schleife ausgeführt. Geben Sie mit dem Parameter „targets“ das zu animierende Element an, also das Häkchen, das von 0 auf 1 skaliert ist. Die Animationszeit beträgt 600 Millisekunden, außerdem wird die Bewegungskurve der Animation definiert.

Bei der Animationsproduktion ist die Auswahl der Zykluszeit für die Animationsausführung ebenfalls ein Punkt, der große Aufmerksamkeit erfordert. Einerseits möchten wir nicht, dass Benutzer zu lange warten, was das gesamte interaktive Erlebnis beeinträchtigt und dazu führt, dass sich Benutzer während des Interaktionsprozesses träge fühlen. Andererseits möchten wir nicht, dass alle Interaktionen sofort während der Bedienung durch den Benutzer erfolgen, was auch abrupt erscheint. In diesem Beispiel ist der gesamte Animationszyklus zum Vergrößern und Verkleinern noch etwas lang. Natürlich ist in der Entwicklungsphase ein geeigneter Erweiterungspunkt für das Debuggen hilfreich. Aber in der tatsächlichen Produktionsumgebung gilt: Je einfacher die UI-Animation, desto besser. Daher ist es bei der Animationsentwicklung notwendig, ständig zu debuggen, um den Idealzustand zu erreichen. Tatsächlich kann das Animationserlebnis mit einigen Animationskurven-Tools komfortabler und natürlicher gestaltet werden. Hier können Sie auf einen Leitfaden für Animationskurven von Google zurückgreifen.

使用曲线在动画开发中是一个必不可少的一部分，它可以使动画的体验更加舒服自然。在实际开发中，为不同类型的动画选择不同的动画曲线也是做动画时，必须要注意的一点。曲线选择也受制于具体动画的场景，比如形状与形状之间的动画，抛物线运动等等，总而言之就是要复合物理运动的一个规律。在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中如何实现带进度条的文件拖动上传功能

Das obige ist der detaillierte Inhalt vonSo implementieren Sie animierte Kontrollkästchen in animation.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!