开端
之前一直使用堪称“万能”的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);
}
以上所述是小编给大家介绍的微信小程序实现元素渐入渐出动画效果封装方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。