微信小程序实现元素淡入淡出动画效果打包方法

开始

之前，jQuery被用来处理用户交互的动画，堪称“无所不能”。最近开发了微信小程序。微信小程序高度受限的语法和功能让开源功能“无能为力”。没办法，只好写一个可以让元素淡入淡出的可重用函数。达到类似jQuery show()的效果

原创文章允许转载和分享。不过，请转载并请注明出处。这是最起码的尊重。在阅读这篇文章之前，你需要了解微信小程序的动画api

先看效果

可以看到动画效果非常流畅，可重用性很高，打包后只需要三行代码就可以实现动画

解决

1.言归正传，我们发现wx_mini_program(以下简称微信小程序wxmp[差不多叫(* dish `) mmp])有一个全局js逻辑文件叫app.js，很有意思。您可以插入自己的对象(函数数据等)。)进入其中，所以让我们从那里开始。2.在app.js中定义全局动画功能。

App({ //淡入淡出实现show:功能(即param，不透明度){ var animation=wx . create animation({//时长800 ms时长： 800，定时功能3360' ease '，})；//var动画=这个。动画动画。不透明度(不透明度)。step()//将param转换为key var JSON=' { ' param ' ' : ' ' } ' JSON=JSON。解析(JSON)；JSON [param]=动画。export()//设置animation that.setData(json) }，//滑入滑出slideusphow:函数(即param，px，不透明度){ var animation=wx . createanimation({ duration : 800，timingFunction: ' ease '，})；动画。平移(px)。不透明度(不透明度)。step()//将param转换为key var JSON=' { ' param ' ' : ' ' } ' JSON=JSON。解析(JSON)；JSON [param]=动画。export()//设置animation that.setData(json) }，//向右滑动并淡入淡出sliderightshow:函数(即param，px，不透明度){ var animation=wx . createanimation({ duration : 800，timingFunction: ' ease '，})；动画。translatex (px)。不透明度(不透明度)。step()//将param转换为key var JSON=' { ' param ' ' : ' ' } ' JSON=JSON。解析(JSON)；JSON [param]=动画。export()//设置动画即. setData(json) }})3。现在我们来看看调用这个函数的具体方法。在wxml中，我们只需要设置动画绑定，以首页索引为例。

//这里是pages/page/index.wxml//使用view来包装需要动画的元素//在动画开始前定义初始样式，比如透明度=0，向下偏移200px等。动画属性用绑定值view //class=' init '动画=' {{slide _ up1}}' 4填充。在本页的js中，

//这里是pages/page/index.js//首先获取小程序实例，访问app.js中的函数this . app=getApp()；//调用show函数并传递参数。//注意：查看上面的show函数定义，看参数含义。//第一个参数是当前页面对象，方便函数setData直接返回数据。//第二个参数是绑定数据名称，传递给setData。详情见上。//第三个参数是px上下滑动，因为class='init '定义这个元素最初向下偏移200px。因此，向上移动200px//的第四个参数是需要修改的透明度，这里是1，这意味着在初始类='init '中定义的透明度被修改为1this。app . slide(这个，‘slide _ up 1’，-200，1)。5.让我们改进一下流程，达到预览图片首页的效果(延时上升)

视图类=“init”动画=“{ { slide _ up1 } }”卡./card/view view class=' init ' animation=' { { slide _ up2 } } ' card.卡/视图页面的/js

//获取applet实例//onload : function(options){ this。app=getapp()} onload时，//触发onshow:function () {this。app.slideshow (this，' slide _ up1 '，-200，1)setTimeout(function(){ this . app . slide up show(this，' slide_up2 '，-200，1) }。绑定(本)，200)；}，//当页面隐藏时，触发淡出动画onHide:函数(){//可以看到，动画参数200，0正好与淡入时的-200，1相反，实际上实现了页面还原的功能，使得页面重新打开时动画this . app . slide(this，' slide _ up1)重新显示200，0) //延时显示容器2，达到瀑布流的效果。参见上面的预览：settimeout (function () {this。app . slide(这个，‘slide _ up 2’，200，0)}。绑定(本)，200)；}以上是边肖介绍的实现微信小程序元素的动画效果包装方法的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！