小程序动画实现有别于H5动画，因为小程序不兼容transform，如果使用该属性，真机会出现点击没反应的情况；本文主要介绍利用小程序自带的动画API实现动画效果。
工具/原料
1
Sublime Text
2
微信开发者工具
编写静态页面
wxml代码和wxss样式如下图，这一块比较简单，也不是本文重点，详细代码可自行查看下图。
动画实现过程
实现过程简单说点击按钮时候，先把弹出框位移到下面并且透明度是0（看不见），200毫秒后慢慢位移到屏幕中间并且显示。详细代码如下（只分析关键代码）： 1.先创建动画实例animation； 2.然后新建动画animation.translateY(350).opacity(0).step()（位移到下面并且透明度是0），注意使用step，表示一组动画完成； 3.最后新建动画animation.translateY(-62 * systemInfo.windowWidth / 375).opacity(1).step()（位移到屏幕中间并且显示），并且加了定时器，让弹出框从下面慢慢移上来。 Tips：记得导出动画animation.export()，不然不起效果。