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

tvrfqbmnm · 发表于 2015-11-29 20:59:46

本帖最后由 tvrfqbmnm 于 2016-1-25 10:56 编辑

*  =================================================  *
*  名称：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 · 发表于 2015-12-3 16:12:52

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

tvrfqbmnm · 发表于 2015-12-4 12:38:43

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”。在这个文件里有动画参数的详细说明。

大空WJ · 发表于 2024-5-8 10:30:15

刚遇到困难就解决了感谢分享！！

一个小谷堆 · 发表于 2023-10-16 09:40:50

正在研究，下载一个看看，

qiuqiuya · 发表于 2023-8-25 14:02:49

这就开始使用·

franktam · 发表于 2023-8-15 12:10:51

123132123123213

qiuzh971016 · 发表于 2023-4-24 14:53:51

这个功能很强大啊

qiuzh971016 · 发表于 2023-4-24 11:29:55

下载下载

qichong · 发表于 2023-1-9 16:42:49

感谢分享

百叶 · 发表于 2022-12-12 16:14:26

好人一生平安

itdiy · 发表于 2022-9-6 09:58:34

积分不够好惨积分不够好惨

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

点评

评分

点评