aniAuto用法详解

来源:互联网 时间:2018-03-01

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

.

相关阅读:
Top