{"id":30915,"date":"2024-11-25T10:20:50","date_gmt":"2024-11-25T02:20:50","guid":{"rendered":"https:\/\/fwq.ai\/blog\/30915\/"},"modified":"2024-11-25T10:20:50","modified_gmt":"2024-11-25T02:20:50","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91animation%e5%bf%83%e8%b7%b3%e7%9a%84%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c%e4%bb%a3%e7%a0%81%e5%ae%9e%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/30915\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u7684\u52a8\u753b\u6548\u679c\u4ee3\u7801\u5b9e\u4f8b\u8be6\u89e3"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b\u6548\u679c\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/p>\n

\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b<\/p>\n

1\u3001\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b<\/strong><\/p>\n

wxml\u6587\u4ef6\u4e2d\uff1a<\/p>\n

<\/p>\n

<view> \r\n  <view> \r\n   <view> \r\n   <!-- \u5fc3\u8df3 --> \r\n   <view> \r\n    <image><\/image> \r\n   <\/view> \r\n   <!-- \u6295\u7968\u6587\u5b57 --> \r\n   <view>\u6295\u7968<\/view> \r\n   <\/view> \r\n  <\/view> \r\n <\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
js\u6587\u4ef6\u4e2d\uff1a<\/p>\n
<\/p>\n
\/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210 \r\n onReady: function () { \r\n  var circleCount = 0; \r\n  \/\/ \u5fc3\u8df3\u7684\u5916\u6846\u52a8\u753b \r\n  this.animationMiddleHeaderItem = wx.createAnimation({ \r\n  duration:1000, \/\/ \u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d \r\n  \/** \r\n  * http:\/\/cubic-bezier.com\/#0,0,.58,1 \r\n  * linear \u52a8\u753b\u4e00\u76f4\u8f83\u4e3a\u5747\u5300 \r\n  * ease \u4ece\u5300\u901f\u5230\u52a0\u901f\u5728\u5230\u5300\u901f \r\n  * ease-in \u7f13\u6162\u5230\u5300\u901f \r\n  * ease-in-out \u4ece\u7f13\u6162\u5230\u5300\u901f\u518d\u5230\u7f13\u6162 \r\n  * \r\n  * http:\/\/www.tuicool.com\/articles\/neqMVr \r\n  * step-start \u52a8\u753b\u4e00\u5f00\u59cb\u5c31\u8df3\u5230 100% \u76f4\u5230\u52a8\u753b\u6301\u7eed\u65f6\u95f4\u7ed3\u675f \u4e00\u95ea\u800c\u8fc7 \r\n  * step-end \u4fdd\u6301 0% \u7684\u6837\u5f0f\u76f4\u5230\u52a8\u753b\u6301\u7eed\u65f6\u95f4\u7ed3\u675f  \u4e00\u95ea\u800c\u8fc7 \r\n  *\/ \r\n  timingFunction: 'linear', \r\n  delay: 100, \r\n  transformOrigin: '50% 50%', \r\n  success: function (res) { \r\n  } \r\n  }); \r\n  setInterval(function() { \r\n  if (circleCount % 2 == 0) { \r\n   this.animationMiddleHeaderItem.scale(1.15).step(); \r\n  } else { \r\n   this.animationMiddleHeaderItem.scale(1.0).step(); \r\n  } \r\n  this.setData({ \r\n   animationMiddleHeaderItem: this.animationMiddleHeaderItem.export() \r\n  }); \r\n  circleCount++; \r\n  if (circleCount == 1000) { \r\n   circleCount = 0; \r\n  } \r\n  }.bind(this), 1000); \r\n },<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
2\u3001\u5fae\u4fe1\u663e\u793a\u5012\u8ba1\u65f6<\/strong><\/p>\n
wxml\u6587\u4ef6\u4e2d\uff1a<\/p>\n
<\/p>\n
<!--\u5012\u8ba1\u65f6 --> \r\n <view> \r\n <view>{{countDownDay}}\u5929<\/view> \r\n <view>{{countDownHour}}\u65f6<\/view> \r\n <view>{{countDownMinute}}\u5206<\/view> \r\n <view>{{countDownSecond}}\u79d2<\/view> \r\n <\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
js\u6587\u4ef6\u4e2d\uff1a<\/p>\n
<\/p>\n
Page( { \r\n data: { \r\n windowHeight: 654, \r\n maxtime: \"\", \r\n isHiddenLoading: true, \r\n isHiddenToast: true, \r\n dataList: {}, \r\n countDownDay: 0, \r\n countDownHour: 0, \r\n countDownMinute: 0, \r\n countDownSecond: 0, \r\n }, \r\n \/\/\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 \r\n bindViewTap: function() { \r\n wx.navigateTo( { \r\n  url: '..\/logs\/logs' \r\n }) \r\n }, \r\n onLoad: function() { \r\n this.setData( { \r\n  windowHeight: wx.getStorageSync( 'windowHeight' ) \r\n }); \r\n }, \r\n \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210\u540e \u8c03\u7528 \r\n onReady: function () { \r\n var totalSecond = 1505540080 - Date.parse(new Date())\/1000; \r\n var interval = setInterval(function () { \r\n  \/\/ \u79d2\u6570 \r\n  var second = totalSecond; \r\n  \/\/ \u5929\u6570\u4f4d \r\n  var day = Math.floor(second \/ 3600 \/ 24); \r\n  var dayStr = day.toString(); \r\n  if (dayStr.length == 1) dayStr = '0' + dayStr; \r\n  \/\/ \u5c0f\u65f6\u4f4d \r\n  var hr = Math.floor((second - day * 3600 * 24) \/ 3600); \r\n  var hrStr = hr.toString(); \r\n  if (hrStr.length == 1) hrStr = '0' + hrStr; \r\n  \/\/ \u5206\u949f\u4f4d \r\n  var min = Math.floor((second - day * 3600 *24 - hr * 3600) \/ 60); \r\n  var minStr = min.toString(); \r\n  if (minStr.length == 1) minStr = '0' + minStr; \r\n  \/\/ \u79d2\u4f4d \r\n  var sec = second - day * 3600 * 24 - hr * 3600 - min*60; \r\n  var secStr = sec.toString(); \r\n  if (secStr.length == 1) secStr = '0' + secStr; \r\n  this.setData({ \r\n  countDownDay: dayStr, \r\n  countDownHour: hrStr, \r\n  countDownMinute: minStr, \r\n  countDownSecond: secStr, \r\n  }); \r\n  totalSecond--; \r\n  if (totalSecond <p style=\"text-align: left\">\u6548\u679c\u56fe\uff1a<\/p><p style=\"text-align: center;\"><img id=\"theimg\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/194\/bd45c618a9fd79293f570fad26b13f92-0.jpg\" alt=\"\"><\/p><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u7684\u52a8\u753b\u6548\u679c\u4ee3\u7801\u5b9e\u4f8b\u8be6\u89e3\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\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b\u6548\u679c\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b \u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b 1\u3001\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1animation\u5fc3\u8df3\u52a8\u753b wxml\u6587\u4ef6\u4e2d\uff1a <view>    <view>     <view>     <!– \u5fc3\u8df3 –>     <view>      <image><\/image>     <\/view>     <!– \u6295\u7968\u6587\u5b57 –>     <view>\u6295\u7968<\/view>     <\/view>    <\/view>   <\/view> \u767b\u5f55\u540e\u590d\u5236 js\u6587\u4ef6\u4e2d\uff1a \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210   onReady: function () {    var circleCount = 0;    \/\/ \u5fc3\u8df3\u7684\u5916\u6846\u52a8\u753b    this.animationMiddleHeaderItem = wx.createAnimation({    duration:1000, \/\/ \u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d    \/**    * http:\/\/cubic-bezier.com\/#0,0,.58,1    * linear \u52a8\u753b\u4e00\u76f4\u8f83\u4e3a\u5747\u5300    * ease \u4ece\u5300\u901f\u5230\u52a0\u901f\u5728\u5230\u5300\u901f    * ease-in \u7f13\u6162\u5230\u5300\u901f    * ease-in-out \u4ece\u7f13\u6162\u5230\u5300\u901f\u518d\u5230\u7f13\u6162    *    * http:\/\/www.tuicool.com\/articles\/neqMVr    * step-start \u52a8\u753b\u4e00\u5f00\u59cb\u5c31\u8df3\u5230 100% \u76f4\u5230\u52a8\u753b\u6301\u7eed\u65f6\u95f4\u7ed3\u675f \u4e00\u95ea\u800c\u8fc7    * step-end \u4fdd\u6301 0% \u7684\u6837\u5f0f\u76f4\u5230\u52a8\u753b\u6301\u7eed\u65f6\u95f4\u7ed3\u675f  \u4e00\u95ea\u800c\u8fc7    *\/    timingFunction: ‘linear’,    delay: 100,    transformOrigin: ‘50% 50%’,    success: function (res) {    }    });    setInterval(function() {    if (circleCount % 2 == 0) {     this.animationMiddleHeaderItem.scale(1.15).step();    } else {     this.animationMiddleHeaderItem.scale(1.0).step();    }    this.setData({     animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()    });    circleCount++;  […]<\/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-30915","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30915","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=30915"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30915\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}