小程序轮播图实现由远及近动画

搭建资源服务器

1. 全局安装serve：npm install -g serve
2. 在任何你想的地方新建文件夹：resources。resources下新建文件夹：images，用于存放静态图片资源。
3. 启动服务器：serve resources。

小程序项目

代码涉及的文件有：

1. index.html
2. index.wxss
3. index.js

index.html

<view class="swiper-container">
    <swiper style="height:{{swiperH}}" class="swiper" bindchange="handleChange" autoplay circular duration="1500" bindtransition="handleTransition" bindanimationfinish="handleAnimationFinish">
        <swiper-item wx:for="{{imgList}}" wx:key="id" class="swiper-item">
            <view class="box">
                <image src="{{item.url}}" bindload="getHeight" style="height:{{swiperH}}" class="img {{index===curIndex?'image-use-animate':'image-unuse-animate'}}"></image>
                <view class="box-title {{index===curIndex?'title-use-animate':'title-unuse-animate'}}">{{item.title}}</view>
            </view>
        </swiper-item>
    </swiper>
</view>

index.wxss

page{
    height: 100%;
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-container{
    width: 100%;
    border-radius: 10rpx;
    overflow: hidden;
}
.swiper-item .img{
    width: 100%;
    transform-style: preserve-3d;
    transform: translateZ(0);
}
.image-use-animate{
    animation: depthOfFocus 3s 1s ease-in-out both;
}
.image-unuse-animate{
    animation: none;
}
.box{
  width: 100%;
  height: 100%;
  perspective: 300rpx;
  overflow: hidden;
}
.box-title{
    position: absolute;
    left: 0;
    right: 0;
    font-size: 36rpx;
    text-align: center;
    color: #fff;
}
.title-use-animate{
    animation: bounceInUp .5s linear .5s both;
}
.title-unuse-animate{
    animation: none;
}
@keyframes depthOfFocus{
  100% {
    transform: translateZ(60rpx);
  }
}
@keyframes bounceInUp{
    to{
      bottom: 10rpx;
    }
    from{
        bottom: -50rpx;
    }
}

index.js

const host = "http://localhost:3000"
Page({
    data:{
        swiperH:0,
        imgList:[
            {id:"001",url:host+'/images/1.jpg',title:"公司简介"},
            {id:"002",url:host+'/images/2.jpg',title:"愿景及使命"},
            {id:"003",url:host+'/images/3.jpg',title:"发展历程"},
            {id:"004",url:host+'/images/4.jpg',title:"业务架构"},
            {id:"005",url:host+'/images/5.jpg',title:"管理团队"}
        ],
        curIndex:0
    },
    getHeight:function(e){
        var winWid = wx.getSystemInfoSync().windowWidth;//获取当前屏幕的宽度
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;
        var sH = winWid * imgh / imgw + "px"
        this.setData({
          swiperH: sH//设置高度
        })
      },
      handleChange(event){
        //轮播开始
      this.setData({curIndex:event.detail.current});
    },
    handleTransition(event){
        //轮播过程
    //   console.log("enter transition",event);
    },
    handleAnimationFinish(event){
        //轮播结束
    //   console.log("enter animation finish",event);
    }
})

相关链接

css实现元素由远及近的效果
swiper 轮播图圆角滑动变会变成直角然后再回到圆角