今天在家做一个私活，效果类似于淘宝的筛选功能，微信小程序商品筛选，侧方弹出动画选择页面，研究了一下小程序的动画相关的文档，于是又get到了一个新的小程序技能，小程序动画animation向左移动效果。
写了一个简单的小demo，今天太晚了，就不继续写了，后续会继续写一个关于点击筛选按钮，从右往左弹出一个遮罩选择层的效果。
wxml
<view class="container"> <view class="animation-element-wrapper"> <view class="animation-element" animation="{{animation}}"></view> </view> <button class="animation-button" bindtap="translate">移动</button> </view>
wxss
.animation-element-wrapper { display: flex; width: 100%; padding-top: 150rpx; padding-bottom: 150rpx; justify-content: center; overflow: hidden; background-color: #ffffff; } .animation-element { width: 80rpx; height: 80rpx; background-color: #1AAD19; } .animation-button { float: left; line-height: 2; width: 300rpx; margin: 15rpx 12rpx; }
js
Page({ onReady: function () { this.animation = wx.createAnimation() }, translate: function () { this.animation.translate(-50, -1).step() this.setData({animation: this.animation.export()}) }, })
效果如下
效果呈现很简单，只是一个小例子，就没有作过多的修饰，用到实际项目里，当然要写一些详细的样式了。
