小程序动画实现有别于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(),不然不起效果。