怎么实现如下动画？删除 后 向上滑动
如图1，就是删除其中一个块后，下面的块自动向上滑动补齐。
我一开始是这么实现的：
用js循环对下面的那些块导出向上滑动的动画，然后等动画播放结束后，将被删除的那个快disable掉（用wx：if实现，就相当于脱离了标准文档流），可是在disable掉的那一瞬间会闪一下，如图2，所以我就想有没有其他解决办法，本人也是萌新，希望各位大哥能赐教。
顺便附上我写的乱七八糟的代码
各位大佬大可不必看我这乱七八糟的代码，免得让你们头痛，我的思路就如上，就是用js循环，给被删除的那个块下面的所有块导出向上移动的动画，等他们都移动完后，我就让被删除的那个块彻彻底底消除掉，为什么要删除掉，因为过会儿还有其他块要被删除，还有其他块要向上滑动，如果不删除那个被删除的块的话，及时播放动画后他们在文档流中的实际位置不会改变，再播放一次向上滑动的动画会从他们在文档流中的实际位置开始，而不是从我们眼睛看到的位置继续向上滑动，所以我要将被删除的那个块从文档流中剔除。
所以我在想有没有什么办法能在小程序中实现像ios如此丝滑的变化。
不知各位大哥能否听懂我在说啥，，，，，
WXML
人生最棒的感觉
就是你做到别人说你做不到的事
——彭于晏
开始健身
{{item.name}}
{{item.time}}
s
JS
Page({
data: {
//animation
button_Disappear_Animation:' ',
block_Animation:' ',
pressed:true,
idx:0,
timer: '',
countDownNum: '60',
action:[
{
name:'波比跳20下',
time:'1',
url:'/audio/波比跳20下.mp3'
},
{
name:'休息',
time:'60',
url:'/audio/休息60秒.mp3'
},
{
name:'波比跳20下',
time:'90',
url:'/audio/波比跳20下.mp3'
},
{
name:'休息',
time:60,
url:'/audio/休息60秒.mp3'
},
{
name:'波比跳20下',
time:90,
url:'/audio/波比跳20下.mp3'
},
{
name:'休息',
time:60,
url:'/audio/休息60秒.mp3'
},
{
name:'右交叉转体30下',
time:60,
url:'/audio/右交叉转体.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'左交叉转体30下',
time:60,
url:'/audio/左交叉转体.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'双脚环绕100下',
time:60,
url:'/audio/双脚环绕.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'俯卧撑30下',
time:60,
url:'/audio/俯卧撑30.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'钟摆式',
time:60,
url:'/audio/钟摆式.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'划船式',
time:60,
url:'/audio/划船式.mp3'
},
{
name:'俯卧撑30下',
time:60,
url:'/audio/俯卧撑30.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'钟摆式',
time:60,
url:'/audio/钟摆式.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'划船式',
time:60,
url:'/audio/划船式.mp3'
},
{
name:'俯卧撑30下',
time:60,
url:'/audio/俯卧撑30.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'平板支撑抬腿',
time:60,
url:'/audio/平板支撑抬.mp3'
},
{
name:'休息',
time:30,
url:'/audio/休息30秒.mp3'
},
{
name:'平板支撑抬腿',
time:60,
url:'/audio/平板支撑抬.mp3'
}
]
},
onShow: function(){
},
onReady:function(){
},
countDown: function () {
let that = this;
let countDownNum = that.data.action[that.data.idx].time;
let idbx=that.data.idx;
let voice_Url = that.data.action[that.data.idx].url;
const audio_1 = wx.createInnerAudioContext();
audio_1.src = voice_Url;
audio_1.play();
that.data.timer = setInterval(function (){
if (countDownNum == 0) {
if(that.data.idx == 26){
clearInterval(that.data.timer);
}else{
clearInterval(that.data.timer);
//////////////////////////////////////////////////////////////////////
//////////第一项向左移动并且下面所有项目向上移动的动画，物件未脱离标准文档流
for (let i = that.data.idx; i < that.data.action.length; i++) {
if(i==that.data.idx){
let newAnimation = wx.createAnimation({
duration:500,
timingFunction:'ease',
delay: 0,
})
newAnimation.translate(-500,0).step();
let animation_Scr = "action[" + idbx + "].animation";
that.setData({
[animation_Scr]:newAnimation.export()
})
}else{
let newAnimation = wx.createAnimation({
duration:500,
timingFunction:'ease',
delay: 0,
})
newAnimation.translate(0,-127.5).step();//-97.5
let animation_Scr = "action[" + i + "].animation";
that.setData({
[animation_Scr]:newAnimation.export()
})
}
}
////////////////////////////END///////////////////////////////
//////////////////////////////////////////////////////////////
console.log("修改idbx值");
let newNum = idbx;
newNum++;
that.setData({
idx:newNum
})
that.countDown();
//////////////////////////////////////////////////////////////
///删除第一项的同时！！！！使剩下的物件回到初始位置///////////////
setTimeout(function() {
for (let i = that.data.idx; i < that.data.action.length; i++){
let reset_Animation = wx.createAnimation({
duration: 0,
});
reset_Animation.translate(0,0).step();
let animation_Scr = "action[" + i + "].animation";
that.setData({
[animation_Scr]:reset_Animation.export()
});
}
let btn="action[" + idbx + "].time";
that.setData({
[btn] : '已完成'
})
}, 500);
/////////////////////////END///////////////////////////////////
///////////////////////////////////////////////////////////////
}
}else{
countDownNum--;
let bt="action[" + idbx + "].time";
that.setData({
[bt] : countDownNum
})}
}, 1000)
},
presseTheButton(){
let button_Disappear_Animation = wx.createAnimation({
duration:1000,
timingFunction:'ease',
delay: 50,
})
let motor_Down_Animation = wx.createAnimation({
duration:600,
timingFunction:'ease',
delay: 1050,
})
button_Disappear_Animation.translate(-500,0).step();
motor_Down_Animation.translate(0,33).step();
this.setData({
button_Disappear_Animation:button_Disappear_Animation.export(),
motor_Down_Animation:motor_Down_Animation.export()
});
this.setData({
pressed:true
});
this.countDown()
},
showT: function(){
wx.showToast({
title:'aaa',
})
},
pressingButton:function(){
}
})
强力驱动