微信小程序实现渐变动画效果

前言

我在显示小程序列表时收到了一个请求。列表显示时需要添加动画效果。设计视频效果如下：

进入列表页面时需要依次显示每张卡片，显示完成后隐藏当天之前的卡片。

实现理念

要达到这种动画效果，首先需要给每张卡片添加一个css动画。因为每张卡片都是有时间间隔显示的，考虑到显示后的隐藏效果，动画效果需要用js动态添加。看了微信开发文档，发现微信小程序提供了一个Animation对象。读取其中的参数后，发现可以达到预期的效果。按照以下步骤使用api:

wx . create animation(object object)创建动画对象。最后，利用动画实例的导出方法，导出传输到组件的动画数据的动画属性。有以下参数：持续时间(动画持续时间，以毫秒为单位)、定时功能(动画国家效果)、延迟(动画延迟)

在此实现过程中，您创建的动画对象需要以下属性：

Animation.export()可以导出动画队列，每次调用后export方法都会清除之前的动画操作。动画步骤(对象对象)表示一组动画已经完成。您可以在一组动画中调用任意数量的动画方法，一组动画中的所有动画将同时开始，下一组动画将在一组动画完成后执行。比如一组动画完成后，动画的平移距离。Y轴平移(数字平移)以step()结束，单位为pX动画。不透明度(数值)透明度0-1

看到以上属性并合理使用，实现需求中提到的动画效果是稳定的。

实施步骤

封装一个方法来创建动画，并使其易于调用

/* * *动画实现* @方法动画如何* @ param { that }当前卡片* @param {opacity}透明度* @param {delay}延迟* @param {isUp}移动方向*/animationShow:函数(即不透明度、延迟、isUp){ let animation=wx . createanimation({ duration : 1000，timingFunction: ' ease '，delay : delay })；-考虑到需要在当天之前隐藏卡片，做出以下判断给出不同的动画效果-if (ISUP==' down') {animation。translatey (0)。不透明度(不透明度)。步骤()。translatey (-80)。step()；} else if(ISup==' up '){ animation . translatey(0)。不透明度(不透明度)。步骤()。translateY(-140)。不透明度(0)。step()} else { animation . translatey(0)。不透明度(不透明度)。step ()}让params='' params=动画。export () return params}，初始化每张卡片的样式

首先，每张卡片的位置相对于自身向Y轴平移80像素，透明度设置为0。这样，当你进入页面时，你可以向下平移，让卡片逐渐显示出来。init { opa city 3360 0；transform : translate y(-80px)}来处理数据

循环处理每一条数据，通过调用封装的方法获取卡片应该具有的动画属性

for(设I=0；I trans DATa . length；I) {if (I==0) {transdata [I]。animation=that . app . slide up show(that，1，0，' up ')else { trans data[I]。动画=that.app.slideupshow (that，1，1，

view class=' init ' animation=' { { item . animation } } '

达到效果

与设计视频中的动画风格基本一致。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。