小程序 星空动画效果_小程序-渐入渐出动画效果实现

在做小程序列表展示的时候，接到了一个需求。需要在列表展示的时候加上动画效果。在此献上小程序动画效果的教程。

动画效果需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏掉当天之前的卡片。设计视频效果如下图：

实现思路

实现该动画效果，首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的，以及考虑到展示完成后的隐藏效果，所以动画效果需要用js动态去添加。在看了微信开发文档后，发现微信小程序提供了Animation的一个动画对象，具体看了里面的参数后发现，是可以实现需求上的效果的。

具体使用如下api:wx.createAnimation(Object object)创建一个animation对象。最后通过动画实例的export方法导出动画数据传递给组件的animation 属性。里面有如下参数：duration（动画持续时间，单位 ms）,timingFunction（动画的国度效果ÿ