利用wx.createAnimation()创建swiper动画

最新推荐文章于 2025-06-03 10:34:26 发布

作泥

最新推荐文章于 2025-06-03 10:34:26 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： mpvue小程序

本文链接：https://blog.youkuaiyun.com/weixin_37787674/article/details/96972464

mpvue小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用MPVue结合wx.createAnimation()方法创建轮播图动画效果。通过监听swiper组件的改变事件实现图片切换时的动画效果，包括图片的缩放和平滑过渡。此外还介绍了如何为当前显示的图片应用不同的动画样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于mpvue利用wx.createAnimation()创建swiper动画

<template>
	<div>
		<swiper
		       v-if="imgUrls.length > 0"
		        :indidator-dots="imgUrls.length > 0"
		        autoplay
		        :circular="circular"
		        interval="10000"
		        @change="handleChange($event)"
		      ><!--改变触发的方法-->
	        <block v-for="(item, index) in imgUrls" :key="index">
	          <swiper-item
	            class="wid100 dja"
	            :class="curIndex===index ? 'active_item' : 'item'"
	            :animation="index == curIndex ? animationData : animationData2"
	          ><!--绑定动画类-->
	            <img :src="item.big_pic" style="width:100%;height:460rpx;"   @click="topic(item.linkurl,item.adv_id)"/>
	            <!--banner图点击跳转-->
	          </swiper-item>
	        </block>
	      </swiper>
      </div>
</template>


<script>
export default {
  data() {
    return { };
  },
  methods: {
	    handleChange(e) {
	      this.curIndex = e.mp.detail.current;
	      this.changeActive();
	      this.changeNormal();
	    },
	    // 收缩
	    changeNormal() {
	      var animation2 = wx.createAnimation({
	        duration: 500,
	        timingFunction: "ease"
	      });
	      this.animation2 = animation2;
	      animation2
	        .scale(0.9)
	        .opacity(0.3)
	        .step();
	      this.animationData2 = animation2.export();
	    },
	    // 展开
	    changeActive() {
	      var animation = wx.createAnimation({
	        duration: 500,
	        timingFunction: "ease"
	      });
	      this.animation = animation;
	      animation
	        .scale(1)
	        .opacity(1)
	        .step();
	      this.animationData = animation.export();
	    }
	}
}
</script>