鸿蒙NEXT开发案例：垃圾分类

animateToImmediately({
    duration:800,
    curve: curves.springCurve(0, 20, 90, 20),
    // 其他配置
});
1.
2.
3.
4.
5.

shuffleItems() {
    for (let i = this.garbageItems.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        let temp = this.garbageItems[i];
        this.garbageItems[i] = this.garbageItems[j];
        this.garbageItems[j] = temp;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.

if (this.showAnimation) {
    Particle({
        particles: [
           ...
1.
2.
3.
4.

import { curves } from '@kit.ArkUI'; // 导入ArkUI工具包中的曲线模块

// 定义垃圾项目类
class GarbageItem {
  name: string; // 垃圾名称
  type: number; // 垃圾类型
  description?: string; // 垃圾描述，可选

  // 构造函数初始化垃圾项目
  constructor(name: string, type: number, description?: string) {
    this.name = name; // 设置垃圾名称
    this.type = type; // 设置垃圾类型
    this.description = description || ""; // 设置垃圾描述，默认为空字符串
  }
}

// 定义垃圾类别类
class GarbageCategory {
  name: string; // 类别名称
  type: number; // 类别类型
  color: string; // 类别颜色
  description: string; // 类别描述

  // 构造函数初始化垃圾类别
  constructor(name: string, type: number, color: string, description: string) {
    this.name = name; // 设置类别名称
    this.type = type; // 设置类别类型
    this.color = color; // 设置类别颜色
    this.description = description; // 设置类别描述
  }
}

// 使用组件装饰器定义一个名为Index的应用入口
@Entry
@Component
struct Index {
  // 定义状态变量
  @State currentQuestionIndex: number = 0; // 当前题目索引
  @State quizResults: string[] = []; // 测验结果数组
  @State totalScore: number = 0; // 总得分
  @State showAnimation: boolean = false; // 是否显示动画
  @State scaleOptions: ScaleOptions = { x: 1, y: 1 }; // 缩放选项
  @State itemXPosition: number = 0; // 物品X轴位置
  @State itemOpacity: number = 1.0; // 物品透明度
  // 初始化垃圾类别数组
  @State garbageCategories: GarbageCategory[] = [
    new GarbageCategory("有害垃圾", 0, "#e2413f", "对人体健康或自然环境可能造成直接或潜在危害的生活垃圾"), // 创建有害垃圾类别
    new GarbageCategory("可回收物", 1, "#1c6bb5", "适宜回收和资源利用的物品"), // 创建可回收物类别
    new GarbageCategory("厨余垃圾", 2, "#4ca84e", "上海称湿垃圾，易腐烂的、含有机质的生活垃圾"), // 创建厨余垃圾类别
    new GarbageCategory("其他垃圾", 3, "#5f5f5f", "上海称干垃圾，不能归类于以上三类的生活垃圾"),// 创建其他垃圾类别
  ];
  // 初始化垃圾项目数组
  @State garbageItems: GarbageItem[] = [
    new GarbageItem("菜帮菜叶", 2), // 创建厨余垃圾项目
    new GarbageItem("剩菜剩饭", 2), // 创建厨余垃圾项目
    new GarbageItem("过期食品", 2), // 创建厨余垃圾项目
    new GarbageItem("瓜果皮壳", 2), // 创建厨余垃圾项目
    new GarbageItem("鱼骨鱼刺", 2), // 创建厨余垃圾项目
    new GarbageItem("鸡蛋及蛋壳", 2), // 创建厨余垃圾项目
    new GarbageItem("残枝落叶", 2), // 创建厨余垃圾项目
    new GarbageItem("茶叶渣", 2), // 创建厨余垃圾项目
    new GarbageItem("酒瓶", 1), // 创建可回收物项目
    new GarbageItem("玻璃杯", 1), // 创建可回收物项目
    new GarbageItem("调味瓶", 1), // 创建可回收物项目
    new GarbageItem("图书", 1), // 创建可回收物项目
    new GarbageItem("打印纸", 1), // 创建可回收物项目
    new GarbageItem("信封", 1), // 创建可回收物项目
    new GarbageItem("易拉罐", 1), // 创建可回收物项目
    new GarbageItem("金属刀具", 1), // 创建可回收物项目
    new GarbageItem("奶粉桶", 1), // 创建可回收物项目
    new GarbageItem("衣服裤子", 1), // 创建可回收物项目
    new GarbageItem("毛绒玩具", 1), // 创建可回收物项目
    new GarbageItem("鞋", 1), // 创建可回收物项目
    new GarbageItem("饮料瓶", 1), // 创建可回收物项目
    new GarbageItem("塑料盆", 1), // 创建可回收物项目
    new GarbageItem("食用油桶", 1), // 创建可回收物项目
    new GarbageItem("洗衣机", 1), // 创建可回收物项目
    new GarbageItem("电烤箱", 1), // 创建可回收物项目
    new GarbageItem("电视机", 1), // 创建可回收物项目
    new GarbageItem("充电电池", 0), // 创建有害垃圾项目
    new GarbageItem("废含汞荧光灯管", 0), // 创建有害垃圾项目
    new GarbageItem("过期药品及其包装物", 0), // 创建有害垃圾项目
    new GarbageItem("油漆桶", 0), // 创建有害垃圾项目
    new GarbageItem("血压计", 0), // 创建有害垃圾项目
    new GarbageItem("废水银温度计", 0), // 创建有害垃圾项目
    new GarbageItem("杀虫喷雾罐", 0), // 创建有害垃圾项目
    new GarbageItem("废X光片等感光胶片", 0), // 创建有害垃圾项目
    new GarbageItem("食品袋", 3), // 创建其他垃圾项目
    new GarbageItem("大棒骨", 3), // 创建其他垃圾项目
    new GarbageItem("创可贴", 3), // 创建其他垃圾项目
    new GarbageItem("污损塑料袋", 3), // 创建其他垃圾项目
    new GarbageItem("烟屁", 3), // 创建其他垃圾项目
    new GarbageItem("陶瓷碎片", 3), // 创建其他垃圾项目
    new GarbageItem("餐巾纸", 3, "厕纸、卫生纸遇水即溶，不算可回收的“纸张”，类似的还有烟盒等。"), // 创建其他垃圾项目
    new GarbageItem("卫生纸", 3, "厕纸、卫生纸遇水即溶，不算可回收的“纸张”，类似的还有烟盒等。"),// 创建其他垃圾项目
  ];

  // 在组件即将出现时重置测验
  aboutToAppear(): void {
    this.resetQuiz(); // 调用重置测验方法
  }

  // 重置测验状态
  resetQuiz() {
    this.quizResults = []; // 清空测验结果
    this.totalScore = 0; // 清零总得分
    this.currentQuestionIndex = 0; // 重置当前题目索引
    this.shuffleItems(); // 打乱垃圾项目顺序
  }

  // 打乱垃圾项目顺序
  shuffleItems() {
    for (let i = this.garbageItems.length - 1; i > 0; i--) { // 从后往前遍历垃圾项目
      const j = Math.floor(Math.random() * (i + 1)); // 随机索引
      let temp = this.garbageItems[i]; // 临时存储当前项目
      this.garbageItems[i] = this.garbageItems[j]; // 交换位置
      this.garbageItems[j] = temp; // 交换位置
    }
  }

  // 检查用户选择的答案
  checkAnswer(categoryType: number) {
    const currentItem = this.garbageItems[this.currentQuestionIndex]; // 获取当前垃圾项目
    // 添加测验结果，包含项目名称和用户选择的类别
    this.quizResults.push(`${currentItem.name}（${this.garbageCategories[categoryType].name}）【${currentItem.type ===
      categoryType ? "✔" : this.garbageCategories[currentItem.type].name}】`);
    if (currentItem.type === categoryType) { // 如果答案正确
      this.totalScore += 10; // 加十分
    }
    this.currentQuestionIndex++; // 进入下一个题目
    if (this.currentQuestionIndex >= 10) { // 如果完成了十个题目
      this.displayResults(); // 显示结果
      this.resetQuiz(); // 重置测验
    }
  }

  // 显示测验结果
  displayResults() {
    let sheets: SheetInfo[] = []; // 初始化结果页面列表
    for (let i = 0; i < this.quizResults.length; i++) { // 循环添加每一个结果
      sheets.push({
        title: this.quizResults[i], // 设置标题为测验结果
        action: () => { // 不执行任何操作
        }
      });
    }
    this.getUIContext().showActionSheet({
      // 显示结果页
      title: '成绩单', // 标题
      message: `总分数:${this.totalScore}`, // 分数信息
      confirm: {
        // 确认按钮
        defaultFocus: true, // 默认焦点
        value: '我知道了', // 按钮文本
        action: () => { // 点击后的动作
        }
      },
      onWillDismiss: () => { // 关闭前的动作
      },
      alignment: DialogAlignment.Center, // 对齐方式为中心
      sheets: sheets // 结果页面列表
    });
  }

  // 构建用户界面
  build() {
    Column() { // 创建列布局
      Text(`垃圾分类测验:${this.currentQuestionIndex + 1}/10`)// 显示当前题目序号
        .fontSize('30lpx')// 设置字体大小
        .margin(20); // 设置外边距
      Stack() { // 创建堆栈布局
        Text(`${this.garbageItems[this.currentQuestionIndex].name}`)// 显示当前垃圾项目名称
          .textAlign(TextAlign.Center)// 居中对齐
          .width('130lpx')// 设置宽度
          .height('130lpx')// 设置高度
          .border({ width: 1 })// 设置边框宽度
          .borderRadius(5)// 设置圆角半径
          .fontColor(Color.White)// 设置字体颜色
          .backgroundColor(Color.Orange)// 设置背景颜色
          .fontSize('20lpx')// 设置字体大小
          .padding(2)// 设置内边距
          .scale(this.scaleOptions); // 设置缩放比例
        if (this.showAnimation) { // 如果显示动画
          Particle({
            // 创建粒子效果
            particles: [// 初始化粒子数组
              {
                emitter: {
                  // 粒子发射器配置
                  particle: {
                    // 粒子类型配置
                    type: ParticleType.POINT, // 粒子类型为点
                    config: {
                      // 配置
                      radius: 5 // 点的半径
                    },
                    count: 50, // 粒子数量
                    lifetime: -1, // 生命周期
                    lifetimeRange: -1 // 生命周期范围
                  },
                  emitRate: 100, // 发射速率
                  position: ['25%', 0], // 发射位置
                  size: ['100lpx', '100lpx'], // 发射器大小
                  shape: ParticleEmitterShape.RECTANGLE // 发射器形状为矩形
                },
                color: {
                  // 粒子颜色配置
                  range: [Color.Orange, Color.Orange], // 颜色范围
                  updater: {
                    // 更新器配置
                    type: ParticleUpdater.CURVE, // 变化方式为曲线变化
                    config: [// 配置项
                      {
                        from: Color.Orange, // 起始颜色
                        to: Color.Orange, // 终止颜色
                        startMillis: 0, // 开始时间
                        endMillis: -1, // 结束时间
                        curve: Curve.FastOutLinearIn // 曲线类型
                      }
                    ]
                  }
                },
                scale: {
                  // 粒子大小配置
                  range: [0.8, 1.2], // 大小范围
                  updater: {
                    // 更新器配置
                    type: ParticleUpdater.CURVE, // 变化方式为曲线变化
                    config: [// 配置项
                      {
                        from: 1.0, // 起始大小
                        to: 1.0, // 终止大小
                        startMillis: 0, // 开始时间
                        endMillis: -1, // 结束时间
                        curve: Curve.EaseIn
                      }
                    ]
                  }
                },

                // 粒子加速度配置
                acceleration: {
                  speed: {
                    range: [8000, 10000], // 向下减速，模拟重力
                    updater: {
                      type: ParticleUpdater.RANDOM, // 加速度线性变化
                      config: [400, 500]
                    }
                  },
                  angle: {
                    range: [90, 90] // 方向固定向下
                  }
                },

              }
            ]
          }).width("100%").height("100%");
        }
      }
      .width('150lpx') // 设置列布局宽度为150像素
      .height('300lpx') // 设置列布局高度为300像素
      .align(Alignment.Top) // 对齐方式为顶部
      .translate({ x: `${this.itemXPosition}lpx`, y: 0 }); // 平移布局，X轴位置根据itemXPosition动态调整

      Row() { // 创建行布局
        ForEach(this.garbageCategories, (category: GarbageCategory) => { // 遍历垃圾类别数组
          Column() { // 创建列布局
            Text(category.name)// 显示类别名称
              .fontColor(Color.White)// 设置字体颜色为白色
              .fontSize('30lpx')// 设置字体大小
              .padding(5); // 设置内边距
            Divider(); // 添加分隔线
            Text(category.description)// 显示类别描述
              .fontColor(Color.White)// 设置字体颜色为白色
              .fontSize('28lpx')// 设置字体大小
              .padding(5); // 设置内边距
          }
          .backgroundColor(category.color) // 设置背景颜色为类别颜色
          .height('280lpx') // 设置高度
          .width("24%") // 设置宽度占比
          .border({ width: 1 }) // 设置边框宽度
          .borderRadius(5) // 设置圆角半径
          .margin({ left: 1, right: 1 }) // 设置外边距
          .clickEffect({ scale: 0.8, level: ClickEffectLevel.MIDDLE }) // 点击效果
          .onClick(() => { // 点击事件
            if (this.showAnimation) { // 如果正在显示动画
              return // 不执行后续操作
            }
            this.showAnimation = true; // 设置显示动画为true
            let itemX: number = 0; // 初始化物品X轴位置
            if (category.type == 0) { // 如果类别为有害垃圾
              itemX = -270; // 设置X轴位置
            } else if (category.type == 1) { // 如果类别为可回收物
              itemX = -90; // 设置X轴位置
            } else if (category.type == 2) { // 如果类别为厨余垃圾
              itemX = 90; // 设置X轴位置
            } else if (category.type == 3) { // 如果类别为其他垃圾
              itemX = 270; // 设置X轴位置
            }
            animateToImmediately({
              // 立即执行动画
              duration: 200, // 持续时间200毫秒
              onFinish: () => { // 动画完成后的回调
                animateToImmediately({
                  // 立即执行动画
                  duration: 800, // 持续时间800毫秒
                  curve: curves.springCurve(0, 20, 90, 20), // 设置弹簧曲线动画
                  onFinish: () => { // 动画完成后的回调
                    animateToImmediately({
                      // 立即执行动画
                      duration: 200, // 持续时间200毫秒
                      onFinish: () => { // 动画完成后的回调
                        this.itemXPosition = 0; // 重置物品X轴位置
                        this.checkAnswer(category.type); // 检查用户选择的答案
                        this.showAnimation = false; // 设置显示动画为false
                      }
                    }, () => { // 动画更新回调
                      this.itemXPosition = 0; // 重置物品X轴位置
                      this.scaleOptions = { x: 1.0, y: 1.0 }; // 重置缩放选项
                    })
                  }
                }, () => { // 动画更新回调
                  this.scaleOptions = { x: 1.3, y: 1.3 }; // 设置缩放选项
                })
              }
            }, () => { // 动画更新回调
              this.itemXPosition = itemX; // 设置物品X轴位置
            })
          });
        });
      }

      Button('重新开始')// 创建一个按钮，文本为“重新开始”
        .clickEffect({ level: ClickEffectLevel.LIGHT })// 设置点击效果
        .margin({ top: 50 })// 设置按钮上边距为50
        .onClick(() => { // 点击事件
          this.resetQuiz(); // 调用重置测验方法
        }); // 结束按钮定义
    }.width('100%'); // 设置列布局宽度为100%
  } // 结束build方法
} // 结束Index类
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.