Anime.js |具有不同属性的动画

Anime.js是一个小型、轻量级的 JavaScript 库，具有简单而强大的 API。它适用于 DOM 元素、CSS 和 JavaScript 对象。带有 CSS 属性的动画我们可以为任何 CSS 属性设置动画。下面的几个示例使用不同的 CSS 属性进行了描述：

示例 1：首先，我们必须设置一个目标，div 或元素可以是类或 id，我们要为其设置动画。 CSS background-color是我们在这里从blue更改为#F75的 CSS 属性之一。 CSS 边框半径 是我们在这里更改的另一个 CSS 属性。我们将使用 easing，easeInOutQuad 表示只是淡入淡出并显示，之后我们将使用循环 – true来继续重复动画。您可以在此处为我们展示的 backgroundColor 和 borderRadius 的任何 css 属性设置动画。

html

    
        animejs
        
       
    
    
        
            GeeksforGeeks
            
                Animation on background 
                color and border radius.
            
            
            
            
        
        
            let animation = anime({
                targets: "div",
                backgroundColor: "#F75",
                borderRadius: "50px",
                easing: "easeInOutQuad",
                loop: true,
            });
        
    

输出：

示例 2：在本示例中，我们将制作动画 使用 CSS 转换。首先，我们必须设置一个目标，div 或元素可以是我们想要动画的 class 或 id。 CSS translateX()函数将设置为 450 以将 450 移动到正 x 轴)。我们将使用CSS rotate()函数旋转 – 720 度。 CSS background-color 是 CSS 属性，但不是 CSS translate 的一部分，但我们可以用来改变颜色。 CSS 方向属性设置为交替(向后移动和第四移动)。然后将 CSS 持续时间设置为 2000 次，以毫秒为单位)。之后我们将使用循环 – true来继续重复动画。

html

    
        animejs
        
       
    
    
        
            GeeksforGeeks
            
                Animation on background 
                color and border radius.
            
            
        
            
            
        
            let animation = anime({
                targets: "div",
                
               // Move 250 into positive x-axis
                translateX: 450, 
                
               // Degree you want to rotate
                rotate: "720", 
                backgroundColor: "#f75",
                direction: "alternate",
                duration: "2000",
                loop: true,
            });
        
    

输出：

示例 3：可以为包含数值的任何对象属性设置动画。这里我们只是改变了 object 属性的值，并更新了 dom 和 easing：linear 用于对其进行线性动画，您可以更改 round 值以查看它的用途。

html

    
        animejs
        
        
    
    
        
        
            var div = document.querySelector("div");
  
            var object = {
                prop1: 10,
                prop2: "0%",
            };
  
            let animation = anime({
                targets: object,
                prop1: 70,
                prop2: "96%",
                easing: "linear",
                round: 1,
                update: function () {
                    div.innerHTML = JSON.stringify(object);
                },
            });
        
    

输出：

示例 4：此处，值将包含 from value – to value( Dom Attribute )。例如输入字段内的值(数字)

html

    
        animejs
        
        
    
    
        
        
            let animation = anime({
                targets: "input",
                value: [0, 100],
                round: 1,
                easing: "easeInOutExpo",
            });
        
    

输出：

示例 5：在本示例中，我们将为 SVG 属性设置动画。我们在位置 150、150 处创建了一个半径为 50 的圆，然后我们在圆上应用了动画，将中心移动到 200、200 并使半径为 60。

html

    
        animejs
        
        
    
    
        
            GeeksforGeeks
            
                SVG Attribute
            
            
            
                
            
        
        
            let animation = anime({
                targets: ["circle"],
                cx: "300",
                cy: "300",
                r: "60",
                baseFrequency: 0,
                scale: 1,
                loop: true,
                direction: "alternate",
                easing: "easeInOutExpo",
            });
        
    

输出：