今天在家做一个私活，效果类似于淘宝的筛选功能，微信小程序商品筛选，侧方弹出动画选择页面，研究了一下小程序的动画相关的文档，于是又get到了一个新的小程序技能，小程序动画animation向左移动效果。
小程序官方参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.createAnimation.html
写了一个简单的小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()})
},
})
效果如下
效果呈现很简单，只是一个小例子，就没有作过多的修饰，用到实际项目里，当然要写一些详细的样式了。
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131。
