如何使用 Anime.js 创建时间轴动画？

Anime.js 是一个轻量级的 JavaScript 库，具有简单而强大的 API。它适用于 DOM 元素、CSS 和 JavaScript 对象。

先决条件：

1. HTML基础知识
2. CSS基础知识
3. Javascript的基础知识

安装anime.js：在你的项目中使用anime.js有两种方式：

• 您可以下载anime.min.js 文件并直接使用它。
• 只需谷歌anime.js CDN，您将获得链接并将其放入您的脚本标签中，如下所示。

Anime.js 中使用的基本属性：

• 目标： Css 选择器，用于定位和识别必须应用的动画。
• 持续时间：动画应该持续的时间（以毫秒为单位）。
• 延迟：动画开始后的时间（以毫秒为单位）。
• translateX：将元素放置在该 x 坐标处。
• translateY：将元素放置在 Y 坐标处。
• 偏移量：这会在不同动画之间产生延迟。即在前一个动画的 x 秒后开始另一个动画。

创建应用程序和项目结构：这是一个简单的网页。我们需要做的就是创建一个项目，并在其中创建一个名为index.html的 HTML 文件。

mkdir animation && cd animation
touch index.html 

示例 1：

索引.html

HTML

   
      A nice example for timeline
      
      
      
         html{
         min-height: 200vh;
         }
         .ball {
         width: 60px;
         height: 60px;
         margin-top: 120px;
         margin-left:200px;
         border-radius: 50%;
         background-color: pink;
         float: left;
         }
      
   
   
      
         
         
         
         
            let animation = anime.timeline({
            duration: 500, 
            easing: 'easeInOutSine',
            direction: 'alternate',  
            autoplay:false,
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateY: -50,
            backgroundColor: 'rgb(255, 0, 0)'
            }).add({
            targets: '.second',
            translateY: -50,
            backgroundColor: 'rgb(0, 255, 0)'
            }).add({
            targets: '.third',
            translateY: -50,
            backgroundColor: 'rgb(0, 0, 255)'
            });
            window.onscroll=()=>{
            animation.play();
            }
         
   

输出：点击index.html在浏览器中打开它：

示例 2：在此示例中， translateX 属性变得更加清晰。它首先转换为 -ve x 轴，然后转换为 +ve x 轴。

索引.html

HTML

   
      A nice example for timeline
      
      
      
         html{
         min-height:200vh;
         }
         .ball {
         width: 200px;
         height: 200px;
         margin-top: 120px;
         margin-left:200px;
         background-color: pink;
         float: left;
         }
      
   
   
      
         
         
         
         
            let animation = anime.timeline({
            duration: 400, 
            easing: 'easeInOutSine',
            direction: 'alternate',
            autoplay:false,  
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateX: [-100,100],
            backgroundColor: 'rgb(255, 0, 0)',
              
            }).add({
            targets: '.second',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 255, 0)',
              
            }).add({
            targets: '.third',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 0, 255)',
            });
            window.onscroll=()=>{
            animation.play()
            }
         
   

输出：单击index.html文件以在浏览器中打开它。