微信小程序如何制作选项卡切换过渡动画案例

一个充满理想却过于富于幻想，一个一无所有却自命清高的，一个涉世不深却自谓看透一切，一个美好却又短暂的年龄

很久之前文章《微信小程序如何自己手写选项卡？》，那时候切换功能可以实现但是缺少过渡动画，市场上的插件是满足日常，但一个简单的下资源下载小程序其实用不到很多的插件

本身自己就已经设计UI，套其他的模板组件修修改改麻烦，还是一个项目只要用到一个选项卡的时候不如自己手写

效果

学习思考

关于横线滑动可以使用以下2种方式

1.Flex布局

2.scroll-view组件

在学习过程中发现动画是基于css3制作的所有使用任意一种方式都是可以的，硬要说视觉上的区别只有scroll-view组件的scroll-into-view滚动元素位置属性

第一种效果用到的css3内容只有2个

学习一：
transition
transform

他处理了底部横线滚动的动画和距离，因此我们得思考如果每个每个选项卡中文字不同就以为view的宽度不同。我们得就获取元素节点的宽度在计算出滚动的距离

对枫瑞来说还是用难度的，在案例上只能把view的宽度固定写，超出4个文字溢出隐藏，体验上会有减低但是滚动距离方便计算

学习二的存在是为了解决上面想实现选项卡文字自由而产生的，因此他的动画是从做左到右边填坑背景色，不用考虑view的宽度和计算滚动距离

学习二方式css3：
animation
@keyframes

小程序是有animation动画的组件，遗憾它在实践中没有实现我们需要的效果

案例

wxml


<view style="margin:50rpx 0;">学习一：</view>
<view>
  <scroll-view scroll-y="true"  class="scroll-view"   enable-passive="true"  enhanced="true"  scroll-x   show-scrollbar="false"    scroll-with-animation="true"  scroll-into-view="{{swID}}">
    <view wx:for="{{tar}}" data-swipe="{{'sw' + index}}"  data-indx="{{index}}"  wx:key="index"  class="scroll-view-item" bindtap="tap" id="{{'sw' + index}}">{{item.name}}</view>
    <view class="pos" style=" transform: translateX({{px + 'rpx'}});"></view>
  </scroll-view>
</view>


<view style="margin:50rpx 0;">学习二：</view>
<view>
  <scroll-view scroll-y="true"  class="scroll-view"   enable-passive="true"  enhanced="true"  scroll-x   show-scrollbar="false"    scroll-with-animation="true"  scroll-into-view="{{swID}}">
    <view wx:for="{{tar}}" data-swipe="{{'sw' + index}}" animation="{{animationData}}"  data-indx="{{index}}"  wx:key="index"  class="scroll-view-item-w" bindtap="tap" id="{{'sw' + index}}">{{item.name}}
    <view wx:if="{{active == index}}" class="active-item">{{item.name}}</view>
    </view>
  </scroll-view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    px: '10',
    swID: '',
    active: 0,
    animationData: {},
    tar: [{
        name: 'Star框架'
      },
      {
        name: 'wordpress后台'
      }, {
        name: '安装文档'
      }, {
        name: '枫瑞博客网'
      }
    ]
  },
  onLoad() {
  },
  tap(e) {
    // 点击计算固定view的宽度乘以索引值
    this.setData({
      swID: e.currentTarget.dataset.swipe,
      active: e.currentTarget.dataset.indx,
      px: (e.currentTarget.dataset.indx * 240)
    })
  },

})

wxss

.scroll-view {
  height: 130rpx;
  white-space: nowrap;
}

.scroll-view-item {
  padding: 28rpx 20rpx;
  margin: 0 10rpx;
  text-align: center;
  border-radius: 10rpx;
  display: inline-block;
  width: 180rpx;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  position: relative;
}

/* 清除滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* 学习一底部横条 */
.pos {
  /* 移动动画时间 */
  transition: all 0.5s;
  bottom: 0rpx;
  width: 220rpx;
  height: 10rpx;
  border-radius: 200rpx;
  background-color: rgb(0, 162, 255);
}


.scroll-view-item-w {
  padding: 0 30rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 10rpx;
  border-radius: 10rpx;
  display: inline-block;
  position: relative;
}
  /* 动画名称和时间 曲线等 */
.active-item {
  animation: mymove 0.5s infinite;
  animation-iteration-count: 1;
  position: absolute;
  top: 0;
  left:0;
  text-align: center;
  animation-fill-mode: forwards;
  border-radius: 10rpx;
}

@keyframes mymove {
  from {
    background: #fff;
    width: 0;
  }

  to {
    background: blue;
    color: #fff;
    width: 90%;
  }
}

总结

头发 -3

富婆+5