Swiper中文论坛

标题: 可以执行两种动画的升级版的Swiper Animate [打印本页]

作者: admin 时间: 2015-7-2 10:13
标题: 可以执行两种动画的升级版的Swiper Animate
中文网提供的Swiper Animate小插件由于只能执行一种动画而一直饱受诟病，现有网友进行了改进可以执行两种动画，使用方法稍有改变。

1.下载插件swiper.animate-twice.min.js，加载进页面。

<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
<script src="path/to/swiper.animate-twice.min.js"></script>
</body>
</html>

复制代码

2.初始化

<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>

复制代码

3.在需要动画的元素上添加代码

<div class="swiper-slide a">
<div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">内容1</div>
</div>

复制代码

4.说明

在每个要动画的类上面添加一个 ani的类名然后在后面的DATA内多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画

参数是一致的。

at 500 from bounceInRight use swing during 500

在多少时间开始以什么动画使用什么速度动画用时多少（force 是否使用只在出场的时候判断）

at 后面跟的是动画延迟时间

from 后面跟的是动画样式

use 后面跟的是动画力度

during 后面跟的是动画持续时间

force 后面跟的是是否使用只有在出场动画的时候使用。进场动画无效。。

出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)

原文链接：微场景之 swiper 进场动画和出场动画插件

作者: 哈根达斯01 时间: 2015-7-5 15:36
用了这个原来的插件就用不了了？

作者: truexu0529 时间: 2015-7-7 10:09

哈根达斯01 发表于 2015-7-5 15:36
用了这个原来的插件就用不了了？

这个应该是覆盖了原来的吧。

作者: yunlu 时间: 2015-9-5 14:05
发现使用了这个以后无法翻到下一页了

作者: encryption 时间: 2015-11-30 20:16
本帖最后由 encryption 于 2015-11-30 20:28 编辑

提几个问题
第4、149行， window.document.documentElement.querySelectorAll(".ani")  如果一个页面对swiper有多次使用，这个地方可能会重复调用
第148行 clearInterval(OutAniTimeout) 应该是clearTimeout(OutAniTimeout)吧
第29行  声明的nowtimestamp貌似没什么用
第10、19行最好用正则去实现 slide_in.value.split(/\s+/)
第82行没有明白  如果出现负值怎么办

作者: encryption 时间: 2015-11-30 20:18
clearTimeout(OutAniTimeout)

作者: dushilang 时间: 2016-1-5 11:49
这个怎么是左右滑动的？能改成上下滑动的吗？

作者: 忆影 时间: 2016-1-6 11:43
这个swiper.animate.min.js怎么用，有教程吗

作者: Waney 时间: 2016-1-24 18:59
已下载、学习中，感谢分享

作者: myfrancisco 时间: 2016-2-12 23:40
使用中还有别的问题出现吗

作者: w1297335737 时间: 2016-2-14 21:52
不明觉厉

作者: werisa 时间: 2016-3-4 11:14
学习了，感谢楼主

作者: 演绎精彩人生 时间: 2016-3-16 10:22
使用了之后不能跳转怎么办

作者: 七喜 时间: 2016-3-22 18:53
没有执行动画的次数的参数吗？

作者: jianggelun 时间: 2016-4-5 11:16
怎么重复执行

作者: 成天穿拖鞋 时间: 2016-4-5 16:16
还有好多问题啊亲

作者: jiudan 时间: 2016-4-7 14:01
真是多余，

作者: 流氵良_者 时间: 2016-5-10 11:03
看了上面的评论，感觉不好用啊

作者: aramys 时间: 2016-5-13 15:35
请问，，，怎么让动画无限循环起来啊。

作者: 深呼吸 时间: 2016-6-29 14:19
按照你写的做，不好用呀

作者: aiou 时间: 2016-7-25 18:06
标题: 可以用了
本帖最后由 aiou 于 2016-7-28 11:45 编辑

用了之后如何插音乐呢好像不能用了呢

作者: aiou 时间: 2016-7-28 11:45
大神想问一下用了animat-swiper的适配代码，但是在iPhone6 和plus下面还是有适配问题怎么解决

作者: chenrongchun 时间: 2016-9-19 15:08
学到了，感觉挺强大的

作者: fengshao7758 时间: 2016-10-19 23:53
很好已学习

作者: fengshao7758 时间: 2016-10-19 23:54
很好已学习！！！！！！！！！！！！

作者: xiaosl 时间: 2017-1-18 09:45
写法有点复杂，不够简练

作者: 张哈哈 时间: 2017-2-4 14:16
给力给力给力给力给力给力给力

作者: 守望者888 时间: 2017-2-8 10:49
还是没有看明白

作者: kelly8023 时间: 2017-2-9 10:50
用了这个之前的js不起作用？

作者: wxx.MR 时间: 2017-2-9 20:31
非常感谢！

作者: wxx.MR 时间: 2017-2-9 20:32
非常感谢！

作者: 小菜鸟123 时间: 2017-3-18 15:18
顶，不错，楼主强大

作者: w530385371 时间: 2017-4-18 09:47
正好要用到这添加多个动画

作者: w530385371 时间: 2017-4-18 09:48
学习学习，

作者: szphp 时间: 2017-5-12 14:29
正好要用到这添加多个动画

作者: billt 时间: 2017-7-26 20:19

作者: sp396635614 时间: 2017-10-13 10:01
当执行两种动画的时候，轻微滑动屏幕，没有滑动到下一页，但是动画却会被触发重新执行

作者: alidev 时间: 2018-1-4 13:46
貌似官方不更新啦？？

作者: loveagle 时间: 2018-1-11 12:18
楼主太强了。膜拜—

作者: fuhu 时间: 2018-1-27 16:12
进场结束后，自动执行了出场怎么回事？
4.10
on:{
   init: function(){
      swiperAnimateCache(this); //隐藏动画元素
      swiperAnimate(this); //初始化完成开始动画
   },
   slideChangeTransitionEnd: function(){
      swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
   }
}

作者: JoyTan 时间: 2018-4-8 17:21
学习一下了

作者: jovichin 时间: 2018-4-11 17:40
有点问题，有些动画效果的图，图不显示了

作者: xunhuang 时间: 2018-6-10 19:07
这是个鸡儿用着没反应还不能切换了

作者: xiaolu289 时间: 2018-6-29 15:28
您好，请问swiper.animate的源代码非压缩版本有公开吗？新人想下载学习，却找不到非压缩版的代码...

作者: sailor三千 时间: 2018-10-26 11:35

fuhu 发表于 2018-1-27 16:12
进场结束后，自动执行了出场怎么回事？
4.10
on:{

+1，我是想出场执行一次，点击再执行一次，现在是连着把两个动画都执行了，不知道怎么办

作者: 441661191 时间: 2018-10-26 14:53
非常感谢

作者: 小飞ZJF 时间: 2019-1-14 11:08
infinite 这个无限循环时候后画面会闪一下

作者: cokeyang 时间: 2019-5-6 09:16
加油加油

作者: zxt224 时间: 2019-8-21 17:32

作者: zhengkai 时间: 2020-4-29 10:59
你好，有demo项目包么

作者: Qinver 时间: 2020-12-13 20:58
首先感谢分享，另外已经更新更久了。现在20年了还能用吗？

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