用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅。

栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject

值得注意的是,直接使用其属性,比如animation.transle(0, -155).step(),如果我们期望的效果是从上往下,则该方式不满足,它会产生一个先向上再向下的效果,有悖预期。

但可以通过在step里设置duration值为0来避免先向上这种效果的产生。

可理解为,动画位移的起始点可如下设置:

animation.translate(0, -155).step({duration: 0}) //将动画起始点设置在(0,-155)处

如果在一个页面同时存在多个动画,预期在第一个动画结束后,在执行第二个动画,那么可如下设置:

animation2.translate(0, 0).step({delay: 500}) //延迟500ms执行动画

微信小程序动画技巧的更多相关文章

  1. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  2. 微信小程序动画:高度渐变,left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  3. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  4. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  5. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  6. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

  7. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  8. 微信小程序推广技巧、营销方案

    小程序已经成功上线了!那么,小程序线下如何推广?线下门店如何玩转小程序呢? 1.附近的小程序,让商家曝光率更高 小 程序自带“附近的小程序”功能,利用LBS定位功能提高商家专属微信小程序的曝光度,用户 ...

  9. 微信小程序开发技巧总结 (一)-- 数据传递和存储

    结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在ap ...

随机推荐

  1. BZOJ5102:[POI2018]Prawnicy(贪心,堆)

    Description 定义一个区间(l,r)的长度为r-l,空区间的长度为0. 给定数轴上n个区间,请选择其中恰好k个区间,使得交集的长度最大. Input 第一行包含两个正整数n,k(1<= ...

  2. [笔记] 整除分块 & 异或性质

    整除分块 参考资料:整除分块_peng-ym OI生涯中的各种数论算法的证明 公式 求:\(\sum_{i=1}^{n}\lfloor\frac{n}{i}\rfloor\) 对于每个\(\lfloo ...

  3. Android Studio中新建和引用assets文件

    从eclipse转过的朋友们应该不太习惯AS中新建assets文件和对文件内容的引用.我也查找了网上很多资料发现很少有这样的解决答案,于是便把自己解决的方法总结在这里. 1.一般新建project后这 ...

  4. haproxy安装及日志配置

    1.yum安装 yum install haproxy -y 2.配置文件修改,经典配置 vim /etc/haproxy/haproxy.cfg #------------------------- ...

  5. 数据同步canal客户端

    1.增量订阅.消费设计 get/ack/rollback协议介绍: ① Message getWithoutAck(int batchSize),允许指定batchSize,一次可以获取多条,每次返回 ...

  6. iOS VideoToolBox decoder解码失败(-12909和-12911)问题解决

    对于任何H.264解码器而言,都要将SPS和PPS信息传递给解码器.FFmpeg内部做了设置,所以没有显示设置.但是对于硬件解码器来讲,开发者必须手动设置.另外,使用FFmpeg解码出来的视频帧是以Y ...

  7. 5-51单片机ESP8266学习-AT指令(8266TCP服务器--用手机TCP调试助手发信息给单片机控制小灯的亮灭)

    http://www.cnblogs.com/yangfengwu/p/8759294.html 源码链接:https://pan.baidu.com/s/1wT8KAOIzvkOXXNpkDI7E8 ...

  8. day60

    Bootstrap 一.简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的 ...

  9. day 11 前方高能-迭代器

    第一类对象 -----函数名  == 变量名 函数对象可以像变量一样进行赋值 还可以作为列表的元素进行使用 可以作为返回值返回 def wrapper():     def inner():      ...

  10. 使用jdb调试apk

    jdb是一个支持java代码级调试的工具,它是由java jdk提供的,存在于xxx\Java\jdk1.6.0_21\bin之下 使用ddms调试时,主机会打开另外一个网络端口,在DDMS里查看,一 ...