Swiper中文论坛

标题: animateControl v1.0.3动画控制器（附精美案例） [打印本页]

作者: tvrfqbmnm 时间: 2015-11-29 20:59
标题: 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动画作用于一个元素的效果。
截图如下：（如果案例图片的原作者不允许我使用，请告知，我随时撤换，敬请谅解！）

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

animateControl v1.0.3.rar

378.24 KB, 下载次数: 1531

售价: 20 金钱 [记录]

animateControl v1.0.3动画控制器

作者: bswifi 时间: 2015-12-2 14:28
很好，很强大，推荐。作者人很好。

作者: cuidezhu 时间: 2015-12-3 16:12
单个元素也能使用动画效果吗

作者: tvrfqbmnm 时间: 2015-12-3 20:05

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

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

作者: cuidezhu 时间: 2015-12-4 12:08
animateControl v1.0.3既可以为单个元素添加单个动画，也可以为单个元素添加多个动画。
可以给我一个单独的例子吗，太笨了，搞不清爽，谢谢
4206784@qq.com

作者: tvrfqbmnm 时间: 2015-12-4 12:38

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

作者: 混吃等死小姐 时间: 2015-12-7 10:44
解决了死动画插件在loop模式下不好用的问题，loading之后动画再出现。还可以给一个元素添加多个动画。做的很棒。楼主辛苦。

作者: junlie 时间: 2015-12-7 18:13
动画控制器？

作者: tvrfqbmnm 时间: 2015-12-7 20:39

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

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

作者: mogu 时间: 2015-12-8 16:00
刚刚就遇到相关难题多谢楼主的分享

作者: 管小猫66 时间: 2015-12-9 16:13
需要，金钱不够，楼主要在能不能发我一份啊

作者: 管小猫66 时间: 2015-12-9 16:16
可以处理动画序列吗？

作者: 管小猫66 时间: 2015-12-9 16:32
楼主好人，插件太强大了，这下解决大问题了，牛人一枚

作者: luchenkai123 时间: 2015-12-9 18:41
求积分。。。。。。

作者: 一玄同一 时间: 2015-12-15 14:44
用了，但是android上的微信浏览器好像不兼容，怎么解决

作者: tvrfqbmnm 时间: 2015-12-15 16:23

一玄同一发表于 2015-12-15 14:44
用了，但是android上的微信浏览器好像不兼容，怎么解决

请发你的源码给我，我来帮你解决兼容性的问题。

作者: cnyuan 时间: 2015-12-16 15:36
费用太高.................

作者: maxd010 时间: 2015-12-17 14:04
查看下我有多少积分

作者: jiangyouhong 时间: 2015-12-20 16:54
不错，看一看

作者: th7583362 时间: 2015-12-20 22:20
强大，感谢楼主啊

作者: 125566025 时间: 2015-12-21 15:05

作者: abcdefg 时间: 2015-12-21 20:32
大神，请教下，我发现有些动画显示会有些问题，比如说zoomIn这个动画会在出现以后闪一下

作者: tvrfqbmnm 时间: 2015-12-21 21:35

abcdefg 发表于 2015-12-21 20:32
大神，请教下，我发现有些动画显示会有些问题，比如说zoomIn这个动画会在出现以后闪一下 ...

zoomIn是表演动画，type参数应设置为1，如果不想让它闪一下再播放动画，就得给这个动画元素再增加一个fadeIn的动画。也就是同时淡入和缩放。

作者: abcdefg 时间: 2015-12-22 09:35

tvrfqbmnm 发表于 2015-12-21 21:35
zoomIn是表演动画，type参数应设置为1，如果不想让它闪一下再播放动画，就得给这个动画元素再增加一个fad ...

谢谢大神回复，但是有没有办法可以直接改成进入动画？因为这样做的话zoomInUp,zoomInLeft的这些效果做不出来。。

作者: abcdefg 时间: 2015-12-22 09:49

tvrfqbmnm 发表于 2015-12-21 21:35
zoomIn是表演动画，type参数应设置为1，如果不想让它闪一下再播放动画，就得给这个动画元素再增加一个fad ...

而且试了下，就算用这个方法，有某些页的动画会显示不出来，就只会直接闪一下

作者: sanyu 时间: 2015-12-23 10:47
哇。很强大。

作者: yiyuanboshi 时间: 2015-12-25 22:13
超赞

作者: a243065157 时间: 2015-12-25 23:40
提问，为什么iphone端可以播放动画，安卓不可以，微信浏览器

作者: zoro 时间: 2015-12-26 21:13

作者: yuluqqvip 时间: 2015-12-28 16:55
你永远不会明白这句话有什么含义

作者: qingp 时间: 2015-12-29 11:07
恩恩很好 good

作者: 夜聆风 时间: 2015-12-30 14:04
loop模式真的完全兼容哇？？没用过，先问问

作者: hjx7671 时间: 2015-12-30 17:47
很好，很强大

作者: 六滴水 时间: 2015-12-30 20:29
正好需要这种效果，楼主强大

作者: 夜聆风 时间: 2015-12-31 10:16
楼主我用你这个做动画嘛在安卓上没得反应，是什么原因呢？？

作者: miniers 时间: 2015-12-31 10:48
animationend事件的时候没有阻止时间冒泡，导致一个动画结束了，把另外一个动画也给停止了

作者: fyunking 时间: 2015-12-31 11:27
看了介绍真的很想试试，只是没有金币啊，楼主可否发一份呢187346402@qq.com

作者: w353284782 时间: 2015-12-31 12:16
金钱不够楼主好人能直接发一份给我嘛，邮箱 353284782@qq.com

作者: miniers 时间: 2016-1-1 19:37
还有一个大坑，安卓微信就是这么被坑的。对象是不保证顺序滴，当成数组来玩有点不可思议

作者: roger 时间: 2016-1-4 17:51
看看

作者: kenljh 时间: 2016-1-4 17:57
没钱啊，发点钱吧

作者: haisong 时间: 2016-1-4 18:01
非常赞~支持一下

作者: hehe12525 时间: 2016-1-4 21:00
我已经做了一些用swiper.animate.min.js的了但是现在我想添加多个动画
我该怎么做

作者: zhangyiaaa 时间: 2016-1-5 09:28
不错嘛？还还不能下载。。。

作者: zhangyiaaa 时间: 2016-1-5 09:29
谁有能不能发一个给我？~！

作者: 米雪儿98 时间: 2016-1-5 09:32
很不错哟，值得依赖

作者: 夜聆风 时间: 2016-1-5 10:30

一玄同一发表于 2015-12-15 14:44
用了，但是android上的微信浏览器好像不兼容，怎么解决

请问一下楼主是怎么解决安卓微信不兼容问题？？谢谢

作者: 拾不起梅 时间: 2016-1-5 11:20
有些安卓机下微信动画不动播放啊怎么解决？

作者: dreamtime 时间: 2016-1-6 09:47
好想下载可惜钱不够啊~

作者: 忆影 时间: 2016-1-6 10:39
求一份啊，没积分，谁给发一份417132187@qq.com

作者: fznine 时间: 2016-1-7 10:51
很好，很强大，推荐。

作者: chrisliu 时间: 2016-1-7 11:07
去哪找这么多金币啊靠

作者: mvpmvp25 时间: 2016-1-7 15:28
这个金钱怎么来的

作者: vonch 时间: 2016-1-7 19:05
怎么才能获得金币？？

作者: amehime 时间: 2016-1-7 21:01
安卓微信浏览器是X5内核。。。。不知道是因为内核原因还是这js文件的原因，反正不能按理想状态播放。
我看到的倒不是不能播放，而是先整个显示出来，然后再开始播放动画。。。情急之下在X5内核下先关闭动画播放了。。。

然后果真还是得优化。。。就算是ios下，动画一多微信下就会闪退。。。

作者: 304212 时间: 2016-1-8 13:33
没有金币怎么办呢

作者: 你不勇敢 时间: 2016-1-8 15:07
刚要做正在熟悉

作者: 114327yechen 时间: 2016-1-11 11:46
不错！很强大

作者: 2818129@qq.com 时间: 2016-1-12 11:27
新来的，积分不够

作者: g40988 时间: 2016-1-12 20:44

:):):):):):):):):):):):):):):):):):):):):):):):):):):)

作者: 359294117 时间: 2016-1-13 11:42
积分太高了，下载不了

作者: xjtarzan 时间: 2016-1-14 16:20
这个是必须要跟Swiper结合才能使用的，还是自己独立出来使用的？？？

作者: _HooK 时间: 2016-1-15 13:57
好东西~难题攻克了，哈哈，谢谢楼主

作者: chunbai 时间: 2016-1-17 21:39
太需要单元素多动画，攒金币

作者: matthewm 时间: 2016-1-21 13:48
看起来好厉害的样子

作者: cyy 时间: 2016-1-21 17:11
等待金币下载，看看是不是很强大

作者: Snares 时间: 2016-1-25 00:05
嵌套问题，在最后的屏嵌套2个屏切换效果用fade，然后。。。有动画的元素全是隐藏的不显示了，loop关了也是这个情况，求解决

作者: ming 时间: 2016-1-25 13:45

一玄同一发表于 2015-12-15 14:44
用了，但是android上的微信浏览器好像不兼容，怎么解决

我也一样在安卓的微信浏览器上主控制器的第一张和最后一张没反应其他子swiper对象的动画也出现问题

作者: ming 时间: 2016-1-25 13:45

tvrfqbmnm 发表于 2015-12-4 12:38
所有的动画配置参数，请在 “js/swiper.animate.param.js”文件中找。
你下载的 animateControl v1.0.3 ...

安卓版微信浏览器浏览有问题

作者: 狮子汪 时间: 2016-2-1 15:45
支持！！

作者: restgame 时间: 2016-2-1 19:17
哈哈哈，太棒啦！！！

作者: restgame 时间: 2016-2-1 19:18
哈哈哈哈哈！！！谢谢

作者: restgame 时间: 2016-2-1 19:18
谢谢分享~~~~

作者: restgame 时间: 2016-2-1 19:18
帅气的额楼主！

作者: sprint123 时间: 2016-2-1 21:54
太棒了，哈哈哈

作者: Misli 时间: 2016-2-14 11:05
很想学习一下啊，写出绚丽H5

作者: Misli 时间: 2016-2-14 11:27
学习学习

作者: w1297335737 时间: 2016-2-14 21:44
多谢楼主！！！！！！！！

作者: jiangwu10057 时间: 2016-2-15 09:53
求学习啊

作者: w1297335737 时间: 2016-2-15 11:20
终于有金币了！

作者: 半圆 时间: 2016-2-19 09:00
新手可惜下不了

作者: Swpery 时间: 2016-2-25 10:26
good good

作者: werisa 时间: 2016-3-4 11:06
很好的实例，，

作者: lhw75 时间: 2016-3-4 11:19
金钱不够呀！想试一下

作者: 鲲鹏 时间: 2016-3-4 15:37
新人下载不了啊

作者: kl521516 时间: 2016-3-7 11:41
如何才能下载，提示金币不足

作者: 17744555044 时间: 2016-3-9 09:31
楼主你好能不能说一下看里面的哪个文件呀不知道怎么样使用呢我是新手最近在学swiper

作者: 17744555044 时间: 2016-3-9 12:43
你好，刚才用的时候发现，设置 effect：‘cube’时，显示的是‘flip’的效果

作者: 17744555044 时间: 2016-3-9 16:50
楼主你好我给一个图片给它效果先让他fadeInUp，然后等完全停止5s之后在给他shake抖动没有效果

作者: 撒大声地 时间: 2016-3-15 15:21
dsaasdasdasdasdasdasd

作者: 从此不再 时间: 2016-3-16 03:23
不错，支持楼主

作者: q310550690 时间: 2016-3-16 10:09
在腾讯X5内核下有很大的BUG 问题。

作者: rongke 时间: 2016-3-27 13:13
顶顶顶顶顶

作者: decsev 时间: 2016-3-29 16:11
楼主，发个未混淆的代码出来呀

作者: 瓦间草 时间: 2016-3-31 21:58
不到咋样下载一个试试

作者: 瓦间草 时间: 2016-3-31 23:13
没钱没金币，怎么分享？

作者: 瓦间草 时间: 2016-3-31 23:14
好插件也不属于我，因为没金币

作者: 瓦间草 时间: 2016-3-31 23:15
居然不是免费的

作者: 瓦间草 时间: 2016-3-31 23:16
降降价呗，楼主

作者: jianggelun 时间: 2016-4-5 11:02
中存在瑕疵

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)