蝙蝠岛资源网 Design By www.hbtsch.com

开端

之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。
那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到类似jQuery show()的效果

原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重
本文章阅读前需要对微信小程序的动画api有所了解

先看效果

可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画

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

解决

1.寻根问底,发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´"htmlcode">

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修改到1
this.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);
 }

以上所述是小编给大家介绍的微信小程序实现元素渐入渐出动画效果封装方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
微信小程序淡入淡出效果,微信小程序动画效果,微信小程序封装方法

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无微信小程序实现元素渐入渐出动画效果封装方法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。