aniAuto用法详解

2018-03-01 10:57:49来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

前端开发经常会用到各种插件,今天我来介绍下一款简单易懂,上手快的插件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  ani-init-hide>刚开始hide</div>

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

②延迟 (attribute) ani-delay

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

③持续时长 (attribute) ani-duration

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

 ④重复次数 (attribute) ani-iteration

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

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

<div   >我第一个触发</div><div   ani-trigger="#item_2">我第三个触发</div><div   ani-trigger="#item_1">我第二个触发</div>

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

<div   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 >    <div >        <h1 >aniAuto详解</h1>        <div             >            <div                                   ani-scroll                 ani-scroll-offset="-20"                 ani-trigger="#item_7">                <p>自动滚动2</p>            </div>        </div>        <div   ani-delay="3s">            delay延迟        </div>        <div   ani-trigger="#item_1">            无限时,之后失效        </div>        <div   ani-duration="2s" ani-trigger="#item_2">            duration触发时长        </div>        <div   ani-delay="1s" ani-trigger="#item_3">            delay延迟1秒        </div>        <div   ani-init-hide ani-trigger="#item_4">            hide初始隐藏        </div>        <div   ani-iteration="3" ani-trigger="#item_5">            iteration迭代次数        </div>        <div             >            <div                                   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>

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台