微信小程序开发动感十足的加载动画--都在这里.jpg
1. 概述
我们在学习微信小程序时，应该会遇到载入图片或者动画需要等待的情况，那么这个等待的画面我们应该怎么编写呢？今天我们就分享这样的小教程。
不多说了，二当家要上图来啦！
image
image
image
image
更多动画自ji关注下载
2 . wxml 文件
<!--index.wxml-->
<view class="container">
<view id="loading" hidden="{{loadingHidden}}">
<view id="loading-center">
<view id="loading-center-absolute">
<view class="object" id="object_one"></view>
<view class="object" id="object_two"></view>
<view class="object" id="object_three"></view>
<view class="object" id="object_four"></view>
<view class="object" id="object_five"></view>
<view class="object" id="object_six"></view>
<view class="object" id="object_seven"></view>
<view class="object" id="object_eight"></view>
<view class="object" id="object_big"></view>
</view>
</view>
</view>
</view>
3 . js 文件
Page({
/**
* 页面的初始数据
*/
data: {
loadingHidden: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
loadingHidden: false
});
var that = this;
wx.request({
url: 'https://www.geekxz.com/action/works/recWorks',
data: {
num: '5' ,
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data.data.works);
that.setData({
recWorks:res.data.data.works,
})
},
complete: function() { // complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})
setTimeout(function(){
that.setData({
loadingHidden: true
});
}, 2000);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
4 . css文件
#loading{
background-color: #db9e36;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
margin-top: -75px;
margin-left: -75px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.object{
width: 20px;
height: 20px;
background-color:#FFF;
position: absolute;
left: 65px;
top: 65px;
}
.object:nth-child(2n+0) {
margin-right: 0px;
}
#object_one {
-webkit-animation: object_one 2s infinite;
animation: object_one 2s infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#object_two {
-webkit-animation: object_two 2s infinite;
animation: object_two 2s infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#object_three {
-webkit-animation: object_three 2s infinite;
animation: object_three 2s infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#object_four {
-webkit-animation: object_four 2s infinite;
animation: object_four 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#object_five {
-webkit-animation: object_five 2s infinite;
animation: object_five 2s infinite;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#object_six {
-webkit-animation: object_six 2s infinite;
animation: object_six 2s infinite;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#object_seven {
-webkit-animation: object_seven 2s infinite;
animation: object_seven 2s infinite;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#object_eight {
-webkit-animation: object_eight 2s infinite;
animation: object_eight 2s infinite;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#object_big{
position: absolute;
width: 50px;
height: 50px;
left: 50px;
top: 50px;
-webkit-animation: object_big 2s infinite;
animation: object_big 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes object_big {
50% { -webkit-transform: scale(0.5); }
}
@keyframes object_big {
50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes object_one {
50% { -webkit-transform: translate(-65px,-65px) ; }
}
@keyframes object_one {
50% {
transform: translate(-65px,-65px) ;
-webkit-transform: translate(-65px,-65px) ;
}
}
@-webkit-keyframes object_two {
50% { -webkit-transform: translate(0,-65px) ; }
}
@keyframes object_two {
50% {
transform: translate(0,-65px) ;
-webkit-transform: translate(0,-65px) ;
}
}
@-webkit-keyframes object_three {
50% { -webkit-transform: translate(65px,-65px) ; }
}
@keyframes object_three {
50% {
transform: translate(65px,-65px) ;
-webkit-transform: translate(65px,-65px) ;
}
}
@-webkit-keyframes object_four {
50% { -webkit-transform: translate(65px,0) ; }
}
@keyframes object_four {
50% {
transform: translate(65px,0) ;
-webkit-transform: translate(65px,0) ;
}
}
@-webkit-keyframes object_five {
50% { -webkit-transform: translate(65px,65px) ; }
}
@keyframes object_five {
50% {
transform: translate(65px,65px) ;
-webkit-transform: translate(65px,65px) ;
}
}
@-webkit-keyframes object_six {
50% { -webkit-transform: translate(0,65px) ; }
}
@keyframes object_six {
50% {
transform: translate(0,65px) ;
-webkit-transform: translate(0,65px) ;
}
}
@-webkit-keyframes object_seven {
50% { -webkit-transform: translate(-65px,65px) ; }
}
@keyframes object_seven {
50% {
transform: translate(-65px,65px) ;
-webkit-transform: translate(-65px,65px) ;
}
}
@-webkit-keyframes object_eight {
50% { -webkit-transform: translate(-65px,0) ;
}
@keyframes object_eight {
50% {
transform: translate(-65px,0) ;
-webkit-transform: translate(-65px,0) ;
}
}
}
5 . 总结
注：如未能获取成功，或者遇到其他问题，本人微信：geekxz 。
如果需要更多动画，欢迎关注 【极客小寨】微信公众号，回复微信小程序动画下载链接！或者回复资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！
