查看: 175021|回复: 520

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

  [复制链接]

该用户从未签到

5

主题

30

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12018
发表于 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动画作用于一个元素的效果。
截图如下:(如果案例图片的原作者不允许我使用,请告知,我随时撤换,敬请谅解!)
102850qq6k3q2ov6yv6yzl.png

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


animateControl v1.0.3.rar

378.24 KB, 下载次数: 1531

售价: 20 金钱  [记录]

animateControl v1.0.3动画控制器

点评

评分: 4.8
得劲  发表于 2020-9-17 11:55
评分: 5
  发表于 2018-2-6 16:15
评分: 3
好人一生平安  发表于 2017-6-3 16:43
新人还下载不了 发表于 2016-2-24 19:12  发表于 2016-12-28 15:15
评分: 5
  发表于 2016-10-17 15:08

评分

参与人数 1金钱 +200 收起 理由
admin + 200 good

查看全部评分

回复

使用道具 举报

该用户从未签到

2

主题

7

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2015-12-3 16:12:52 | 显示全部楼层
单个元素也能使用动画效果吗
回复 支持 1 反对 0

使用道具 举报

该用户从未签到

5

主题

30

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12018
 楼主| 发表于 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”。在这个文件里有动画参数的详细说明。

点评

你好 就代码中的案例测试了下 安卓4.4版本微信浏览网址会出现错误 包括首页和尾页 以及子slide动画 安卓6.0微信浏览器测试正常  发表于 2016-1-25 14:13
回复 支持 1 反对 0

使用道具 举报

该用户从未签到

0

主题

3

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2015-12-2 14:28:02 | 显示全部楼层
很好,很强大,推荐。作者人很好。
回复 支持 反对

使用道具 举报

该用户从未签到

5

主题

30

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12018
 楼主| 发表于 2015-12-3 20:05:29 | 显示全部楼层
cuidezhu 发表于 2015-12-3 16:12
单个元素也能使用动画效果吗

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

点评

评分: 5.0
评分: 5
  发表于 2016-2-26 16:24
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

7

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2015-12-4 12:08:04 | 显示全部楼层
animateControl v1.0.3既可以为单个元素添加单个动画,也可以为单个元素添加多个动画。
可以给我一个单独的例子吗,太笨了,搞不清爽,谢谢
4206784@qq.com
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

3

帖子

25

积分

新手上路

Rank: 1

积分
25
发表于 2015-12-7 10:44:22 | 显示全部楼层
解决了死动画插件在loop模式下不好用的问题,loading之后动画再出现。还可以给一个元素添加多个动画。做的很棒。楼主辛苦。
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

5

帖子

13

积分

新手上路

Rank: 1

积分
13
发表于 2015-12-7 18:13:18 | 显示全部楼层
动画控制器?
回复 支持 反对

使用道具 举报

该用户从未签到

5

主题

30

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12018
 楼主| 发表于 2015-12-7 20:39:43 | 显示全部楼层

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

使用道具 举报

该用户从未签到

0

主题

7

帖子

37

积分

新手上路

Rank: 1

积分
37
发表于 2015-12-8 16:00:51 | 显示全部楼层
刚刚就遇到相关难题  多谢楼主的分享
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-3 09:03 , Processed in 0.084675 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表