多语言展示
当前在线:1872今日阅读:197今日分享:34

小程序实现动画效果

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

推荐信息