如何使用动画和日期差值来切换和展示任务-计划时钟（微信小程序）
微信小程序-计划时钟已上线，欢迎各位小伙伴的测试和使用~（微信小程序搜计划时钟即可使用）
在这篇博客中，我们将介绍如何使用 JavaScript 和微信小程序的 wx.createAnimation API 来实现基于日期差值的切换动画。我们还会展示如何根据用户选择的日期，更新任务列表并展示任务详情。通过这种方式，你能够动态地展示与时间相关的内容，并且为用户提供更加生动和互动的体验。
一、根据日期差值进行动画切换
我们首先来看一下如何计算日期之间的差异，并使用这个差异来决定需要切换多少次动画。通过以下代码，我们能够根据用户选择的日期与当前日期之间的差异，来创建相应的切换效果。
// 根据日期差值来设置切换的次数
const switchTimes = Math.abs(dateDiff); // 切换的次数，取差值的绝对值
// 动画开始前清除当前动画
animation.translateX(0).step();
// 按照日期差异的天数进行循环切换
for (let i = 0; i < switchTimes; i++) {
// 判断切换的方向
if (dateDiff > 0) {
// 向右切换
animation.translateX('100%').step();
} else {
// 向左切换
animation.translateX('-100%').step();
}
// 动画返回
animation.translateX(0).step();
}
// 更新动画数据
this.setData({
animationData_date: animation.export(),
});
代码解析
- 计算切换次数：首先，我们通过
Math.abs(dateDiff)计算日期差值的绝对值，即切换的次数。dateDiff变量是日期差异，以天为单位。 - 初始化动画：我们使用
wx.createAnimation创建一个新的动画实例，并使用animation.translateX(0).step()清除之前的动画效果。 - 循环切换：通过循环
switchTimes次，每次判断日期差异的方向。如果日期差值大于0，向右切换；否则，向左切换。每次切换后，动画都会恢复到初始位置（translateX(0)）。 - 更新动画数据：最后，更新数据并将动画效果应用到页面。
二、处理日期格式与更新任务
在用户选择日期之后，我们需要解析日期，并格式化为“YYYY-MM-DD”的格式。之后，我们将根据该日期更新相关的任务列表。
console.log("this.data.selectedDate", this.data.selectedDate)
console.log(this.data.all_tasks[this.data.selectedDate])
this.setData({
selectedDate: `${this.data.currentMonth}${day}日`,
dayInfo: `你选择的日期是：${day}号。`,
tasks: this.data.all_tasks[this.data.selectedDate] || {}
});
console.log(this.data.selectedDate, this.data.tasks);
// 使用正则表达式来提取年、月、日
let match = this.data.selectedDate.match(/^(\d{4})年(\d{1,2})月(\d{1,2})日$/);
if (match) {
// 通过正则匹配的结果来重构日期为 "YYYY-MM-DD" 格式
let year = match[1];
let month = match[2].padStart(2, '0'); // 确保月份是两位数
let day = match[3].padStart(2, '0'); // 确保日期是两位数
// 生成目标格式
let formattedDate = `${year}-${month}-${day}`;
this.setData({
startDate: formattedDate,
endDate: formattedDate,
});
} else {
console.log("日期格式不匹配");
}
console.log("tasks", this.data.tasks)
代码解析
- 更新用户选择的日期：在
this.setData中，我们首先更新了selectedDate和dayInfo，将日期转换为用户可见的格式。 - 使用正则表达式提取日期：我们用正则表达式来匹配并提取年、月、日。如果日期格式匹配成功，我们将其格式化为标准的 “YYYY-MM-DD” 格式。
- 更新任务信息：最后，我们更新了与选定日期相关的任务列表。如果该日期没有任务数据，我们会默认设置为空对象。
三、计算日期差异
为了实现动画切换效果，我们还需要计算两个日期之间的差异。这是通过以下 calculateDateDifference 函数完成的：
// 计算日期差异（天数差）
calculateDateDifference: function(lastDate, newDate) {
const lastDateObj = new Date(lastDate);
const newDateObj = new Date(newDate);
const timeDiff = newDateObj - lastDateObj; // 时间差（毫秒）
return timeDiff / (1000 * 3600 * 24); // 转换为天数
}
代码解析
- 日期转换：我们首先将日期字符串转换为
Date对象。 - 计算时间差：通过减去两个日期对象，我们得到它们之间的时间差（以毫秒为单位）。
- 返回天数差：然后，我们将时间差除以
1000 * 3600 * 24，将其转换为天数。
四、弹窗动画效果
在小程序中，我们还可以为弹窗添加一些动画效果。以下是一个简单的动画实现，当用户点击编辑计划时，弹窗会以缩放和位移的效果显示。
// 点击编辑计划时，弹出弹窗
onEditPlan(e) {
// 创建一个动画实例
const animation = wx.createAnimation({
duration: 200, // 动画持续时间
timingFunction: 'ease',
});
const section = e.currentTarget.dataset.section;
if (section === 'task1') {
animation.scale(0.95).translateY(5).step(); // task1 动画效果
} else if (section === 'task2') {
animation.rotate(45).scale(1.1).step(); // task2 动画效果
} else if (section === 'task3') {
animation.scale(1.1).translateX(5).step(); // task3 动画效果
} else if (section === 'task4') {
animation.scale(0.9).translateY(-5).step(); // task4 动画效果
}
this.setData({
currentSection: section,
isModalVisible: true,
animationData: animation.export(),
});
}
代码解析
- 创建动画实例：我们使用
wx.createAnimation创建了一个新的动画实例，并设置了动画的持续时间和缓动效果。 - 根据任务类型应用不同动画：根据不同的任务类型（如
task1、task2等），我们给动画添加不同的效果，如缩放、旋转和位移。 - 显示弹窗：通过
this.setData方法，设置动画数据，并显示弹窗。
五、关闭弹窗动画
为了让用户体验更流畅，我们可以为弹窗的关闭添加动画效果：
// 关闭弹窗
closeModal() {
// 创建动画实例
const animation = wx.createAnimation({
duration: 300, // 动画持续时间
timingFunction: 'ease-in-out', // 动画的缓动效果
});
// 设置动画效果：缩小并透明
animation.scale(0.5).opacity(0).step();
this.setData({
animationData_close: animation.export(),
});
// 动画结束后可进行其他操作（如关闭弹窗等）
setTimeout(() => {
// 创建一个还原动画实例
const restoreAnimation = wx.createAnimation({
duration: 300, // 恢复动画的持续时间
timingFunction: 'ease-in-out', // 恢复动画的缓动效果
});
// 还原到原来的大小和不透明
restoreAnimation.scale(1).opacity(1).step();
// 在这里处理动画结束后的逻辑，例如关闭模态框等
this.setData({
animationData_close: restoreAnimation.export(),
isModalVisible: false
})
}, 300); // 300ms后执行
}
实现效果
总结
通过结合日期差异计算、动画效果和弹窗交互，您可以在微信小程序中实现更加动态和互动的用户体验。无论是根据日期差异来切换内容，还是通过动画效果来增加弹窗的交互性，这些技术都能够有效提升用户体验。希望这篇博客能帮助您更好地掌握这些技能，创建更加有趣的应用功能！