首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序动画animation向左移动效果

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

作者头像
王小婷
发布于 2018-12-27 07:56:25
发布于 2018-12-27 07:56:25
2.3K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又get到了一个新的小程序技能,小程序动画animation向左移动效果。

小程序官方参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.createAnimation.html

写了一个简单的小demo,今天太晚了,就不继续写了,后续会继续写一个关于点击筛选按钮,从右往左弹出一个遮罩选择层的效果。 wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序商品筛选,侧方弹出动画选择页面
微信小程序商品筛选,侧方弹出动画选择页面,在一点点的零碎的时间里面写出来的代码,和前两篇效果结合出来的。点击按钮的同时,要实现这两个功能的叠加。
王小婷
2018/12/27
2.4K0
小程序底部动画弹框
接上一篇的举一反三:微信小程序商品筛选,侧方弹出动画选择页面:https://www.jianshu.com/p/e76925d39c56;这个小程序底部动画弹框也是项目之中常见的功能之一,效果如下图所示。
王小婷
2018/12/27
2.2K0
两种方案开发小程序动画
在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用css3,同时也可以通过api方式来实现。
用户2356368
2019/04/03
2.2K0
两种方案开发小程序动画
两种方案开发小程序动画
在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用css3,同时也可以通过api方式来实现。
用户2356368
2024/02/02
2510
两种方案开发小程序动画
小程序图片左右摆动效果
先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可。
王小婷
2019/07/15
2.2K0
小程序图片左右摆动效果
微信小程序自定义底部弹出框功能
本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下
超级小可爱
2023/02/20
4.6K0
小程序图片左右摆动效果
先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可。
王小婷
2025/05/18
1010
小程序图片左右摆动效果
微信小程序向左滑动删除操作(类仿微信、QQ)
上一个小程序的项目里面做过这个功能,当时没有记录下来,今天特意做了一个小的demo放在了github上面,下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单,类似于微信扣扣删除聊天栏的效果,想左滑动,出现删除按钮,点击即可删除。
王小婷
2018/12/24
3.7K1
微信小程序实现各种特效实例
写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下
okaychen
2018/01/05
4.2K3
微信小程序实现各种特效实例
【黄啊码】微信小程序向下弹出菜单,包含筛选功能
要解决的问题 标签栏三栏样式,标签栏固定不动; 点击标签栏弹出菜单,并且出现透明遮罩; 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0; height: 0; color: transparent;
黄啊码
2022/06/15
5690
【黄啊码】微信小程序向下弹出菜单,包含筛选功能
微信小程序|旋转动画效果
在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法。那么接下来就来看一下如何实现一个文字旋转的动画效果吧。
算法与编程之美
2020/05/16
2.9K0
小程序请假效果
var dateTimePicker = require('../../utils/dateTimePicker.js'); Page({ // 页面的初始数据 data: { date: '', winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, //获取当前滑块的index bindchange: function(e) { const that = this; that.
达达前端
2022/04/29
4200
微信小程序-卫星菜单
微信菜单款式千千万万,主要分顶部、底部、垂直横栏。今天特发奇想做个类似安卓的卫星菜单吧。之前网上都很多教程,但需要的时候就找不到,于是就写这篇文章记录一下。
谭广健
2022/06/05
9470
小程序-实现自定义动画弹框/提示框
在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等
itclanCoder
2020/11/06
1.9K0
小程序点击按钮弹出可填写框
这是项目里面一个简单的效果,小程序点击按钮弹出可填写框,摘下代码,方便之后遇到的时候可以直接拿来使用。 效果如下:
王小婷
2018/12/28
3.7K0
微信小程序动画两种实现方式
利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
Javanx
2019/09/04
2.2K0
微信小程序动画两种实现方式
微信小程序:动画(Animation)
官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
FlyLolo
2018/11/29
10K0
微信小程序:动画(Animation)
微信小程序实战开发教程-抽屉菜单
抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute
极乐君
2018/02/05
3K0
微信小程序实战开发教程-抽屉菜单
微信小程序加减号弹出框详解
<view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">view> <view class='rob-box' wx:if="{{showModalStatus}}"> <view class="shade-shop-detail"> <view class="detail-right flexb"> <view class='detail-title-de'>购买数
疯狂的小程序
2018/01/25
1.8K0
【黄啊码】微信小程序小程序仿蚂蚁森林浇水
<view class="return" bindtap="before">     <van-icon name="arrow-left" size="22px" color="#fff" /> </view> <view class="box">     <view class="progress_box">         <van-progress color="#f2826a" percentage="{{waternum}}" stroke-width="18" />     
黄啊码
2022/09/28
6720
【黄啊码】微信小程序小程序仿蚂蚁森林浇水
相关推荐
微信小程序商品筛选,侧方弹出动画选择页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档