animateControl v1.0.3动画控制器（附精美案例）

tvrfqbmnm

*  =================================================  *
*  名称：animateControl 动画播放控制器
*  版本：version 1.0.3
*  日期：2015年11月29日
*  作者：Miracle Wei
*  =================================================  *

animateControl v1.0.3 的功能特点：

1、完全兼容swiper的loop模式，完美支持swiper的嵌套。
2、完美支持animate.css，能够为页面中的任意元素添加动画。
3、完美支持为单个元素同时添加多个animate.css动画效果（无需进行HTML标签的嵌套），并且，可以随意控制这些动画效果的播放方式。
4、能够设置每一个动画效果的播放方式：同步播放、依次播放、循环播放。
5、能够设置每一个动画效果的动画类型：进入动画、表演动画、退出动画（在animate.css的源码中，opacity值从0至100的是进入动画，没有opacity属性的是表演动画。opacity值从100到0的是退出动画）。
6、实现了排版效果、动画效果、动画控制的完美分离，极大的提高了开发效率，能够在很短的时间内实现复杂的动画效果控制。
7、animateControl 不与swiper结合时，可对网页中的其它元素添加动画效果，并进行控制。
8、能够让不懂JS代码的人，经过简单的学习，就能快速的制作HTML5+CSS3动态微网页。
9、相较于上一个版本，在 v1.0.3 中对整个核心代码进行了优化，大大提升了运行速率，使动画播放更流畅。
10、相较于上一个版本，在 v1.0.3 中简化了所有参数的名称，让使用变得更加简单（用更少的代码，就能实现更复杂的效果）。
11、本次发布的动画控制器文件为min版，大大减少了文件的体积（下载解压后，文件位置在：js/swiper.animate.min.js）。

以下所附案例，是我采用animateControl v1.0.3重新制作的，可以明显的看到多个animate.css动画作用于一个元素的效果。
截图如下：（如果案例图片的原作者不允许我使用，请告知，我随时撤换，敬请谅解！）


大家在使用的过程中，如果有更好的建议，请告诉我，我会收集起来，在下一个版本中进行优化，同时，为回报你的建议，你也将免费获得下一个最新的版本。
附完整的实例文件如下：

cuidezhu

单个元素也能使用动画效果吗

tvrfqbmnm

cuidezhu 发表于 2015-12-4 12:08
animateControl v1.0.3既可以为单个元素添加单个动画，也可以为单个元素添加多个动画。
可以给我一个单独的 ...

所有的动画配置参数，请在 “js/swiper.animate.param.js”文件中找。
你下载的 animateControl v1.0.3 本身就是一个完整的案例。
animateControl v1.0.3 版本只有一个文件，文件位置在 “js/swiper.animate.js”。在这个文件里有动画参数的详细说明。

bswifi

很好，很强大，推荐。作者人很好。

tvrfqbmnm

cuidezhu 发表于 2015-12-3 16:12
单个元素也能使用动画效果吗

animateControl v1.0.3既可以为单个元素添加单个动画，也可以为单个元素添加多个动画。

cuidezhu

animateControl v1.0.3既可以为单个元素添加单个动画，也可以为单个元素添加多个动画。
可以给我一个单独的例子吗，太笨了，搞不清爽，谢谢
4206784@qq.com

混吃等死小姐

解决了死动画插件在loop模式下不好用的问题，loading之后动画再出现。还可以给一个元素添加多个动画。做的很棒。楼主辛苦。

junlie

动画控制器？

tvrfqbmnm

junlie 发表于 2015-12-7 18:13
动画控制器？

对的，animateControl v1.0.3专门用于为网页元素添加动画，并灵活的对动画效果进行控制。能完美替代swiper中文网发布的swiper.animate.min.js文件。既能与swiper结合，也可脱离swiper独立存在。

mogu

刚刚就遇到相关难题  多谢楼主的分享