使用Animate让元素移动

在详细介绍之前，让我们先来看一下Animate的效果

Animate基础动画效果

代码块：

 .a{
            width: 100px;
            height: 100px;
            background-color: #2A8AAD;
            position: absolute;
        }

<div id="test" class='a'></div>

 !(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            }).moveDirection({
                obj: test,
                direction: 'top',
                speed: 1000,
                position:500,
            }).moveDirection({
                obj: test,
                direction: 'left',
                speed: [1000,'_|_'],
                position:10,
            })
        },500)

    })()

文件链接​​​​​​​

 元素移动动画Animate.js-Javascript文档类资源-CSDN文库

一、Animate介绍

Animate是封装类似于Jq的animate效果，操作简单，对于只需要对页面进行简单动画处理比较友好。

Animate可以操作元素的left，top，witdh，height，opacity属性，在使用时请将元素position设置为absolute或fixed（当然也可以设置为relative，如果您不在乎页面其他元素的布局）。

Animate可以设置动画执行时长和动画执行步频(每5ms元素移动等操作的大小)，也可设置快进快出和慢进慢出，同时，对于不同设备而言，由于设备的算力、浏览器等不同，所以Animate无法准确在准确的时长内执行完动画，一般情况下会长于设置时间，也有可能是本人技术有限，无法优化动画执行的效率，所以Animate内置时间修正属性将在下面详细介绍。

Animate内置动画调用队列，对于多次调用Animate时，Animate可以对同元素的同属性进行队列调用，也可对同元素不同属性进行队列调用。自然，如果您不需要队列调用，Animate也可也忽略后续的调用。

Animate可以对正在执行的动画暂停、复位、到达处理，可以对队列中的等待调用动画清除。

二、Aniamte使用

1、属性介绍

• obj——需要执行动画效果的元素<object>
• direction——执行方向 <string><left|height|width|heigth|opacity>
• position——最终位置<number>
• speed——执行时长或执行步频，该属性可以设置多种属性，string类型的"normal","fast","slow"，分别时长是1s、0.5s、2s，默认为"normal"。number类型，当值<=100时，则是执行时长(ms)，如果值>100则是每5ms的执行步频。Array类型时[<string|number>,<string>]，第一个值时执行时长，第二个值时执行过程效果，如：快进快出
• callMode——是否使用队列对同元素动画链式调用。使用"chain",不使用"alone"，默认为chain
• differentDirection——是否允许同元素在不同方向上同时执行<boolean>
• correct——执行时长修正<number>
• multiple——形式倍数，是对于快进快出等效果的明显程度，该值越大效果越明显<number>

2、函数

moveDirection()

执行动画效果，参数是以键值对的形式传入，全部属性见属性介绍

stop()

暂停动画效果，或清除等待队列

参数：

• obj——需要暂停的元素<object>
• direction——需要暂停的方向<string><left|height|width|heigth|opacity|any>
• queue——是否清除调用队列<boolean>
• num——需要处理的动画数量，如果为-1则全部清除<number>
• type——处理效果<string><arrive|reset|stop>，注意，本属性对清除队列无效

3.简单使用

下面是Animate的简单使用效果，注意，这里只有javaScript代码

!(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            })
        },500)

    })()

这行代码执行时会让id为test的元素向右在1000ms时间内到达1000px的位置。

效果

Animate基本效果

!(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: [1000,'_|_'],
                position:1000,
            })
        },500)

    })()

将speed设置为Array，第一个值为运动时长，第二个则为执行效果，快进快出"_|_"，蛮近慢出"-|-"

效果

快进快出

!(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            }).moveDirection({
                obj: test,
                direction: 'top',
                speed: 1000,
                position:1000,
            })
        },500)

    })()

链式调用让test元素同时向右和向下移动

效果

多方向

!(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            }).moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:10,
            })
        },500)

    })()

同元素同方向的队列调用

效果

同类型同方向队列调用

!(function () {
        let test = document.getElementById('test');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            }).moveDirection({
                obj: test,
                direction: 'top',
                speed: 1000,
                position:500,
                differentDirections: false,
            })
        },500)

    })()

同元素不同方向的队列调用

效果

同类型不同方向队列调用

!(function () {
        let test = document.getElementById('test');
        let test2 = document.getElementById('test2');
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 1000,
                position:1000,
            }).moveDirection({
                obj: test2,
                direction: 'top',
                speed: 1000,
                position:500,
            }).moveDirection({
                obj: test2,
                direction: 'left',
                speed: 1000,
                position:1000,
            })
        },500)

    })()

不同元素一起移动

效果：

多个元素同时移动

对于快进快出的不同倍数的效果

multiple : 5

Animate快进快出5倍效果

multiple : 10

Animate快进快出10倍效果

4.暂停动画

对于stop函数不在过多介绍，只简单展示使用效果

代码

!(function () {
        let test = document.getElementById('test');
        let test2 = document.getElementById('test2')
        let test3 = document.getElementById('test3')
        setTimeout(()=>{
            Animate.moveDirection({
                obj: test,
                direction: 'left',
                speed: 3000,
                position: 1000,
            }).moveDirection({
                obj: test2,
                direction: 'left',
                speed: 3000,
                position: 1000,
            }).moveDirection({
                obj: test3,
                direction: 'left',
                speed: 3000,
                position: 1000,
            })
            setTimeout(()=>{
                Animate.stop(test,'left',false,0,'stop')
                    .stop(test2,'left',false,0,'arrive')
                    .stop(test3,'left',false,0,'reset');
            },1000)
        },500)

    })()

效果

Animate暂停函数