小程序动画animation向左移动效果

今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又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()})
  },

})

效果如下

5640239-0571f4f8cea58540.gif

效果呈现很简单,只是一个小例子,就没有作过多的修饰,用到实际项目里,当然要写一些详细的样式了。

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值