微信小程序js过度动画
微信小程序js过度动画
如有错误还请大神指教。如果觉得不错可以关注我了解更多。
一，我们先来看看效果吧。
二，我们用的是js的逐帧动画，css也可有相同的效果，我们这里用js
// pages/arrary/first/more4/more4.js
let puts = ['cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/1.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/2.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/3.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/4.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/5.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/6.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/7.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/8.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/9.png']
Page({
/**
* 页面的初始数据
*/
data: {
foot: ['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'],
put: ['', '', '', '', '', '', '', '', '']
},
tip(){
wx.showToast({
title: '我的帅气传递给下一个旺仔了',
icon: 'none'
})
},
ones(){
var that =this
wx.showLoading({
title: '加载中...',
mask:true,
});
setTimeout(function () {
wx.hideLoading()
that.setData({
display_one: 'none',
})
that.twoed()
}, 4000)
},
min(){
var that = this
var j=0
var time = setInterval(function () {
switch(j){
case 0:{
var p = puts[0]
that.data.put.splice(0, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 1: {
var p = puts[1]
that.data.put.splice(1, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 2: {
var p = puts[2]
that.data.put.splice(2, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 3: {
var p = puts[5]
that.data.put.splice(5, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 4: {
var p = puts[8]
that.data.put.splice(8, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 5: {
var p = puts[7]
that.data.put.splice(7, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 6: {
var p = puts[6]
that.data.put.splice(6, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 7: {
var p = puts[3]
that.data.put.splice(3, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
case 8: {
var p = puts[4]
that.data.put.splice(4, 1, p);
var than = that.data.put
that.setData({
put: than
})
break;
}
}
j++;
if (j == 12) {
// console.log("定时器结束！");
clearInterval(time);
}
},800)
},
twoed(){
var that = this
//文字逐个显示
var i = 0;
var time = setInterval(function () {
var text = tows.substring(0, i);
i++;
that.setData({
towes: text
});
if (text.length == tows.length) {
// console.log("定时器结束！");
clearInterval(time);
//setTimeout(function () { that.min(); }, 2000)
var p = 'block'
that.data.foot.splice(0, 1, p);
var than = that.data.foot
that.setData({
foot: than
})
}
}, 100)
},
foots1(e){
var that=this
console.log(e)
var p = 'none'
var pp='block'
that.data.foot.splice(0, 1, p);
that.data.foot.splice(1, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots2(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(1, 1, p);
that.data.foot.splice(2, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots3(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(2, 1, p);
that.data.foot.splice(3, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots4(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(3, 1, p);
that.data.foot.splice(4, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots5(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(4, 1, p);
that.data.foot.splice(5, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots6(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(5, 1, p);
that.data.foot.splice(6, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots7(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(6, 1, p);
that.data.foot.splice(7, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots8(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(7, 1, p);
that.data.foot.splice(8, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots9(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(8, 1, p);
that.data.foot.splice(9, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
foots10(e) {
console.log(e)
var that = this
console.log(e)
var p = 'none'
var pp = 'block'
that.data.foot.splice(9, 1, p);
that.data.foot.splice(1, 1, pp);
var than = that.data.foot
that.setData({
foot: than
})
console.log(than)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
min()
}
})
三，wxml部分用的是九宫格布局。
<view class="eye">
<view class="wood">
<view class="line">
<view class="line1_1 lines" bindtap="tip">
<image class="puture" src="{{put[0]}}"></image>
</view>
<view class="line1_1 lines" >
<image class="puture" src="{{put[1]}}"></image>
</view>
<view class="line1_1 lines" bindtap="tip">
<image class="puture" src="{{put[2]}}"></image>
</view>
</view>
<view class="line">
<view class="line1_1 lines">
<image class="puture" src="{{put[3]}}"></image>
</view>
<view class="line1_1 lines" bindtap="ones" >
<image class="puture" src="{{put[4]}}"></image>
</view>
<view class="line1_1 lines" >
<image class="puture" src="{{put[5]}}"></image>
</view>
</view>
<view class="line">
<view class="line1_1 lines" bindtap="tip">
<image class="puture" src="{{put[6]}}"></image>
</view>
<view class="line1_1 lines" >
<image class="puture" src="{{put[7]}}"></image>
</view>
<view class="line1_1 lines" bindtap="tip">
<image class="puture" src="{{put[8]}}"></image>
</view>
</view>
</view>
</view>
四.最后用的wxss的布局。
最后谢谢大家的观看，也欢迎大家的指导。