aniAuto用法详解

前端开发经常会用到各种插件，今天我来介绍下一款简单易懂，上手快的插件aniAuto

下载链接：https://github.com/justinzzc/aniAuto

文章最后，我会结合做的实例demo再次讲解下用法，其他案例我在下篇文章aniAuto实例demo里做了总结

【aniAuto简介】

官方解释：aniAuto jquery plugin based on animate.css（译为aniAuto是基于animate.css的jquery插件）

用法十分简单，只需添加一些标签属性和一行js脚本就可以组合出复杂的动画效果

【引入】

下载好之后，先引入css

<link rel="stylesheet" type="text/css" href="css/animate.css">

因为aniAuto是基于jQuery开发的插件，所以接下来在引入脚本前，需要先引入jQuery库

<script src="js/jquery-1.12.3.min.js"></script>

最后引入脚本文件aniAuto.min.js

<script src="js/aniAuto.min.js"></script>

【用法】

主要分两部分：语法，加载完页面后触发动画

（1）语法

在文档里将需要配置自动动画的dom节点配置class类 ani-auto

同animate一样，aniAuto也有持续时长，延迟，迭代次数等配置项

可用配置项：

①初始隐藏 (attribute) ani-init-hide

②延迟 (attribute) ani-delay

③持续时长 (attribute) ani-duration

④重复次数 (attribute) ani-iteration

⑤触发元素 (attribute) ani-trigger

⑥自动滚动 (attribute) ani-scroll ani-scroll-offset

下面来依次介绍下：

①初始隐藏 (attribute) ani-init-hide

<div class="ani-auto  tada" ani-init-hide>
刚开始hide
</div>

添加ani-init-hide 属性后初始会隐藏,动画开始的时候出现

②延迟 (attribute) ani-delay

<div class="ani-auto  tada" ani-delay="1s">
            我有1秒的delay
</div>

③持续时长 (attribute) ani-duration

<div class="ani-auto  tada" ani-duration="3s">
      我的duration时长是3秒
</div>

④重复次数 (attribute) ani-iteration

<div class="ani-auto  wobble" ani-iteration="infinite">我将重复infinite无数次</div>

⑤触发元素 (attribute) ani-trigger，也可以理解成是触发时序

<div id="item_1" class="ani-auto  tada" >我第一个触发</div>
<div id="item_3" class="ani-auto  tada" ani-trigger="#item_2">我第三个触发</div>
<div id="item_2" class="ani-auto  flipInX" ani-trigger="#item_1">我第二个触发</div>

⑥自动滚动 (attribute) ani-scroll ani-scroll-offset

<div class=" ani-auto  zoomIn"  ani-scroll ani-scroll-offset="-2%">
      <p>trigger scroll offset 自动滚动</p>
</div>

ani-scroll-offset 值：数值,如:-100 ==> 100px；百分比,如:-2% ==> -2% * $('body').height()

（2）加载完页面后触发动画

在aniAuto文件里有

    /**
     * @param dom parentDom 范围容器节点
     */
    $.aniAuto = function (dom, options) {
        var autoAniItems = $('.ani-auto', dom && $(dom));
        $.each(autoAniItems, function (index, item) {
            autoAni(item, options);
        });
    }

因为所有的动画效果都封装在了函数$.aniAuto里，所以页面加载完成后要调用函数$.aniAuto，所以文档里可以这样写

<script>
    $(document).ready(function () {
        $.aniAuto();
    });
</script>

这样在页面加载完成后即可触发动画

【实例讲解】

接下来通过实例demo讲解下aniAuto用法：

首先说下实例中的知识点：

①效果：tada放大抖动，flipInX沿X轴旋转,rotateIn旋转淡入，swing摇摆，bounceIn弹性进入

②注意：ani-iteration="infinite"迭代次数无限时，触发元素ani-trigger即触发时序失效（因为上一个无限的话就没有停止的一刻，也就轮不上下一个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详解demo</title>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/aniAuto.min.js"></script>
    <style type="text/css">
        .title {
            text-align: center;
        }
        .demos {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .demo {
            padding: 30px;
            margin: 20px 0;
        }
        .item {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: deepskyblue;
            margin-right: 30px;
            margin-bottom: 30px;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--tada放大抖动，flipInX沿X轴旋转,rotateIn旋转淡入，swing摇摆，bounceIn弹性进入-->
<!--注意：ani-iteration="infinite"迭代次数无限时，触发元素ani-trigger即触发时序失效（因为上一个无限的话就没有停止的一刻，
也就轮不上下一个）-->
<div class="demos">
    <div class="slideInUp animated">
        <h1 class="title ">aniAuto详解</h1>
        <div class="demo  "
             style="margin-top: 10px;margin-bottom: 0px;">
            <div id="item_8"
                 class="item ani-auto zoomIn"
                 ani-scroll
                 ani-scroll-offset="-20"
                 ani-trigger="#item_7">
                <p>自动滚动2</p>
            </div>
        </div>
        <div id="item_1" class="ani-auto item tada" ani-delay="3s">
            delay延迟
        </div>
        <div id="item_2" class="ani-auto item flipInX" ani-trigger="#item_1">
            无限时，之后失效
        </div>
        <div id="item_3" class="ani-auto item rotateIn" ani-duration="2s" ani-trigger="#item_2">
            duration触发时长
        </div>
        <div id="item_4" class="ani-auto item swing" ani-delay="1s" ani-trigger="#item_3">
            delay延迟1秒
        </div>
        <div id="item_5" class="ani-auto item bounceIn" ani-init-hide ani-trigger="#item_4">
            hide初始隐藏
        </div>
        <div id="item_6" class="ani-auto item wobble" ani-iteration="3" ani-trigger="#item_5">
            iteration迭代次数
        </div>
        <div class="demo  "
             style="margin-top: 100px;margin-bottom: 400px;">
            <div id="item_7"
                 class="item ani-auto zoomIn"
                 ani-scroll
                 ani-scroll-offset="-20"
                 ani-trigger="#item_6">
                <p>自动滚动1</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $.aniAuto();
    });
</script>
</body>
</html>

猜你喜欢