如何使用动画和日期差值来切换和展示任务-计划时钟（微信小程序）

微信小程序-计划时钟已上线，欢迎各位小伙伴的测试和使用~（微信小程序搜计划时钟即可使用）

在这篇博客中，我们将介绍如何使用 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后执行
}