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

animateControl v1.0.3动画控制器(附精美案例)

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

bswifi 发表于 2015-12-2 14:28:02

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

tvrfqbmnm 发表于 2015-12-3 20:05:29

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

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

cuidezhu 发表于 2015-12-4 12:08:04

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

混吃等死小姐 发表于 2015-12-7 10:44:22

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

junlie 发表于 2015-12-7 18:13:18

动画控制器?

tvrfqbmnm 发表于 2015-12-7 20:39:43

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

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

mogu 发表于 2015-12-8 16:00:51

刚刚就遇到相关难题多谢楼主的分享
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: animateControl v1.0.3动画控制器(附精美案例)