E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现元素渐入渐出动画效果封装方法

E企盈直播平台营销卖货系统

开端之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到类似jQuery show()的效果原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解先看效果可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画 解决1.寻根问底,发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´ノ皿`)mmp] )有一个全局的js逻辑文件,叫app.js,有意思,可以往里面塞自己写的object(函数数据等等),那就从那里入手吧 2.在app.js中定义全局的动画函数App({  //渐入,渐出实现  show : function(that,param,opacity){    var animation = wx.createAnimation({      //持续时间800ms      duration: 800,      timingFunction: ‘ease’,    });    //var animation = this.animation    animation.opacity(opacity).step()    //将param转换为key    var json = ‘{“‘ + param + ‘”:””}’    json = JSON.parse(json);    json[param] = animation.export()    //设置动画    that.setData(json)  },  //滑动渐入渐出  slideupshow:function(that,param,px,opacity){    var animation = wx.createAnimation({      duration: 800,      timingFunction: ‘ease’,    });    animation.translateY(px).opacity(opacity).step()    //将param转换为key    var json = ‘{“‘ + param + ‘”:””}’    json = JSON.parse(json);    json[param] = animation.export()    //设置动画    that.setData(json)  },  //向右滑动渐入渐出  sliderightshow: function (that, param, px, opacity) {    var animation = wx.createAnimation({      duration: 800,      timingFunction: ‘ease’,    });    animation.translateX(px).opacity(opacity).step()    //将param转换为key    var json = ‘{“‘ + param + ‘”:””}’    json = JSON.parse(json);    json[param] = animation.export()    //设置动画    that.setData(json)  }})3.现在我们再看看调用这个函数的具体方法 在wxml中,只需要设置animation绑定即可,以首页index为例// 这里是pages/page/index.wxml//使用view包裹需要动画的元素//class中定义动画开始前的初始样式,如透明度=0,向下偏移200px等,animtion属性填入绑定值<view class=”init” animation=”{{slide_up1}}”>4.在该页的js中// 这里是pages/page/index.js//首先获取小程序实例,访问app.js中的函数this.app = getApp();//调用show函数,传参//注意:查看上面show函数定义查看参数含义//第一个参数是当前的页面对象,方便函数setData直接返回数据//第二个参数是绑定的数据名,传参给setData,详细见上面//第三个参数是上下滑动的px,因为class=”init”定义初始该元素向下偏移了200px,所以这里使其上移200px//第四个参数是需要修改为的透明度,这里是1,表示从初始的class=”init”中定义的透明度0修改到1this.app.slideupshow(this, ‘slide_up1’, -200, 1)5.让我们完善流程,达到预览图首页的效果(有延时的边上升边出现效果) wxml就是将各个容器分别绑定不同的变量,一个view容器就是一个动画单位(可以这样理解),如  <view class=”init” animation=”{{slide_up1}}”>    <card>…</card></view><view class=”init” animation=”{{slide_up2}}”>    <card>…</card></view>页面的js//onload时获取小程序实例onLoad: function (options) {    this.app = getApp()  },//页面展示时,触发动画 onShow: function () {    this.app.slideupshow(this, ‘slide_up1’, -200, 1)    setTimeout(function () {      this.app.slideupshow(this, ‘slide_up2’, -200, 1)    }.bind(this), 200);  },//页面隐藏时,触发渐出动画 onHide: function () {     //你可以看到,动画参数的200,0与渐入时的-200,1刚好是相反的,其实也就做到了页面还原的作用,使页面重新打开时重新展示动画    this.app.slideupshow(this, ‘slide_up1’, 200, 0)    //延时展现容器2,做到瀑布流的效果,见上面预览图    setTimeout(function () {      this.app.slideupshow(this, ‘slide_up2’, 200, 0)    }.bind(this), 200);  }其实上面就是实现高度复用的动画效果的解决方案了 原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重 如有纰漏,敬请留言反馈微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现元素渐入渐出动画效果封装方法
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏