swiper如何实现动画效果-小练习初级入门

水深无声 2022-06-10 04:42 458阅读 0赞

下面来写一个使用swiper的Animate 实现动画效果的小练习

1.同样在Hbuilder新建一个项目

2.在css文件夹下 放入下载好的swiper-3.4.2.min.css 和 animate.min.css

3.在js文件夹下 放入 下载好的swiper-3.4.2.min.js 和 swiper.animate1.0.2.min.js

4新建html文件，引入 css文件和 js文件 详细的在稍后的代码中会看到

5.html部分还是要写上 swiper小练习只能怪的一些结构，如下：

<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide slide1">
    					<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">这是心聆教育，一家心理咨询培训机构</p>
    				</div>
    				<div class="swiper-slide slide2">Slide2</div>
    				<div class="swiper-slide slide3">Slide3</div>
    			</div>
    		</div>

6.接下来 如斜段scriptz脚本，目的是跟swiper小练习中的一样，初始化Swiper对象，如下：

7.然后具体用法就是在slide中的任意一个想要添加动画 的元素上加上ani的类，

在需要运动的元素上面增加类名  ani   ，和其他的类似插件相同，Swiper Animate需要指定几个参数：  
  
swiper-animate-effect：切换效果，例如 fadeInUp   
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s  
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

上面这段话是从swiper官网摘抄过来的，供大家参考，然后下面贴上这个小练习的全部html代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />
    		<link rel="stylesheet" href="../css/animate.min.css" />
    		<style>
    			.swiper-container{
    				height: 600px;
    			}
    			.slide1{
    				background-color: red;
    			}
    			.slide2{
    				background-color: blue;
    			}
    			.slide3{
    				background-color: green;
    			}
    			p{
    				color: black;
    				font-size: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide slide1">
    					<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">这是心聆教育，一家心理咨询培训机构</p>
    				</div>
    				<div class="swiper-slide slide2">Slide2</div>
    				<div class="swiper-slide slide3">Slide3</div>
    			</div>
    		</div>
    		<script src="../js/swiper-3.4.2.min.js"></script>
    		<script src="../js/swiper.animate1.0.2.min.js"></script>
    	</body>
    	<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>
    </html>

运行之后的效果就是 这段文字“这是心聆教育，一家心理咨询培训机构” 会有一个动画效果。

本篇的目的也是为了以后能复习swiper 记录的一个入门小练习，方便自己，方便大家。

不积跬步，无以至千里

不积小流，无以成江海