{"id":31699,"date":"2024-11-25T12:05:30","date_gmt":"2024-11-25T04:05:30","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31699\/"},"modified":"2024-11-25T12:05:30","modified_gmt":"2024-11-25T04:05:30","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b9%8banimation%e5%be%aa%e7%8e%af%e5%8a%a8%e7%94%bb%e5%ae%9e%e7%8e%b0%e8%ae%a9%e4%ba%91%e6%9c%b5%e9%a3%98%e7%9a%84%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31699\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u8ba9\u4e91\u6735\u98d8\u7684\u6548\u679c"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u7684\u8ba9\u4e91\u6735\u98d8\u6548\u679c,\u7ed3\u5408\u5b9e\u4f8b\u5f62\u5f0f\u5206\u6790\u4e86animation\u7ed3\u5408js\u65f6\u95f4\u51fd\u6570\u5b9e\u73b0\u5faa\u73af\u52a8\u753b\u6548\u679c\u7684\u5177\u4f53\u6b65\u9aa4\u4e0e\u76f8\u5173\u64cd\u4f5c\u6280\u5de7,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/p>\n

\u672c\u6587\u5b9e\u4f8b\u8bb2\u8ff0\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u7684\u8ba9\u4e91\u6735\u98d8\u6548\u679c\u3002\u5206\u4eab\u7ed9\u5927\u5bb6\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5982\u4e0b\uff1a<\/p>\n

\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u4e86\u5b9e\u73b0\u52a8\u753b\u7684api\u2014\u2014animation\uff0c\u4f46\u5374\u4e0d\u80fd\u5faa\u73af\u64ad\u653e\uff0c\u90fd\u662f\u4e00\u6b21\u6027\u7684\uff0c\u52a8\u5b8c\u5c31Over\u4e86\uff0c\u4e0b\u9762\u63d0\u4f9b\u4e00\u4e2a\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684animation\u6765\u5b9e\u73b0\u5faa\u73af\u52a8\u753b\u7684\u73a9\u5177\uff0c\u629b\u7816\u5f15\u7389\uff0c\u5e0c\u671b\u5927\u5bb6\u80fd\u60f3\u51fa\u66f4\u597d\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u771f\u6b63\u7684\u5faa\u73af\u3002\u8bf4\u662f\u73a9\u5177\u662f\u56e0\u4e3a\u8fd9\u4e2a\u5faa\u73af\u52a8\u753b\u901a\u8fc7js\u811a\u672c\u7684setInterval\u6765\u5b9e\u73b0\u7684\uff0c\u4f46’setInterval’\u5728\u5b9e\u9645\u8fd0\u884c\u4e2d\u4f1a\u51fa\u73b0\u8d8a\u6765\u8d8a\u4e25\u91cd\u7684\u5ef6\u8fdf\uff0c\u8fd9\u662f\u7531\u4e8ejs\u7684\u5355\u7ebf\u7a0b\u8fd0\u884c\u6a21\u5f0f\u6240\u51b3\u5b9a\u7684\uff08\u5177\u4f53\u53ef\u4ee5\u641c\u672c\u5173\u8d44\u6599\u770b\uff09\uff0c\u6240\u4ee5\u52a8\u753b\u95f4\u9699\u5e76\u4e0d\u662f\u90a3\u4e48\u6d41\u7545\uff0c\u6240\u4ee5\u5148\u73a9\u73a9\u5427\uff0c\u8ba9\u6211\u4eec\u6765\u5b9e\u73b0\u8ba9\u4e91\u6735\u98d8\u2026\u2026<\/p>\n

\u622a\u56fe\u5982\u4e0b\uff1a<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u8ba9\u4e91\u6735\u98d8\u7684\u6548\u679c\u63d2\u56fe\"<\/p>\n

\u5b9e\u73b0\u4ee3\u7801\uff1a<\/p>\n

index.wxml<\/p>\n<\/p>\n

<view>\n   <image><\/image>\n  <\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
index.js<\/p>\n<\/p>\n
onReady: function () {\n  \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210\n  \/\/ \u5b9e\u4f8b\u5316\u4e00\u4e2a\u52a8\u753b\n  var that = this;\n  var i = 0\n  var ii = 0\n  var animationData = wx.createAnimation({\n   duration: 1000, \/\/ \u9ed8\u8ba4\u4e3a400   \u52a8\u753b\u6301\u7eed\u65f6\u95f4\uff0c\u5355\u4f4dms\n   timingFunction: 'ease-in-out',\n   \/\/transformOrigin: '4px 91px'\n  });\n  var animationCloudData = wx.createAnimation({\n   duration: 1000, \/\/ \u9ed8\u8ba4\u4e3a400   \u52a8\u753b\u6301\u7eed\u65f6\u95f4\uff0c\u5355\u4f4dms\n   timingFunction: 'ease-in-out',\n   \/\/transformOrigin: '4px 91px'\n  });\n  \/\/ \u987a\u5e8f\u6267\u884c\uff0c\u5f53\u5df2\u7ecf\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u4ee3\u7801\u5c31\u4f1a\u5f00\u542f\u5b9a\u65f6\u5668\n  \/\/ \u5faa\u73af\u6267\u884c\u4ee3\u7801\n  \/\/dotAnFun = setInterval(function () {});  \n  \/*setInterval(function () {\n   \/\/ \u52a8\u753b\u811a\u672c\u5b9a\u4e49\n   \/\/animationData.rotate(6 * (++i)).step()\n   \/\/animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();\n   animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });\n   \/\/ \u66f4\u65b0\u6570\u636e\n   that.setData({\n    \/\/ \u5bfc\u51fa\u52a8\u753b\u793a\u4f8b\n    animationData: animationData.export(),\n    \/\/animationCloudData: animationCloudData.export(),    \n   })\n   ++i;\n   console.log(i);\n  }.bind(that), 2000);\/\/\u5faa\u73af\u65f6\u95f4 \u8fd9\u91cc1000\u662f1\u79d2\n  *\/\n  \/\/\u52a8\u753b\u7684\u811a\u672c\u5b9a\u4e49\u5fc5\u987b\u6bcf\u6b21\u90fd\u91cd\u65b0\u751f\u6210\uff0c\u4e0d\u80fd\u653e\u5728\u5faa\u73af\u5916\n  animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });\n  \/\/ \u66f4\u65b0\u6570\u636e\n  that.setData({\n   \/\/ \u5bfc\u51fa\u52a8\u753b\u793a\u4f8b\n   \/\/animationData: animationData.export(),\n   animationCloudData: animationCloudData.export(),\n  })\n  setInterval(function () {\n   \/\/\u52a8\u753b\u7684\u811a\u672c\u5b9a\u4e49\u5fc5\u987b\u6bcf\u6b21\u90fd\u91cd\u65b0\u751f\u6210\uff0c\u4e0d\u80fd\u653e\u5728\u5faa\u73af\u5916\n   animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });\n   \/\/ \u66f4\u65b0\u6570\u636e\n   that.setData({\n    \/\/ \u5bfc\u51fa\u52a8\u753b\u793a\u4f8b\n    \/\/animationData: animationData.export(),\n    animationCloudData: animationCloudData.export(),\n   })\n   ++ii;\n   console.log(ii);\n  }.bind(that),10000);\/\/3000\u8fd9\u91cc\u7684\u8bbe\u7f6e\u5982\u679c\u5c0f\u4e8e\u52a8\u753bstep\u7684\u6301\u7eed\u65f6\u95f4\u7684\u8bdd\u4f1a\u5bfc\u81f4\u6267\u884c\u4e00\u534a\u540e\u51fa\u9519\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
index.wxss<\/p>\n<\/p>\n
.clouds{\n margin-top:320rpx; \n}\n.yun1{\n width:320rpx;\n height: 120rpx;\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u9644\uff1a\u53c2\u8003\u5907\u7528\uff1a<\/p>\n<\/p>\n
\/*\n  var that = this;\n  \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210\n  \/\/\u5b9e\u4f8b\u5316\u4e00\u4e2a\u52a8\u753b\n  var animation = wx.createAnimation({\n   duration: 1000,\n   timingFunction: 'ease',\n  })\n  this.animation = animation\n  animation.scale(2, 2).rotate(45).step().scale(1,1).step();\n  \/\/\u5bfc\u51fa\u52a8\u753b\n  this.setData({\n   animationData: animation.export()\n  })\n  var i = 0;\n  \/\/ \u987a\u5e8f\u6267\u884c\uff0c\u5f53\u5df2\u7ecf\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u4ee3\u7801\u5c31\u4f1a\u5f00\u542f\u5b9a\u65f6\u5668\n  \/*setTimeout(function () {\n   that.setData({\n    animationData: animation.export()\n   });\n   i++;\n   console.log(i);\n  }, 1000);*\/\n  \/*setInterval(function () {\n   \/\/\u5faa\u73af\u6267\u884c\u4ee3\u7801 \n    that.setData({\n     animationData: animation.export()\n    });\n   i++;\n   console.log(i); \n  }, 1000) \/\/\u5faa\u73af\u65f6\u95f4 \u8fd9\u91cc\u662f1\u79d2  \n }*\/<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\uff0c\u66f4\u591a\u76f8\u5173\u5185\u5bb9\u8bf7\u5173\u6ce8PHP\u4e2d\u6587\u7f51\uff01<\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n
<\/p>\n
<\/p>\n<\/p>\n
<\/span><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u8ba9\u4e91\u6735\u98d8\u7684\u6548\u679c\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u7684\u8ba9\u4e91\u6735\u98d8\u6548\u679c,\u7ed3\u5408\u5b9e\u4f8b\u5f62\u5f0f\u5206\u6790\u4e86animation\u7ed3\u5408js\u65f6\u95f4\u51fd\u6570\u5b9e\u73b0\u5faa\u73af\u52a8\u753b\u6548\u679c\u7684\u5177\u4f53\u6b65\u9aa4\u4e0e\u76f8\u5173\u64cd\u4f5c\u6280\u5de7,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b \u672c\u6587\u5b9e\u4f8b\u8bb2\u8ff0\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4banimation\u5faa\u73af\u52a8\u753b\u5b9e\u73b0\u7684\u8ba9\u4e91\u6735\u98d8\u6548\u679c\u3002\u5206\u4eab\u7ed9\u5927\u5bb6\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5982\u4e0b\uff1a \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u4e86\u5b9e\u73b0\u52a8\u753b\u7684api\u2014\u2014animation\uff0c\u4f46\u5374\u4e0d\u80fd\u5faa\u73af\u64ad\u653e\uff0c\u90fd\u662f\u4e00\u6b21\u6027\u7684\uff0c\u52a8\u5b8c\u5c31Over\u4e86\uff0c\u4e0b\u9762\u63d0\u4f9b\u4e00\u4e2a\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684animation\u6765\u5b9e\u73b0\u5faa\u73af\u52a8\u753b\u7684\u73a9\u5177\uff0c\u629b\u7816\u5f15\u7389\uff0c\u5e0c\u671b\u5927\u5bb6\u80fd\u60f3\u51fa\u66f4\u597d\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u771f\u6b63\u7684\u5faa\u73af\u3002\u8bf4\u662f\u73a9\u5177\u662f\u56e0\u4e3a\u8fd9\u4e2a\u5faa\u73af\u52a8\u753b\u901a\u8fc7js\u811a\u672c\u7684setInterval\u6765\u5b9e\u73b0\u7684\uff0c\u4f46’setInterval’\u5728\u5b9e\u9645\u8fd0\u884c\u4e2d\u4f1a\u51fa\u73b0\u8d8a\u6765\u8d8a\u4e25\u91cd\u7684\u5ef6\u8fdf\uff0c\u8fd9\u662f\u7531\u4e8ejs\u7684\u5355\u7ebf\u7a0b\u8fd0\u884c\u6a21\u5f0f\u6240\u51b3\u5b9a\u7684\uff08\u5177\u4f53\u53ef\u4ee5\u641c\u672c\u5173\u8d44\u6599\u770b\uff09\uff0c\u6240\u4ee5\u52a8\u753b\u95f4\u9699\u5e76\u4e0d\u662f\u90a3\u4e48\u6d41\u7545\uff0c\u6240\u4ee5\u5148\u73a9\u73a9\u5427\uff0c\u8ba9\u6211\u4eec\u6765\u5b9e\u73b0\u8ba9\u4e91\u6735\u98d8\u2026\u2026 \u622a\u56fe\u5982\u4e0b\uff1a \u5b9e\u73b0\u4ee3\u7801\uff1a index.wxml <view>    <image><\/image>   <\/view> \u767b\u5f55\u540e\u590d\u5236 index.js onReady: function () {   \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210   \/\/ \u5b9e\u4f8b\u5316\u4e00\u4e2a\u52a8\u753b   var that = this;   var i = 0   var ii = 0   var animationData = wx.createAnimation({    duration: 1000, \/\/ \u9ed8\u8ba4\u4e3a400   \u52a8\u753b\u6301\u7eed\u65f6\u95f4\uff0c\u5355\u4f4dms    timingFunction: ‘ease-in-out’,    \/\/transformOrigin: ‘4px 91px’   });   var animationCloudData = wx.createAnimation({    duration: 1000, \/\/ \u9ed8\u8ba4\u4e3a400   \u52a8\u753b\u6301\u7eed\u65f6\u95f4\uff0c\u5355\u4f4dms    timingFunction: ‘ease-in-out’,    \/\/transformOrigin: ‘4px 91px’   });   \/\/ \u987a\u5e8f\u6267\u884c\uff0c\u5f53\u5df2\u7ecf\u6267\u884c\u5b8c\u4e0a\u9762\u7684\u4ee3\u7801\u5c31\u4f1a\u5f00\u542f\u5b9a\u65f6\u5668   \/\/ \u5faa\u73af\u6267\u884c\u4ee3\u7801   \/\/dotAnFun = setInterval(function () {});     \/*setInterval(function () {    \/\/ \u52a8\u753b\u811a\u672c\u5b9a\u4e49    \/\/animationData.rotate(6 * (++i)).step()    \/\/animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();    animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });    \/\/ \u66f4\u65b0\u6570\u636e    that.setData({     \/\/ \u5bfc\u51fa\u52a8\u753b\u793a\u4f8b     animationData: animationData.export(),     \/\/animationCloudData: animationCloudData.export(),        })    ++i;    console.log(i);   }.bind(that), 2000);\/\/\u5faa\u73af\u65f6\u95f4 \u8fd9\u91cc1000\u662f1\u79d2   *\/   \/\/\u52a8\u753b\u7684\u811a\u672c\u5b9a\u4e49\u5fc5\u987b\u6bcf\u6b21\u90fd\u91cd\u65b0\u751f\u6210\uff0c\u4e0d\u80fd\u653e\u5728\u5faa\u73af\u5916   animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });   \/\/ \u66f4\u65b0\u6570\u636e   that.setData({    \/\/ \u5bfc\u51fa\u52a8\u753b\u793a\u4f8b    \/\/animationData: animationData.export(),    animationCloudData: animationCloudData.export(),   })   setInterval(function () {    \/\/\u52a8\u753b\u7684\u811a\u672c\u5b9a\u4e49\u5fc5\u987b\u6bcf\u6b21\u90fd\u91cd\u65b0\u751f\u6210\uff0c\u4e0d\u80fd\u653e\u5728\u5faa\u73af\u5916 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-31699","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=31699"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31699\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}