{"id":86676,"date":"2026-07-29T01:16:47","date_gmt":"2026-07-28T17:16:47","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/86676.html"},"modified":"2026-07-29T01:16:47","modified_gmt":"2026-07-28T17:16:47","slug":"harmonyos%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%ef%bc%9a%e7%8c%ab%e7%8c%ab%e5%a4%a7%e4%bd%9c%e6%88%98-animation-%e8%a3%85%e9%a5%b0%e7%bb%91%e5%ae%9a%e3%80%81%e9%9a%90%e5%bc%8f%e8%a1%a5","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/86676.html","title":{"rendered":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009"},"content":{"rendered":"

\"\u6587\u7ae0\u914d\u56fe\uff1aanimation<\/p>\n

\"\u9875\u9762\u9884\u89c8\"<\/p>\n

\u524d\u8a00<\/h3>\n

\u4e0a\u4e00\u7bc7\u6211\u4eec\u7528 animateTo \u505a\u4e86\u300c\u4e3b\u52a8\u89e6\u53d1\u7279\u6548\u300d\u2014\u2014\u5f97\u5206\u5f39\u8df3\u3001\u5408\u5e76\u653e\u5927\u3002\u4f46\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d\u7528\u7684\u662f\u53e6\u4e00\u79cd\u52a8\u753b\u2014\u2014.animation({ duration: 100 })（\u7b2c 16\u300133 \u7bc7\u7528\u8fc7），\u6539 position \u81ea\u52a8\u8865\u95f4\u3002\u8fd9\u662f\u9690\u5f0f\u52a8\u753b：\u7ed9\u7ec4\u4ef6\u7ed1\u4e2a\u52a8\u753b\u53c2\u6570，\u4e4b\u540e\u4efb\u4f55\u5c5e\u6027\u53d8\u5316\u90fd\u81ea\u52a8\u8865\u95f4\u3002\u672c\u7bc7\u4e13\u8bb2 animation \u88c5\u9970\u5668\u7684\u673a\u5236\u548c\u5b9e\u6218\u3002<\/p>\n

\u672c\u7bc7\u4ee5\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d position \u8865\u95f4\u4e3a\u951a\u70b9，\u628a animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009\u56db\u5927\u8981\u70b9\u8bb2\u900f\u3002<\/p>\n

\u63d0\u793a：\u672c\u7cfb\u5217\u4e0d\u8bb2 ArkTS \u57fa\u7840\u8bed\u6cd5\u4e0e\u73af\u5883\u642d\u5efa，\u5047\u8bbe\u4f60\u5df2\u8ddf\u5b8c\u7b2c 1\u201355 \u7bc7\u3002\u672c\u7bc7\u662f\u9636\u6bb5\u4e09\u7b2c\u516d\u7bc7\u3002<\/p>\n

\u4e00\u3001\u573a\u666f\u62c6\u89e3：\u732b\u54aa\u4e0b\u843d position \u8865\u95f4<\/h3>\n

\u56de\u987e\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u6e32\u67d3（\u7b2c 16\u300133\u300143 \u7bc7）：<\/p>\n

\/\/ \u6765\u6e90：entry\/src\/main\/ets\/pages\/Index.ets GameView() \u68cb\u76d8 Stack<\/span>
\nForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span> \/* emoji *\/<\/span> }<\/span>
\n .<\/span>width<\/span>(<\/span>\/* size *\/<\/span>)<\/span>.<\/span>height<\/span>(<\/span>\/* size *\/<\/span>)<\/span>
\n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> \/* x * 60 *\/<\/span>,<\/span> y:<\/span> \/* y * 60 *\/<\/span> }<\/span>)<\/span> \/\/ \u2190 \u8bfb cat.x\/cat.y<\/span>
\n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span>,<\/span> curve:<\/span> Curve.<\/span>Linear }<\/span>)<\/span> \/\/ \u2190 \u9690\u5f0f\u52a8\u753b<\/span>
\n}<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> cat.<\/span>id)<\/span><\/p>\n

\u673a\u5236：<\/p>\n

  • \u4e3b\u5faa\u73af\u6bcf 100ms \u6539 cat.y（\u5f15\u64ce updateCats）\u3002<\/li>\n
  • ForEach diff \u590d\u7528 CatItem（\u5bc6\u94a5 cat.id \u4e0d\u53d8）\u3002<\/li>\n
  • position \u91cd\u65b0\u8ba1\u7b97\u65b0 y\u3002<\/li>\n
  • .animation({ duration: 100 }) \u81ea\u52a8\u4ece\u65e7 position \u8865\u95f4\u5230\u65b0 position，100ms \u5e73\u6ed1\u4e0b\u843d\u3002<\/li>\n
  • \u4e0b\u4e00\u5e27\u4e3b\u5faa\u73af\u53c8\u6539 cat.y，\u65b0\u8865\u95f4\u5f00\u59cb\u2014\u2014\u89c6\u89c9\u4e0a\u732b\u54aa\u6bcf 100ms \u5e73\u6ed1\u4e0b\u843d\u4e00\u683c\u3002<\/li>\n

    \u5173\u952e\u7ecf\u9a8c：animation \u9690\u5f0f\u8865\u95f4 = \u6539\u5c5e\u6027\u81ea\u52a8\u52a8\u2014\u2014\u7ed1\u4e00\u6b21 .animation({…})，\u4e4b\u540e position\/scale\/opacity \u7b49\u5c5e\u6027\u53d8\u5316\u90fd\u81ea\u52a8\u8865\u95f4，\u4e0d\u7528\u6bcf\u6b21\u4e3b\u52a8\u8c03 animateTo\u3002<\/p>\n

    \u4e8c\u3001animation \u88c5\u9970\u7ed1\u5b9a<\/h3>\n

    2.1 \u57fa\u672c\u7528\u6cd5<\/h4>\n

    Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> 100<\/span>,<\/span> y:<\/span> 200<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> Curve.<\/span>EaseInOut }<\/span>)<\/span> \/\/ \u2190 \u7ed1\u52a8\u753b<\/span><\/p>\n

    \u62c6\u89e3：<\/p>\n\n\u7247\u6bb5\u542b\u4e49<\/tr>\n\n\n\n\n
    .animation({…})<\/td>\n\u88c5\u9970\u5668，\u7ed1\u5b9a\u52a8\u753b\u53c2\u6570<\/td>\n<\/tr>\n
    duration: 300<\/td>\n\u8865\u95f4\u65f6\u957f 300ms<\/td>\n<\/tr>\n
    curve: Curve.EaseInOut<\/td>\n\u7f13\u52a8\u66f2\u7ebf<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u673a\u5236：\u7ed1\u540e，\u8be5\u7ec4\u4ef6\u4efb\u4f55\u53ef\u52a8\u753b\u5c5e\u6027（position\/scale\/opacity\/rotate\/backgroundColor \u7b49）\u53d8\u5316\u90fd\u81ea\u52a8\u7528\u8fd9\u53c2\u6570\u8865\u95f4\u3002<\/p>\n

    2.2 \u6539\u5c5e\u6027\u81ea\u52a8\u8865\u95f4<\/h4>\n

    @<\/span>State<\/span><\/span> catX:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span><\/p>\n

    Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catX *<\/span> 60<\/span>,<\/span> y:<\/span> 100<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> Curve.<\/span>EaseInOut }<\/span>)<\/span><\/p>\n

    \/\/ \u4e4b\u540e\u6539 catX \u81ea\u52a8\u8865\u95f4<\/span>
    \nthis<\/span>.<\/span>catX =<\/span> 5<\/span>;<\/span> \/\/ \u4ece x=0 \u8865\u95f4\u5230 x=300，300ms EaseInOut<\/span><\/p>\n

    \u5173\u952e\u7ecf\u9a8c：animation \u7ed1\u4e00\u6b21，\u540e\u7eed\u6539\u5c5e\u6027\u81ea\u52a8\u52a8\u2014\u2014\u4e0d\u7528\u6bcf\u6b21\u6539\u90fd\u5305 animateTo\u3002<\/p>\n

    2.3 \u591a\u5c5e\u6027\u540c\u8865<\/h4>\n

    Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catX,<\/span> y:<\/span> this<\/span>.<\/span>catY }<\/span>)<\/span>
    \n .<\/span>scale<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catScale,<\/span> y:<\/span> this<\/span>.<\/span>catScale }<\/span>)<\/span>
    \n .<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>catOpacity)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> Curve.<\/span>EaseInOut }<\/span>)<\/span><\/p>\n

    \/\/ \u6539 catX\/catY\/catScale\/catOpacity \u4efb\u4e00，\u90fd\u81ea\u52a8\u8865\u95f4<\/span>
    \nthis<\/span>.<\/span>catX =<\/span> 100<\/span>;<\/span>
    \nthis<\/span>.<\/span>catScale =<\/span> 1.5<\/span>;<\/span>
    \nthis<\/span>.<\/span>catOpacity =<\/span> 0.5<\/span>;<\/span>
    \n\/\/ \u4e09\u5c5e\u6027\u540c\u65f6\u8865\u95f4，300ms \u5e73\u6ed1\u8fc7\u6e21<\/span><\/p>\n

    \u4e09\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236<\/h3>\n

    3.1 ArkUI \u5982\u4f55\u8bc6\u522b\u300c\u5c5e\u6027\u53d8\u5316\u300d<\/h4>\n

    Column<\/span>(<\/span>)<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> 100<\/span>,<\/span> y:<\/span> 200<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span> }<\/span>)<\/span><\/p>\n

    \/\/ \u7b2c 1 \u6b21\u6e32\u67d3：position = (100, 200)，\u8bb0\u5f55\u4e3a\u300c\u65e7\u503c\u300d<\/span>
    \n\/\/ \u6539 catX \u89e6\u53d1\u91cd\u6e32\u67d3：<\/span>
    \n\/\/ position = (300, 200)，ArkUI \u68c0\u6d4b\u5230 x \u4ece 100 \u2192 300<\/span>
    \n\/\/ .animation \u68c0\u6d4b\u5230\u53d8\u5316，\u7528 300ms \u8865\u95f4 x: 100 \u2192 300<\/span>
    \n\/\/ y \u6ca1\u53d8，\u4e0d\u8865\u95f4<\/span><\/p>\n

    \u673a\u5236：<\/p>\n

  • \u9996\u6b21\u6e32\u67d3，\u8bb0\u5f55\u6240\u6709\u53ef\u52a8\u753b\u5c5e\u6027\u7684\u300c\u65e7\u503c\u300d\u3002<\/li>\n
  • \u91cd\u6e32\u67d3\u65f6，\u5bf9\u6bd4\u65b0\u65e7\u503c\u2014\u2014\u53d8\u5316\u7684\u5c5e\u6027\u8d70\u8865\u95f4，\u6ca1\u53d8\u7684\u77ac\u5207\u3002<\/li>\n
  • \u8865\u95f4\u8fc7\u7a0b\u4e2d，\u7ec4\u4ef6\u89c6\u89c9\u4e0a\u4ece\u65e7\u503c\u5e73\u6ed1\u8fc7\u6e21\u5230\u65b0\u503c\u3002<\/li>\n

    3.2 \u54ea\u4e9b\u5c5e\u6027\u53ef\u8865\u95f4<\/h4>\n\n\u5c5e\u6027\u53ef\u8865\u95f4\u4e3e\u4f8b<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n
    position<\/td>\n\u2705<\/td>\n\u732b\u54aa\u4e0b\u843d<\/td>\n<\/tr>\n
    scale<\/td>\n\u2705<\/td>\n\u653e\u5927\u7f29\u5c0f<\/td>\n<\/tr>\n
    opacity<\/td>\n\u2705<\/td>\n\u6de1\u5165\u6de1\u51fa<\/td>\n<\/tr>\n
    rotate<\/td>\n\u2705<\/td>\n\u65cb\u8f6c<\/td>\n<\/tr>\n
    backgroundColor<\/td>\n\u2705<\/td>\n\u989c\u8272\u8fc7\u6e21<\/td>\n<\/tr>\n
    width\/height<\/td>\n\u2705<\/td>\n\u5c3a\u5bf8\u53d8\u5316<\/td>\n<\/tr>\n
    margin\/padding<\/td>\n\u2705<\/td>\n\u95f4\u8ddd\u53d8\u5316<\/td>\n<\/tr>\n
    fontSize<\/td>\n\u2705<\/td>\n\u5b57\u53f7\u53d8\u5316<\/td>\n<\/tr>\n
    borderRadius<\/td>\n\u2705<\/td>\n\u5706\u89d2\u53d8\u5316<\/td>\n<\/tr>\n
    Text \u6587\u672c\u5185\u5bb9<\/td>\n\u274c<\/td>\n\u6587\u672c\u77ac\u5207（\u975e\u6570\u503c）<\/td>\n<\/tr>\n
    if \u6761\u4ef6\u6e32\u67d3<\/td>\n\u274c<\/td>\n\u51fa\u73b0\/\u9500\u6bc1\u4e0d\u8865\u95f4（\u7528 transition）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u5173\u952e\u7ecf\u9a8c：\u6570\u503c\u578b\u5c5e\u6027\u53ef\u8865\u95f4，\u6587\u672c\/\u6761\u4ef6\u6e32\u67d3\u4e0d\u8865\u95f4\u2014\u2014\u6587\u672c\u53d8\u5316\u8981\u6de1\u51fa\u65e7+\u6de1\u5165\u65b0（\u7528 opacity \u6216 transition）\u3002<\/p>\n

    3.3 \u8865\u95f4\u6253\u65ad\u4e0e\u91cd\u542f<\/h4>\n

    \/\/ \u5047\u8bbe catX \u4ece 0 \u8865\u95f4\u5230 300，\u8fdb\u884c\u5230 150ms（x=150）<\/span>
    \nthis<\/span>.<\/span>catX =<\/span> 500<\/span>;<\/span> \/\/ \u4e2d\u9014\u6539\u65b0\u76ee\u6807<\/span>
    \n\/\/ ArkUI \u4ece\u5f53\u524d x=150 \u91cd\u65b0\u5f00\u59cb\u8865\u95f4\u5230 500，300ms EaseInOut<\/span>
    \n\/\/ \u4e0d\u7b49\u5f85\u539f\u8865\u95f4\u5b8c\u6210，\u7acb\u5373\u91cd\u542f<\/span><\/p>\n

    \u5b9e\u6218\u7ecf\u9a8c：animation \u8865\u95f4\u53ef\u4e2d\u9014\u6253\u65ad\u2014\u2014\u6539\u65b0\u76ee\u6807\u7acb\u5373\u4ece\u5f53\u524d\u503c\u91cd\u542f\u8865\u95f4，\u9002\u5408\u300c\u5b9e\u65f6\u8ddf\u968f\u300d\u573a\u666f（\u732b\u54aa\u4e0b\u843d\u6bcf 100ms \u6539\u76ee\u6807）\u3002<\/p>\n

    \u56db\u3001\u4e0e animateTo \u7684\u53d6\u820d<\/h3>\n

    4.1 \u4e24\u79cd\u52a8\u753b API \u5bf9\u6bd4<\/h4>\n\n\u7ef4\u5ea6\u9690\u5f0f .animation\u663e\u5f0f animateTo<\/tr>\n\n\n\n\n\n\n
    \u89e6\u53d1<\/td>\n\u6539\u5c5e\u6027\u81ea\u52a8\u8865\u95f4<\/td>\n\u4e3b\u52a8\u8c03 API<\/td>\n<\/tr>\n
    \u7ed1\u5b9a<\/td>\n\u7ed1\u5728\u7ec4\u4ef6\u88c5\u9970\u94fe<\/td>\n\u8c03\u7528\u65f6\u5305\u95ed\u5305<\/td>\n<\/tr>\n
    \u53c2\u6570<\/td>\n\u56fa\u5b9a\u4e00\u6b21<\/td>\n\u6bcf\u6b21\u53ef\u4f20\u4e0d\u540c<\/td>\n<\/tr>\n
    \u591a\u6bb5\u4e32\u8054<\/td>\n\u274c \u96be<\/td>\n\u2705 onFinish \u4e32\u8054<\/td>\n<\/tr>\n
    \u9002\u5408<\/td>\n\u300c\u5c5e\u6027\u81ea\u7136\u53d8\u5316\u300d<\/td>\n\u300c\u4e3b\u52a8\u89e6\u53d1\u7279\u6548\u300d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    4.2 \u573a\u666f\u5bf9\u7167<\/h4>\n

    \/\/ \u573a\u666f A：\u732b\u54aa\u4e0b\u843d（position \u81ea\u7136\u53d8）\u2192 \u9690\u5f0f animation<\/span>
    \nForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> cat.<\/span>x *<\/span> 60<\/span>,<\/span> y:<\/span> cat.<\/span>y *<\/span> 60<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span>,<\/span> curve:<\/span> Curve.<\/span>Linear }<\/span>)<\/span> \/\/ \u2190 \u9690\u5f0f<\/span>
    \n}<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> cat.<\/span>id)<\/span><\/p>\n

    \/\/ \u573a\u666f B：\u5f97\u5206\u5f39\u8df3（\u70b9\u51fb\u4e3b\u52a8\u89e6\u53d1）\u2192 \u663e\u5f0f animateTo<\/span>
    \nhandleScoreChange<\/span>(<\/span>)<\/span> {<\/span>
    \n animateTo<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> Curve.<\/span>EaseOut }<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n this<\/span>.<\/span>scoreScale =<\/span> 1.5<\/span>;<\/span> \/\/ \u4e3b\u52a8\u89e6\u53d1<\/span>
    \n }<\/span>)<\/span>;<\/span>
    \n}<\/span>
    \nText<\/span>(<\/span>this<\/span>.<\/span>score.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>
    \n .<\/span>scale<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>scoreScale,<\/span> y:<\/span> this<\/span>.<\/span>scoreScale }<\/span>)<\/span>
    \n \/\/ \u4e0d\u7ed1 .animation，\u9760 animateTo \u4e3b\u52a8\u89e6\u53d1<\/span><\/p>\n

    4.3 \u53d6\u820d\u51b3\u7b56<\/h4>\n

    \u52a8\u753b\u89e6\u53d1\u65f6\u673a？
    \n \u251c\u2500 \u5c5e\u6027\u81ea\u7136\u53d8\u5316（\u6bcf\u5e27\/\u6bcf\u6b21\u5faa\u73af\u6539）\u2192 \u9690\u5f0f .animation
    \n \u2514 \u4e3b\u52a8\u89e6\u53d1\u4e00\u6b21（\u70b9\u51fb\/\u5408\u5e76\/\u8fde\u51fb）\u2192 \u663e\u5f0f animateTo<\/p>\n

    \u5173\u952e\u7ecf\u9a8c：\u300c\u5faa\u73af\u6539\u5c5e\u6027\u300d\u7528\u9690\u5f0f animation，\u300c\u70b9\u51fb\u89e6\u53d1\u4e00\u6b21\u300d\u7528\u663e\u5f0f animateTo\u2014\u2014\u732b\u54aa\u4e0b\u843d\u6bcf 100ms \u6539 position \u7528\u9690\u5f0f，\u5f97\u5206\u5f39\u8df3\u70b9\u51fb\u89e6\u53d1\u7528\u663e\u5f0f\u3002<\/p>\n

    4.4 \u4e24\u8005\u6df7\u7528<\/h4>\n

    \/\/ \u540c\u7ec4\u4ef6\u53ef\u540c\u65f6\u7528：\u9690\u5f0f\u7ba1 position，\u663e\u5f0f\u7ba1 scale<\/span>
    \nForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> cat.<\/span>x *<\/span> 60<\/span>,<\/span> y:<\/span> cat.<\/span>y *<\/span> 60<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span>,<\/span> curve:<\/span> Curve.<\/span>Linear }<\/span>)<\/span> \/\/ \u9690\u5f0f\u7ba1\u4f4d\u7f6e<\/span>
    \n .<\/span>scale<\/span>(<\/span>{<\/span>
    \n x:<\/span> cat.<\/span>id ===<\/span> this<\/span>.<\/span>newCatId ?<\/span> this<\/span>.<\/span>newCatScale :<\/span> 1<\/span>,<\/span>
    \n y:<\/span> cat.<\/span>id ===<\/span> this<\/span>.<\/span>newCatId ?<\/span> this<\/span>.<\/span>newCatScale :<\/span> 1<\/span>
    \n }<\/span>)<\/span>
    \n \/\/ \u4e0d\u7ed1 .animation \u7ed9 scale，\u9760 animateTo \u4e3b\u52a8\u89e6\u53d1\u5408\u5e76\u653e\u5927<\/span>
    \n}<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> cat.<\/span>id)<\/span><\/p>\n

    \u5b9e\u6218\u7ecf\u9a8c：\u9690\u5f0f\u548c\u663e\u5f0f\u53ef\u6df7\u7528\u2014\u2014\u4e0d\u540c\u5c5e\u6027\u5206\u522b\u7528，\u5404\u7ba1\u5404\u7684\u3002<\/p>\n

    \u4e94\u3001curve \u66f2\u7ebf\u9009<\/h3>\n

    5.1 \u5e38\u7528 Curve<\/h4>\n

    enum<\/span> Curve {<\/span>
    \n Linear,<\/span> \/\/ \u5300\u901f<\/span>
    \n Ease,<\/span> \/\/ \u5148\u6162\u540e\u5feb\u518d\u6162<\/span>
    \n EaseIn,<\/span> \/\/ \u5148\u6162\u540e\u5feb<\/span>
    \n EaseOut,<\/span> \/\/ \u5148\u5feb\u540e\u6162<\/span>
    \n EaseInOut,<\/span> \/\/ \u4e24\u7aef\u6162\u4e2d\u95f4\u5feb<\/span>
    \n FastOut,<\/span> \/\/ \u5feb\u51fa<\/span>
    \n SlowOut,<\/span> \/\/ \u6162\u51fa<\/span>
    \n \/\/ \u7b49\u66f4\u591a<\/span>
    \n}<\/span><\/p>\n

    5.2 \u573a\u666f\u5bf9\u7167<\/h4>\n\n\u573a\u666f\u63a8\u8350 Curve\u539f\u56e0<\/tr>\n\n\n\n\n\n\n
    \u732b\u54aa\u4e0b\u843d（\u91cd\u529b\u611f）<\/td>\nLinear \u6216 FastOut<\/td>\n\u5300\u901f\u6216\u52a0\u901f\u4e0b\u843d<\/td>\n<\/tr>\n
    \u4f4d\u7f6e\u79fb\u52a8（UI \u5207\u6362）<\/td>\nEaseInOut<\/td>\n\u4e24\u7aef\u6162\u4e2d\u95f4\u5feb，\u81ea\u7136<\/td>\n<\/tr>\n
    \u653e\u5927\u51fa\u73b0<\/td>\nEaseOut<\/td>\n\u5148\u5feb\u540e\u6162\u6709\u51b2\u51fb<\/td>\n<\/tr>\n
    \u7f29\u5c0f\u6d88\u5931<\/td>\nEaseIn<\/td>\n\u5148\u6162\u540e\u5feb\u6e10\u9690<\/td>\n<\/tr>\n
    \u5f39\u6027\u53cd\u9988<\/td>\nSpring（ICurve）<\/td>\n\u5f39\u7c27\u56de\u5f39<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    5.3 \u81ea\u5b9a\u4e49 ICurve<\/h4>\n

    import<\/span> {<\/span> curves }<\/span> from<\/span> '@kit.ArkUI'<\/span>;<\/span><\/p>\n

    \/\/ \u5f39\u6027\u66f2\u7ebf<\/span>
    \nconst<\/span> springCurve =<\/span> curves.<\/span>springMotion<\/span>(<\/span>0.5<\/span>,<\/span> 0.8<\/span>)<\/span>;<\/span><\/p>\n

    Column<\/span>(<\/span>)<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catX,<\/span> y:<\/span> 100<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> springCurve }<\/span>)<\/span> \/\/ \u2190 \u7528 ICurve<\/span><\/p>\n

    \u5173\u952e\u7ecf\u9a8c：\u590d\u6742\u66f2\u7ebf\u7528 ICurve \u81ea\u5b9a\u4e49\u2014\u2014\u672c\u7cfb\u5217\u7b2c 59 \u7bc7\u4f1a\u4e13\u8bb2 Spring \u5f39\u6027\u7269\u7406\u3002<\/p>\n

    \u516d\u3001\u5b8c\u6574\u4ee3\u7801：\u732b\u54aa\u4e0b\u843d + \u591a\u5c5e\u6027\u8865\u95f4<\/h3>\n

    \/\/ \u6765\u6e90：entry\/src\/main\/ets\/pages\/Index.ets（animation \u9690\u5f0f\u52a8\u753b\u5b8c\u6574\u7248）<\/span>
    \n@<\/span>Entry<\/span><\/span>
    \n@<\/span>Component<\/span><\/span>
    \nstruct Index {<\/span>
    \n @<\/span>State<\/span><\/span> gameState:<\/span> GameState =<\/span> GameState.<\/span>IDLE<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> score:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> cats:<\/span> Cat[<\/span>]<\/span> =<\/span> [<\/span>]<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> combo:<\/span> ComboInfo =<\/span> {<\/span> count:<\/span> 0<\/span>,<\/span> multiplier:<\/span> 1<\/span>,<\/span> lastMergeTime:<\/span> 0<\/span> }<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> nextCatLevel:<\/span> CatLevel =<\/span> CatLevel.<\/span>SMALL<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> highScore:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
    \n @<\/span>State<\/span><\/span> gameTime:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
    \n \/* … \u5176\u4ed6 state *\/<\/span><\/p>\n

    private<\/span> gameEngine:<\/span> GameEngine =<\/span> new<\/span> GameEngine<\/span>(<\/span>)<\/span>;<\/span>
    \n private<\/span> gameLoopTimer:<\/span> number<\/span> =<\/span> –<\/span>1<\/span>;<\/span>
    \n private<\/span> spawnTimer:<\/span> number<\/span> =<\/span> –<\/span>1<\/span>;<\/span>
    \n private<\/span> timeTimer:<\/span> number<\/span> =<\/span> –<\/span>1<\/span>;<\/span>
    \n private<\/span> readonly<\/span> cols:<\/span> number<\/span>[<\/span>]<\/span> =<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>,<\/span> 4<\/span>]<\/span>;<\/span><\/p>\n

    startGame<\/span>(<\/span>)<\/span> {<\/span>
    \n this<\/span>.<\/span>clearTimers<\/span>(<\/span>)<\/span>;<\/span>
    \n this<\/span>.<\/span>gameEngine.<\/span>reset<\/span>(<\/span>)<\/span>;<\/span>
    \n this<\/span>.<\/span>gameState =<\/span> GameState.<\/span>PLAYING<\/span>;<\/span>
    \n this<\/span>.<\/span>score =<\/span> 0<\/span>;<\/span>
    \n this<\/span>.<\/span>cats =<\/span> [<\/span>]<\/span>;<\/span>
    \n this<\/span>.<\/span>gameTime =<\/span> 0<\/span>;<\/span>
    \n this<\/span>.<\/span>combo =<\/span> {<\/span> count:<\/span> 0<\/span>,<\/span> multiplier:<\/span> 1<\/span>,<\/span> lastMergeTime:<\/span> 0<\/span> }<\/span>;<\/span>
    \n this<\/span>.<\/span>nextCatLevel =<\/span> this<\/span>.<\/span>gameEngine.<\/span>getNextCatLevel<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u4e3b\u5faa\u73af：\u6bcf 100ms \u6539 cat.y，animation \u9690\u5f0f\u8865\u95f4\u4e0b\u843d<\/span>
    \n this<\/span>.<\/span>gameLoopTimer =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
    \n if<\/span> (<\/span>this<\/span>.<\/span>gameState !==<\/span> GameState.<\/span>PLAYING<\/span>)<\/span> return<\/span>;<\/span>
    \n this<\/span>.<\/span>cats =<\/span> this<\/span>.<\/span>gameEngine.<\/span>updateCats<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u6539 cat.y<\/span>
    \n \/\/ animation \u81ea\u52a8\u4ece\u65e7 y \u8865\u95f4\u5230\u65b0 y，100ms \u5e73\u6ed1\u4e0b\u843d<\/span>
    \n this<\/span>.<\/span>score =<\/span> this<\/span>.<\/span>gameEngine.<\/span>getScore<\/span>(<\/span>)<\/span>;<\/span>
    \n this<\/span>.<\/span>combo =<\/span> this<\/span>.<\/span>gameEngine.<\/span>getCombo<\/span>(<\/span>)<\/span>;<\/span>
    \n if<\/span> (<\/span>this<\/span>.<\/span>gameEngine.<\/span>isGameOver<\/span>(<\/span>)<\/span>)<\/span> {<\/span> this<\/span>.<\/span>endGame<\/span>(<\/span>)<\/span>;<\/span> }<\/span>
    \n }<\/span>,<\/span> 100<\/span>)<\/span>;<\/span><\/p>\n

    \/* spawnTimer\u3001timeTimer \u7b65\u7565 *\/<\/span>
    \n }<\/span><\/p>\n

    \/* pauseGame \/ resumeGame \/ endGame \/ handleColumnClick \/ clearTimers \/ formatTime \/ aboutToDisappear \u7b65\u7565 *\/<\/span><\/p>\n

    @<\/span>Builder<\/span><\/span>
    \n GameView<\/span>(<\/span>)<\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n this<\/span>.<\/span>GameHUD<\/span>(<\/span>)<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n Row<\/span>(<\/span>)<\/span> {<\/span> \/* \u9884\u544a\u533a *\/<\/span> }<\/span>
    \n Stack<\/span>(<\/span>)<\/span> {<\/span>
    \n \/\/ \u68cb\u76d8\u80cc\u666f\u7f51\u683c<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n ForEach<\/span>(<\/span>this<\/span>.<\/span>rows,<\/span> (<\/span>row:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
    \n Row<\/span>(<\/span>)<\/span> {<\/span>
    \n ForEach<\/span>(<\/span>this<\/span>.<\/span>cols,<\/span> (<\/span>col:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span>
    \n .<\/span>width<\/span>(<\/span>GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>.<\/span>height<\/span>(<\/span>GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>
    \n .<\/span>border<\/span>(<\/span>{<\/span> width:<\/span> 1<\/span>,<\/span> color:<\/span> 'rgba(255,255,255,0.5)'<\/span> }<\/span>)<\/span>
    \n }<\/span>,<\/span> (<\/span>col:<\/span> number<\/span>)<\/span> =><\/span> `<\/span>grid_<\/span>${<\/span>row}<\/span><\/span>_<\/span>${<\/span>col}<\/span><\/span>`<\/span><\/span>)<\/span>
    \n }<\/span>
    \n }<\/span>,<\/span> (<\/span>row:<\/span> number<\/span>)<\/span> =><\/span> `<\/span>grid_row_<\/span>${<\/span>row}<\/span><\/span>`<\/span><\/span>)<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u732b\u54aa\u6e32\u67d3：animation \u9690\u5f0f\u52a8\u753b（\u672c\u7bc7\u91cd\u70b9）<\/span>
    \n ForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>emoji)<\/span>
    \n .<\/span>fontSize<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size *<\/span> 0.5<\/span>)<\/span>
    \n }<\/span>
    \n .<\/span>width<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size)<\/span>
    \n .<\/span>height<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size)<\/span>
    \n .<\/span>borderRadius<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size \/<\/span> 2<\/span>)<\/span>
    \n .<\/span>backgroundColor<\/span>(<\/span>CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>color)<\/span>
    \n .<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>Center)<\/span>
    \n .<\/span>shadow<\/span>(<\/span>{<\/span> radius:<\/span> 4<\/span>,<\/span> color:<\/span> 'rgba(0,0,0,0.2)'<\/span>,<\/span> offsetY:<\/span> 2<\/span> }<\/span>)<\/span>
    \n \/\/ position \u8bfb cat.x\/cat.y，\u4e3b\u5faa\u73af\u6539 cat.y \u89e6\u53d1\u8865\u95f4<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span>
    \n x:<\/span> cat.<\/span>x *<\/span> 60<\/span> +<\/span> (<\/span>60<\/span> –<\/span> CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size)<\/span> \/<\/span> 2<\/span>,<\/span>
    \n y:<\/span> cat.<\/span>y *<\/span> 60<\/span> +<\/span> (<\/span>60<\/span> –<\/span> CatConfig[<\/span>cat.<\/span>level]<\/span>.<\/span>size)<\/span> \/<\/span> 2<\/span>
    \n }<\/span>)<\/span>
    \n \/\/ \u2190 \u9690\u5f0f\u52a8\u753b：100ms Linear \u8865\u95f4\u4f4d\u7f6e\u53d8\u5316<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span>,<\/span> curve:<\/span> Curve.<\/span>Linear }<\/span>)<\/span>
    \n }<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> cat.<\/span>id)<\/span><\/p>\n

    \/\/ \u5217\u70b9\u51fb\u5c42<\/span>
    \n Row<\/span>(<\/span>)<\/span> {<\/span>
    \n ForEach<\/span>(<\/span>this<\/span>.<\/span>cols,<\/span> (<\/span>col:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span>
    \n .<\/span>width<\/span>(<\/span>GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>
    \n .<\/span>height<\/span>(<\/span>GameConfig.<\/span>BOARD_HEIGHT<\/span> *<\/span> GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>
    \n .<\/span>backgroundColor<\/span>(<\/span>'rgba(0,0,0,0)'<\/span>)<\/span>
    \n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>handleColumnClick<\/span>(<\/span>col)<\/span>;<\/span> }<\/span>)<\/span>
    \n }<\/span>,<\/span> (<\/span>col:<\/span> number<\/span>)<\/span> =><\/span> `<\/span>click_<\/span>${<\/span>col}<\/span><\/span>`<\/span><\/span>)<\/span>
    \n }<\/span>
    \n }<\/span>
    \n .<\/span>width<\/span>(<\/span>GameConfig.<\/span>BOARD_WIDTH<\/span> *<\/span> GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>
    \n .<\/span>height<\/span>(<\/span>GameConfig.<\/span>BOARD_HEIGHT<\/span> *<\/span> GameConfig.<\/span>CELL_SIZE<\/span>)<\/span>
    \n .<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>.<\/span>clip<\/span>(<\/span>true<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>'#D6EEF5'<\/span>)<\/span>
    \n }<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

    Spacer<\/span>(<\/span>)<\/span>
    \n Row<\/span>(<\/span>)<\/span> {<\/span> \/* \u5e95\u90e8\u63a7\u5236\u680f *\/<\/span> }<\/span>
    \n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 24<\/span>,<\/span> right:<\/span> 24<\/span>,<\/span> bottom:<\/span> 24<\/span>,<\/span> top:<\/span> 12<\/span> }<\/span>)<\/span>
    \n }<\/span>
    \n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
    \n .<\/span>linearGradient<\/span>(<\/span>{<\/span>
    \n direction:<\/span> GradientDirection.<\/span>Bottom,<\/span>
    \n colors:<\/span> [<\/span>[<\/span>'#E8F4F8'<\/span>,<\/span> 0.0<\/span>]<\/span>,<\/span> [<\/span>'#D6EEF5'<\/span>,<\/span> 0.5<\/span>]<\/span>,<\/span> [<\/span>'#C9E8F2'<\/span>,<\/span> 1.0<\/span>]<\/span>]<\/span>
    \n }<\/span>)<\/span>
    \n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
    \n }<\/span><\/p>\n

    \/* GameHUD \/ MainMenuView \/ PauseOverlay \/ GameOverOverlay \/ StatItem \u7b65\u7565 *\/<\/span>
    \n}<\/span><\/p>\n

    \u4e03\u3001\u8e29\u5751\u63d0\u793a<\/h3>\n

    7.1 animation \u7ed1\u5728\u4e0d\u53ef\u8865\u95f4\u5c5e\u6027<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u7ed1 animation \u4f46\u6539\u7684\u662f\u6587\u672c\u5185\u5bb9（\u4e0d\u53ef\u8865\u95f4）<\/span>
    \nText<\/span>(<\/span>this<\/span>.<\/span>score.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span> }<\/span>)<\/span>
    \n\/\/ \u6539 score \u6587\u672c\u77ac\u5207，animation \u65e0\u6548<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u6587\u672c\u53d8\u5316\u7528 opacity \u6de1\u5165\u6de1\u51fa，\u6216 animateTo \u663e\u5f0f<\/span>
    \nText<\/span>(<\/span>this<\/span>.<\/span>score.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>
    \n .<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>scoreOpacity)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 300<\/span> }<\/span>)<\/span> \/\/ \u6539 opacity \u53ef\u8865\u95f4<\/span><\/p>\n

    7.2 \u5fd8\u7ed1 animation \u6539\u5c5e\u6027\u77ac\u5207<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u6ca1\u7ed1 animation，\u6539 position \u77ac\u5207<\/span>
    \nColumn<\/span>(<\/span>)<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catX,<\/span> y:<\/span> 100<\/span> }<\/span>)<\/span>
    \n \/\/ \u5fe0\u4e86 .animation({…})<\/span>
    \n\/\/ \u6539 catX，\u4f4d\u7f6e\u77ac\u95f4\u8df3\u5230\u65b0\u503c，\u65e0\u8865\u95f4<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u7ed1 animation<\/span>
    \nColumn<\/span>(<\/span>)<\/span>
    \n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> this<\/span>.<\/span>catX,<\/span> y:<\/span> 100<\/span> }<\/span>)<\/span>
    \n .<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span>,<\/span> curve:<\/span> Curve.<\/span>Linear }<\/span>)<\/span> \/\/ \u7ed1<\/span>
    \n\/\/ \u6539 catX，100ms \u5e73\u6ed1\u8fc7\u6e21<\/span><\/p>\n

    7.3 duration \u592a\u957f\u5bfc\u81f4\u62d6\u5f71<\/h4>\n

    \/\/ \u26a0\ufe0f \u732b\u54aa\u4e0b\u843d\u7528 1000ms \u4f1a\u62d6\u5f71：\u4e3b\u5faa\u73af\u6bcf 100ms \u6539 y，\u8865\u95f4\u8fd8\u6ca1\u5b8c\u53c8\u6539\u65b0 y<\/span>
    \n.<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 1000<\/span> }<\/span>)<\/span> \/\/ \u592a\u957f，\u8865\u95f4\u8ddf\u4e0d\u4e0a\u4e3b\u5faa\u73af\u6539\u901f<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u8865\u95f4\u65f6\u957f \u2264 \u4e3b\u5faa\u5faa\u5468\u671f<\/span>
    \n.<\/span>animation<\/span>(<\/span>{<\/span> duration:<\/span> 100<\/span> }<\/span>)<\/span> \/\/ 100ms \u8865\u95f4 = 100ms \u4e3b\u5faa\u73af\u5468\u671f，\u521a\u597d<\/span><\/p>\n

    \u5173\u952e\u7ecf\u9a8c：\u5faa\u73af\u6539\u5c5e\u6027\u7684 animation duration \u2264 \u5faa\u73af\u5468\u671f\u2014\u2014\u5426\u5219\u8865\u95f4\u8ddf\u4e0d\u4e0a\u6539\u901f，\u62d6\u5f71\u6216\u5361\u987f\u3002<\/p>\n

    7.4 ForEach \u5bc6\u94a5\u7528\u4f1a\u53d8\u5b57\u6bb5<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u5bc6\u94a5\u7528 y，\u4e0b\u843d\u65f6\u5bc6\u94a5\u53d8，ForEach \u9500\u6bc1\u65b0\u5efa，animation \u5931\u6548<\/span>
    \nForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span> \/* … *\/<\/span> }<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> `<\/span>y_<\/span>${<\/span>cat.<\/span>y}<\/span><\/span>`<\/span><\/span>)<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u5bc6\u94a5\u7528\u4e0d\u53d8\u7684 id，\u590d\u7528 CatItem，animation \u8fde\u7eed\u8865\u95f4<\/span>
    \nForEach<\/span>(<\/span>this<\/span>.<\/span>cats,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> {<\/span> \/* … *\/<\/span> }<\/span>,<\/span> (<\/span>cat:<\/span> Cat)<\/span> =><\/span> cat.<\/span>id)<\/span><\/p>\n

    \u7b2c 15\u300144 \u7bc7\u8bb2\u8fc7\u8fd9\u4e2a\u5751\u2014\u2014\u5bc6\u94a5\u53d8\u4f1a\u9500\u6bc1\u65b0\u5efa，animation \u91cd\u7f6e，\u8865\u95f4\u65ad\u88c2\u3002<\/p>\n

    \u516b\u3001\u8c03\u8bd5\u6280\u5de7<\/h3>\n
  • console.info \u6253 cat.y：\u4e3b\u5faa\u73af\u91cc log，\u8ffd\u6bcf 100ms \u6539\u503c；animation \u8865\u95f4\u5e94\u8ddf\u968f\u3002<\/li>\n
  • \u77ac\u5207\u4e0d\u8865\u95f4\u6392\u67e5：\u68c0\u67e5\u662f\u5426\u7ed1\u4e86 .animation；\u68c0\u67e5\u5c5e\u6027\u662f\u5426\u53ef\u8865\u95f4（\u6570\u503c\u578b）；\u68c0\u67e5 ForEach \u5bc6\u94a5\u662f\u5426\u53d8\u3002<\/li>\n
  • \u62d6\u5f71\u6392\u67e5：\u68c0\u67e5 duration \u662f\u5426 > \u5faa\u73af\u5468\u671f；\u68c0\u67e5 curve \u662f\u5426\u8fc7\u6162\u3002<\/li>\n
  • DevEco Animation Inspector：\u67e5\u770b\u8865\u95f4\u8fc7\u7a0b\u548c\u53c2\u6570\u3002<\/li>\n

    \u4e5d\u3001\u6027\u80fd\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h3>\n
  • \u300c\u5faa\u73af\u6539\u5c5e\u6027\u300d\u7528\u9690\u5f0f animation，\u300c\u70b9\u51fb\u89e6\u53d1\u4e00\u6b21\u300d\u7528\u663e\u5f0f animateTo\u2014\u2014\u732b\u54aa\u4e0b\u843d\u9690\u5f0f，\u5f97\u5206\u5f39\u8df3\u663e\u5f0f\u3002<\/li>\n
  • animation duration \u2264 \u5faa\u73af\u5468\u671f\u2014\u2014\u5426\u5219\u8865\u95f4\u8ddf\u4e0d\u4e0a\u6539\u901f，\u62d6\u5f71\u3002<\/li>\n
  • \u6570\u503c\u578b\u5c5e\u6027\u53ef\u8865\u95f4，\u6587\u672c\/\u6761\u4ef6\u6e32\u67d3\u4e0d\u8865\u95f4\u2014\u2014\u6587\u672c\u53d8\u5316\u7528 opacity \u6216 transition\u3002<\/li>\n
  • ForEach \u5bc6\u94a5\u7528\u4e0d\u53d8\u5b57\u6bb5\u2014\u2014\u5bc6\u94a5\u53d8\u9500\u6bc1\u65b0\u5efa，animation \u91cd\u7f6e\u65ad\u88c2\u3002<\/li>\n
  • curve \u9009 Linear \u505a\u5300\u901f，EaseInOut \u505a\u81ea\u7136\u79fb\u52a8，EaseOut \u505a\u51fa\u73b0\u2014\u2014\u6309\u573a\u666f\u9009\u3002<\/li>\n
  • \u9690\u5f0f\u548c\u663e\u5f0f\u53ef\u6df7\u7528\u2014\u2014\u4e0d\u540c\u5c5e\u6027\u5206\u522b\u7ba1，\u5404\u8865\u5404\u7684\u3002<\/li>\n

    \u5341\u3001\u9636\u6bb5\u4e09\u8fdb\u5ea6（51\u201356）<\/h3>\n

    \u672c\u7bc7\u662f\u9636\u6bb5\u4e09\u300c\u4ea4\u4e92\u4e0e\u52a8\u753b\u300d\u7b2c 6 \u7bc7：<\/p>\n\n\u7bc7\u4e3b\u9898\u6838\u5fc3\u8981\u70b9<\/tr>\n\n\n\n\n\n\n\n
    51<\/td>\nonTouch<\/td>\n\u624b\u52bf\u4e09\u9636\u6bb5<\/td>\n<\/tr>\n
    52<\/td>\nonHover<\/td>\n\u60ac\u505c\u53cd\u9988<\/td>\n<\/tr>\n
    53<\/td>\nonKeyEvent<\/td>\n\u952e\u76d8\/\u9065\u63a7\u6309\u952e<\/td>\n<\/tr>\n
    54<\/td>\nbindContextMenu<\/td>\n\u4e0a\u4e0b\u6587\u83dc\u5355<\/td>\n<\/tr>\n
    55<\/td>\nanimateTo<\/td>\n\u663e\u5f0f\u52a8\u753b\u89e6\u53d1<\/td>\n<\/tr>\n
    56（\u672c\u7bc7）<\/td>\nanimation<\/td>\n\u9690\u5f0f\u8865\u95f4，\u6539\u5c5e\u6027\u81ea\u52a8\u52a8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u63a5\u4e0b\u6765\u7b2c 57\u201360 \u7bc7\u4f1a\u8986\u76d6：Hero \u5171\u4eab\u5143\u7d20\u3001transition \u8f6c\u573a\u3001Spring \u5f39\u6027\u7269\u7406\u3001Hero Style Player\u3002<\/p>\n

    \u603b\u7ed3<\/h3>\n

    \u672c\u7bc7\u6211\u4eec\u4ece animation \u9690\u5f0f\u52a8\u753b\u5207\u5165，\u638c\u63e1\u4e86\u88c5\u9970\u7ed1\u5b9a\u4e0e\u81ea\u52a8\u8865\u95f4\u673a\u5236\u3001\u53ef\u8865\u95f4\u5c5e\u6027（\u6570\u503c\u578b）vs \u4e0d\u53ef\u8865\u95f4（\u6587\u672c\/\u6761\u4ef6）\u3001\u4e0e animateTo \u7684\u53d6\u820d（\u5faa\u73af\u6539\u9690\u5f0f，\u70b9\u51fb\u89e6\u53d1\u663e\u5f0f）\u3001curve \u66f2\u7ebf\u9009\u56db\u5927\u8981\u70b9，\u5e76\u7ed9\u51fa\u4e86\u732b\u54aa\u4e0b\u843d animation \u9690\u5f0f\u8865\u95f4\u7684\u5b8c\u6574\u4ee3\u7801\u3002\u6838\u5fc3\u8981\u70b9：animation \u7ed1\u4e00\u6b21\u6539\u5c5e\u6027\u81ea\u52a8\u8865\u95f4；duration \u2264 \u5faa\u73af\u5468\u671f\u907f\u62d6\u5f71；\u6570\u503c\u53ef\u8865\u95f4\u6587\u672c\u4e0d\u53ef；\u5bc6\u94a5\u7528\u4e0d\u53d8\u5b57\u6bb5\u4fdd\u8865\u95f4\u8fde\u7eed\u3002<\/p>\n

    \u4e0b\u4e00\u7bc7\u6211\u4eec\u5c06\u62c6\u89e3 Hero\u2014\u2014\u5171\u4eab\u5143\u7d20\u8df3\u8f6c\u8fde\u7eed\u52a8\u753b\u3002<\/p>\n

    \u5982\u679c\u8fd9\u7bc7\u6587\u7ae0\u5bf9\u4f60\u6709\u5e2e\u52a9，\u6b22\u8fce\u70b9\u8d5e👍\u3001\u6536\u85cf\u2b50\u3001\u5173\u6ce8🔔，\u4f60\u7684\u652f\u6301\u662f\u6211\u6301\u7eed\u521b\u4f5c\u7684\u52a8\u529b！<\/p>\n

    \n

    \u76f8\u5173\u8d44\u6e90：<\/p>\n

      \n
    • \u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u9879\u76ee\u6e90\u7801：\u672c\u4ed3\u5e93 entry\/src\/main\/ets\/pages\/Index.ets<\/li>\n
    • ArkUI animation \u9690\u5f0f\u52a8\u753b\u5b98\u65b9\u6307\u5357<\/li>\n
    • Curve \u7f13\u52a8\u66f2\u7ebf\u5b98\u65b9\u6587\u6863<\/li>\n
    • HarmonyOS \u52a8\u753b\u6027\u80fd\u6700\u4f73\u5b9e\u8df5<\/li>\n
    • \u5f00\u6e90\u9e3f\u8499\u8de8\u5e73\u53f0\u793e\u533a<\/li>\n
    • HarmonyOS \u5f00\u53d1\u8005\u5b98\u65b9\u6587\u6863\u9996\u9875<\/li>\n
    • \u7cfb\u5217\u7d22\u5f15：\u672c\u4ed3\u5e93 articles\/INDEX.md<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      \u524d\u8a00
      \n\u4e0a\u4e00\u7bc7\u6211\u4eec\u7528 animateTo \u505a\u4e86\u300c\u4e3b\u52a8\u89e6\u53d1\u7279\u6548\u300d\u2014\u2014\u5f97\u5206\u5f39\u8df3\u3001\u5408\u5e76\u653e\u5927\u3002\u4f46\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d\u7528\u7684\u662f\u53e6\u4e00\u79cd\u52a8\u753b\u2014\u2014.animation({ duration: 100 })（\u7b2c 16\u300133 \u7bc7\u7528\u8fc7），\u6539 position \u81ea\u52a8\u8865\u95f4\u3002\u8fd9\u662f\u9690\u5f0f\u52a8\u753b：\u7ed9\u7ec4\u4ef6\u7ed1\u4e2a\u52a8\u753b\u53c2\u6570，\u4e4b\u540e\u4efb\u4f55\u5c5e\u6027\u53d8\u5316\u90fd\u81ea\u52a8\u8865\u95f4\u3002\u672c\u7bc7\u4e13\u8bb2 animation \u88c5\u9970\u5668\u7684\u673a\u5236\u548c\u5b9e\u6218\u3002
      \n\u672c\u7bc7\u4ee5\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d position<\/p>\n","protected":false},"author":2,"featured_media":86674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[280,1737],"topic":[],"class_list":["post-86676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-harmonyos","tag-1737"],"yoast_head":"\nHarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/86676.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u524d\u8a00 \u4e0a\u4e00\u7bc7\u6211\u4eec\u7528 animateTo \u505a\u4e86\u300c\u4e3b\u52a8\u89e6\u53d1\u7279\u6548\u300d\u2014\u2014\u5f97\u5206\u5f39\u8df3\u3001\u5408\u5e76\u653e\u5927\u3002\u4f46\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d\u7528\u7684\u662f\u53e6\u4e00\u79cd\u52a8\u753b\u2014\u2014.animation({ duration: 100 })（\u7b2c 16\u300133 \u7bc7\u7528\u8fc7），\u6539 position \u81ea\u52a8\u8865\u95f4\u3002\u8fd9\u662f\u9690\u5f0f\u52a8\u753b：\u7ed9\u7ec4\u4ef6\u7ed1\u4e2a\u52a8\u753b\u53c2\u6570，\u4e4b\u540e\u4efb\u4f55\u5c5e\u6027\u53d8\u5316\u90fd\u81ea\u52a8\u8865\u95f4\u3002\u672c\u7bc7\u4e13\u8bb2 animation \u88c5\u9970\u5668\u7684\u673a\u5236\u548c\u5b9e\u6218\u3002 \u672c\u7bc7\u4ee5\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d position\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/86676.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-28T17:16:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/07\/20260728171643-6a68e3fba2a1f.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/86676.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/86676.html\",\"name\":\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-07-28T17:16:47+00:00\",\"dateModified\":\"2026-07-28T17:16:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/86676.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/86676.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/86676.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/86676.html","og_locale":"zh_CN","og_type":"article","og_title":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u524d\u8a00 \u4e0a\u4e00\u7bc7\u6211\u4eec\u7528 animateTo \u505a\u4e86\u300c\u4e3b\u52a8\u89e6\u53d1\u7279\u6548\u300d\u2014\u2014\u5f97\u5206\u5f39\u8df3\u3001\u5408\u5e76\u653e\u5927\u3002\u4f46\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d\u7528\u7684\u662f\u53e6\u4e00\u79cd\u52a8\u753b\u2014\u2014.animation({ duration: 100 })（\u7b2c 16\u300133 \u7bc7\u7528\u8fc7），\u6539 position \u81ea\u52a8\u8865\u95f4\u3002\u8fd9\u662f\u9690\u5f0f\u52a8\u753b：\u7ed9\u7ec4\u4ef6\u7ed1\u4e2a\u52a8\u753b\u53c2\u6570，\u4e4b\u540e\u4efb\u4f55\u5c5e\u6027\u53d8\u5316\u90fd\u81ea\u52a8\u8865\u95f4\u3002\u672c\u7bc7\u4e13\u8bb2 animation \u88c5\u9970\u5668\u7684\u673a\u5236\u548c\u5b9e\u6218\u3002 \u672c\u7bc7\u4ee5\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u732b\u54aa\u4e0b\u843d position","og_url":"https:\/\/www.wsisp.com\/helps\/86676.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-07-28T17:16:47+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/07\/20260728171643-6a68e3fba2a1f.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/86676.html","url":"https:\/\/www.wsisp.com\/helps\/86676.html","name":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-07-28T17:16:47+00:00","dateModified":"2026-07-28T17:16:47+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/86676.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/86676.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/86676.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-animation \u88c5\u9970\u7ed1\u5b9a\u3001\u9690\u5f0f\u8865\u95f4\u673a\u5236\u3001\u4e0e animateTo \u7684\u53d6\u820d\u3001curve \u66f2\u7ebf\u9009"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/86676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=86676"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/86676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/86674"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=86676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=86676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=86676"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=86676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}