anime.js는 애니메이션 체크박스를 만듭니다.-JS 튜토리얼-php.cn

이번에는 anime.js를 사용한 애니메이션 체크박스 를 가져오겠습니다. anime.js를 사용하여 애니메이션 체크박스를 만들 때 주의사항은 무엇인가요?

anime.js

anime.js는 유연하고 가벼운 JavaScript 애니메이션 라이브러리입니다.

CSS, 개별 변환, SVG, DOM 속성 및 JS 개체와 함께 작동합니다.

특징

특정 애니메이션 매개변수
특정 대상 값
여러 타이밍 값
재생 제어
모션 경로

웹페이지나 앱 개발에 있어서 애니메이션의 적절한 사용은 금상첨화일 수 있습니다. 애니메이션을 올바르게 사용하면 사용자가 상호 작용의 역할을 이해하는 데 도움이 될 뿐만 아니라 웹 애플리케이션의 매력과 사용자 경험을 크게 향상시킬 수 있습니다. 그리고 현재 웹 개발에서 애니메이션은 디자인 표준이 되었으며 점점 더 중요해지고 있습니다. 특히 사용자가 상호작용하는 일부 장소에서 애니메이션을 사용하면 사용자에게 더 나은 피드백을 제공하고 사용자의 운영 경험을 향상시킬 수 있습니다.

웹 개발에는 애니메이션을 구현하는 기술이 많이 있습니다. 이 기사에서는 가볍고 강력한 자바스크립트 애니메이션 라이브러리인 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>

로그인 후 복사

위 코드는 간결하고 명확하며 주로 반경 16px의 녹색 원을 그립니다.

anime.js 实现带有描边动画效果的复选框（推荐）

먼저 원을 처음부터 전체 크기로 확대하는 간단한 애니메이션 효과를 구현해 보겠습니다. 이 효과를 얻으려면 다음 두 가지 작업을 수행해야 합니다. 1. 원에 클래스 이름을 지정합니다. 2. anime.js 타임라인을 인스턴스화하고 이를 사용하여 여러 애니메이션 효과를 결합합니다. 물론 애니메이션 효과를 만들기 위해 타임라인을 사용할 수는 없습니다. constructor를 직접 사용하여 애니메이션 효과를 만들 수 있습니다. 하지만 타임라인을 사용하면 다양한 효과 간의 연결 및 지연 등 애니메이션을 보다 편리하게 관리할 수 있다는 장점이 있습니다. 애니메이션 효과를 보다 세밀하게 제어할 수 있습니다. 여기서 스케일링 효과는 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밀리초이고 애니메이션의 모션 곡선도 정의됩니다.

anime.js 实现带有描边动画效果的复选框（推荐）

애니메이션 제작에 있어서 애니메이션 실행을 위한 사이클타임 선정 역시 큰 주의가 필요한 포인트이다. 한편으로 우리는 사용자가 너무 오래 기다리는 것을 원하지 않습니다. 이로 인해 전체 상호 작용 경험이 저하되고 사용자가 상호 작용 중에 느린 느낌을 받게 됩니다. 반면에 우리는 사용자 작업 중에 모든 상호 작용이 즉각적으로 발생하는 것을 원하지 않으며, 이는 또한 갑작스럽게 나타나기도 합니다. 이 예에서는 전체 확대 및 축소 애니메이션 주기가 여전히 약간 깁니다. 물론 개발 단계에서는 적절한 확장 지점이 디버깅에 도움이 됩니다. 하지만 실제 제작 환경에서는 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的一致性。

anime.js 实现带有描边动画效果的复选框（推荐）

导出来代码如下：

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

로그인 후 복사

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

anime.js 实现带有描边动画效果的复选框（推荐）

现在看起来还不错，只剩下最后一步就是这个勾要做一个绘制的动画效果。使用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来开发动画效果还是很简单的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！