{"id":2368,"date":"2017-11-29T14:47:39","date_gmt":"2017-11-29T06:47:39","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=2368"},"modified":"2017-11-29T14:47:39","modified_gmt":"2017-11-29T06:47:39","slug":"animateplus-js-%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=2368","title":{"rendered":"animateplus.js \u6559\u7a0b"},"content":{"rendered":"

\n\tanimateplus<\/a>\uff08Animate Plus<\/font><\/font>\uff09\u662f\u4e00\u4e2a\u57fa\u4e8e\u73b0\u5728\u7684\u7f51\u7edc\u7684\u52a8\u753b\u6a21\u5757\u3002Animate Plus\u662f\u4e00\u4e2a\u4e13\u6ce8\u4e8e\u6027\u80fd\u548c\u521b\u4f5c\u7075\u6d3b\u6027\u7684JavaScript<\/a>\u52a8\u753b\u5e93\u3002\u5b83\u7684\u76ee\u6807\u662f\u63d0\u4f9b\u7a33\u5b9a\u768460 FPS\uff0c\u91cd\u91cf\u5c0f\u4e8e2 KB\uff08\u7f29\u5c0f\u548c\u538b\u7f29\uff09\uff0c\u4f7f\u5176\u7279\u522b\u9002\u5408\u79fb\u52a8\u8bbe\u5907\u3002\u672c\u6587\u5c06\u901a\u8fc7\u4e00\u4e2a\u4f8b\u5b50\u6765\u4ecb\u7ecd\u5b83\u7684\u7528\u6cd5\u3002\n<\/p>\n

\n\t\u5b89\u88c5
\n<\/h2>\n

\n\tanimateplus.js \u6709\u4e24\u79cd\u5b89\u88c5\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f\u57fa\u4e8enpm\u7684\u5b89\u88c5\u3002\n<\/p>\n

\r\nnpm install animateplus<\/pre>\n
\n\t\u8fd8\u6709\u4e00\u79cd\u5c31\u662f\u76f4\u63a5\u4e0b\u8f7d animateplus.js \u5728\u4f7f\u7528\u65f6\uff0c\u5f15\u5165\u5b83\u3002\n<\/p>\n
\n\t\u5165\u95e8\u4f8b\u5b50
\n<\/h2>\n
\n\t\u4e0b\u9762\u6211\u4eec\u770b\u4e00\u4e2a\u7b80\u5355\u7684\u5165\u95e8\u4f8b\u5b50\u3002\n<\/p>\n
\r\nimport animate from "\/animateplus.js";\r\n\/\/ \u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\nanimate({\r\n  elements: "div",\r\n  duration: 2000,\r\n  delay: index => index * 100,\r\n  transform: [\"scale(0)\", \"scale(1)\"]\r\n})\r\n.then(options => animate({\r\n  ...options,\r\n  transform: [\"translate(0%)\", \"translate(500%)\"]\r\n}));<\/pre>\n
\n\t\u8fd0\u884c\u8fd9\u4e2a\u4f8b\u5b50\u540e\u7684\u6548\u679c\uff0c\u53ef\u4ee5\u70b9\u6b64\u67e5\u770b<\/a>\u3002\n<\/p>\n
\n\t\u53c2\u6570\u89e3\u91ca
\n<\/h2>\n
\n\tanimate() \u65b9\u6cd5\u6709\u51e0\u4e2a\u91cd\u8981\u7684\u53c2\u6570\uff0c\u4e0b\u9762\u6211\u4eec\u4e00\u4e00\u4ecb\u7ecd\u4e00\u4e0b\u8fd9\u4e9b\u53c2\u6570\u7684\u4f5c\u7528\u3002\n<\/p>\n
\n\telements \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3anull\uff0c\u5b83\u7684\u503c\u53ef\u4ee5\u67094\u4e2d\u7c7b\u578b\uff0c\u5206\u522b\u662f\uff1a\u5b57\u7b26\u4e32| Element | NodeList | \u6570\u7ec4\u3002<\/font>\n<\/p>\n
\n\t\u786e\u5b9a\u8981\u52a8\u753b\u7684DOM\u5143\u7d20\u3002\u60a8\u53ef\u4ee5\u4f20\u9012\u4e00\u4e2aCSS\u9009\u62e9\u5668\u6216DOM\u5143\u7d20\u3002<\/font>\n<\/p>\n
\r\nanimate({\r\n  elements: document.body.children,\r\n  transform: [\"rotate(0turn)\", \"rotate(1turn)\"]\r\n});<\/pre>\n
\n\teasing \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3aout-elastic\uff0c\u53c2\u6570\u7c7b\u578b\u4e3a\u5b57\u7b26\u4e32\u3002\u5b83\u4e3b\u8981\u7684\u4f5c\u7528\u662f\u786e\u5b9a\u52a8\u753b\u7684\u52a0\u901f\u66f2\u7ebf\u3002\n<\/p>\n
\n\t\u4e3b\u8981\u7684\u53d6\u503c\u6709\u4e0b\u9762\u8868\u683c\u4e2d\u6240\u793a\uff1a\n<\/p>\n\n\n\n\n\n\n\n\n\n\n
\n\t\t\t\tconstant\n\t\t\t<\/th>\n\n\t\t\t\taccelerate\n\t\t\t<\/th>\n\n\t\t\t\tdecelerate\n\t\t\t<\/th>\n\n\t\t\t\taccelerate-decelerate\n\t\t\t<\/th>\n<\/tr>\n<\/thead>\n
\n\t\t\t\tlinear\n\t\t\t<\/td>\n\n\t\t\t\tin-cubic\n\t\t\t<\/td>\n\n\t\t\t\tout-cubic\n\t\t\t<\/td>\n\n\t\t\t\tin-out-cubic\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\t \n\t\t\t<\/td>\n\n\t\t\t\tin-quartic\n\t\t\t<\/td>\n\n\t\t\t\tout-quartic\n\t\t\t<\/td>\n\n\t\t\t\tin-out-quartic\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\t \n\t\t\t<\/td>\n\n\t\t\t\tin-quintic\n\t\t\t<\/td>\n\n\t\t\t\tout-quintic\n\t\t\t<\/td>\n\n\t\t\t\tin-out-quintic\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\t \n\t\t\t<\/td>\n\n\t\t\t\tin-exponential\n\t\t\t<\/td>\n\n\t\t\t\tout-exponential\n\t\t\t<\/td>\n\n\t\t\t\tin-out-exponential\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\t \n\t\t\t<\/td>\n\n\t\t\t\tin-circular\n\t\t\t<\/td>\n\n\t\t\t\tout-circular\n\t\t\t<\/td>\n\n\t\t\t\tin-out-circular\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\t \n\t\t\t<\/td>\n\n\t\t\t\tin-elastic\n\t\t\t<\/td>\n\n\t\t\t\tout-elastic\n\t\t\t<\/td>\n\n\t\t\t\tin-out-elastic\n\t\t\t<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n\t\u5f39\u6027\u7f13\u548c\u7684\u5e45\u5ea6\u548c\u5468\u671f\u53ef\u4ee5\u901a\u8fc7\u63d0\u4f9b\u7a7a\u95f4\u5206\u79bb\u503c\u6765\u914d\u7f6e\u3002\u632f\u5e45\u9ed8\u8ba4\u4e3a1\uff0c\u671f\u95f4\u52300.4\u3002\u4e0b\u9762\u4e3a\u4e00\u4e2a\u4f8b\u5b50\uff1a\n<\/p>\n
\r\nanimate({\r\n  elements: "span",\r\n  easing: "out-elastic 1.4 0.2",\r\n  transform: [\"translate(0px)\", \"translate(500px)\"]\r\n});<\/pre>\n
\n\tduration \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3a1000\uff0c\u53c2\u6570\u7c7b\u578b\u4e3a\u6570\u5b57\uff0c\u6216\u8005\u51fd\u6570\u3002Number | Function\u3002\n<\/p>\n
\n\t\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\u786e\u5b9a\u52a8\u753b\u7684\u6301\u7eed\u65f6\u95f4\u3002\u901a\u8fc7\u4f20\u9012\u4e00\u4e2a\u56de\u8c03\uff0c\u4f60\u53ef\u4ee5\u4e3a\u6bcf\u4e2a\u5143\u7d20\u5b9a\u4e49\u4e00\u4e2a\u4e0d\u540c\u7684\u6301\u7eed\u65f6\u95f4\u3002\u56de\u8c03\u51fd\u6570\u5c06\u6bcf\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u4f5c\u4e3a\u53c2\u6570\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u6570\u5b57\u3002\u4e0b\u9762\u4e3a\u4e00\u4e2a\u4f7f\u7528\u4f8b\u5b50\uff1a\n<\/p>\n
\r\nanimate({\r\n  elements: "span",\r\n  easing: "linear",\r\n  duration: index => (index + 1) * 1000,\r\n  opacity: [1, 0]\r\n});<\/pre>\n
\n\tdelay \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3a0\uff0c\u53c2\u6570\u7c7b\u578b\u4e3a\u6570\u5b57\uff0c\u6216\u8005\u51fd\u6570\u3002Number | Function\u3002\n<\/p>\n
\n\t\u786e\u5b9a\u52a8\u753b\u7684\u5ef6\u8fdf\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u901a\u8fc7\u4f20\u9012\u4e00\u4e2a\u56de\u8c03\uff0c\u4f60\u53ef\u4ee5\u4e3a\u6bcf\u4e2a\u5143\u7d20\u5b9a\u4e49\u4e00\u4e2a\u4e0d\u540c\u7684\u5ef6\u8fdf\u3002\u56de\u8c03\u51fd\u6570\u5c06\u6bcf\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u4f5c\u4e3a\u53c2\u6570\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u6570\u5b57\u3002\n<\/p>\n
\r\nanimate({\r\n  elements: "span",\r\n  easing: "linear",\r\n  delay: index => (index + 1) * 1000,\r\n  opacity: [1, 0]\r\n});<\/pre>\n
\n\tloop \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3afalse\uff0c\u53c2\u6570\u7c7b\u578b\u4e3aBoolean\u3002\u4e3b\u8981\u4f5c\u7528\u662f\u786e\u5b9a\u52a8\u753b\u662f\u5426\u5e94\u8be5\u91cd\u590d\u3002\n<\/p>\n
\n\tdirection \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3anormal\uff0c\u53c2\u6570\u7c7b\u578b\u4e3a\u5b57\u7b26\u4e32String\u3002\u786e\u5b9a\u52a8\u753b\u7684\u65b9\u5411\u3002reverse\u5411\u540e\u8fd0\u884c\u52a8\u753b\uff0calternate \u5982\u679c\u52a8\u753b\u5faa\u73af\uff0c\u5219\u5728\u6bcf\u6b21\u8fed\u4ee3\u4e4b\u540e\u5207\u6362\u65b9\u5411\u3002\n<\/p>\n
\n\tspeed \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3a1\uff0c\u53c2\u6570\u7c7b\u578b\u4e3aNumber\u3002\u786e\u5b9a\u52a8\u753b\u56de\u653e\u901f\u7387\u3002\u5728\u521b\u4f5c\u8fc7\u7a0b\u4e2d\u6709\u7528\uff0c\u53ef\u4ee5\u52a0\u5feb\u957f\u5e8f\u5217\u7684\u67d0\u4e9b\u90e8\u5206\uff08\u503c\u5927\u4e8e1\uff09\u6216\u51cf\u6162\u7279\u5b9a\u7684\u52a8\u753b\u4ee5\u89c2\u5bdf\uff08\u5c0f\u4e8e1\u7684\u503c\uff09\u3002\n<\/p>\n
\n\toptimize \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3afalse\uff0c\u53c2\u6570\u7c7b\u578b\u4e3aBoolean\u3002\u5982\u679c\u8bbe\u7f6e\u4e3a“\u52a8\u753b”\uff0c\u5219\u5f3a\u5236\u8fdb\u884c\u786c\u4ef6\u52a0\u901ftrue\u3002\u9664\u975e\u9047\u5230\u6027\u80fd\u95ee\u9898\uff0c\u5426\u5219\u5efa\u8bae\u4e0d\u8981\u4f7f\u7528\u786c\u4ef6\u52a0\u901f\uff0c\u5426\u5219\u53ef\u80fd\u4f1a\u4ea7\u751f\u6709\u5bb3\u7684\u526f\u4f5c\u7528\u3002\n<\/p>\n
\n\tchange \u53c2\u6570\u7684\u9ed8\u8ba4\u503c\u4e3anull\uff0c\u53c2\u6570\u7c7b\u578b\u4e3aFunction\u3002\u5b9a\u4e49\u5728\u52a8\u753b\u7684\u6bcf\u4e2a\u5e27\u4e0a\u8c03\u7528\u7684\u56de\u8c03\u51fd\u6570\u3002\u56de\u8c03\u4ee5\u52a8\u753b\u8fdb\u7a0b\uff080\u52301\u4e4b\u95f4\uff09\u4f5c\u4e3a\u53c2\u6570\uff0c\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\u800c\u4e0d\u53d7\u9650\u5236elements\u3002\n<\/p>\n
\r\nanimate({\r\n  duration: 5000,\r\n  easing: "linear",\r\n  change: progress =>\r\n    document.body.textContent = `${Math.round(progress * 100)}%`\r\n});<\/pre>\n
\n\tAnimations
\n<\/h2>\n
\n\tAnimate Plus\u53ef\u8ba9\u60a8\u4f7f\u7528\u5305\u542b\u5341\u516d\u8fdb\u5236\u989c\u8272\u7684\u6570\u5b57\u503c\u7684\u4efb\u4f55\u5c5e\u6027\u4e3aHTML\u548cSVG\u5143\u7d20\u8bbe\u7f6e\u52a8\u753b\u6548\u679c\u3002\n<\/p>\n
\r\nanimate({\r\n  elements: "circle",\r\n  r: [0, 50],\r\n  fill: [\"#80f\", \"#fc0\"]\r\n});<\/pre>\n
\n\t\u6bcf\u4e2a\u52a8\u753b\u5c5e\u6027\u90fd\u9700\u8981\u4e00\u4e2a\u5b9a\u4e49\u5f00\u59cb\u548c\u7ed3\u675f\u503c\u7684\u6570\u7ec4\u3002\u4e3a\u4e86\u65b9\u4fbf\u8d77\u89c1\uff0c\u60a8\u53ef\u4ee5\u7701\u7565\u9664\u6700\u7ec8\u503c\u4e2d\u7684\u6570\u5b57\u4e4b\u5916\u7684\u6240\u6709\u5185\u5bb9\u3002\n<\/p>\n
\r\nanimate({\r\n  elements: "span",\r\n  transform: [\"translate(0px)\", 100]\r\n});<\/pre>\n
\n\t\u8fd9\u4e9b\u6570\u7ec4\u53ef\u4ee5\u6709\u9009\u62e9\u5730\u7531\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\u8fd4\u56de\uff0c\u8be5\u56de\u8c03\u51fd\u6570\u91c7\u7528\u6bcf\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\uff0c\u5c31\u50cf\u6301\u7eed\u65f6\u95f4\u548c\u5ef6\u8fdf\u4e00\u6837\u3002\n<\/p>\n
\r\nanimate({\r\n  elements: "span",\r\n  transform: index => [\"translate(0px)\", (index + 1) * 100]\r\n});<\/pre>\n
\n\tPromise
\n<\/h2>\n
\n\tanimate()\u8fd4\u56de\u52a8\u753b\u5b8c\u6210\u540e\u89e3\u51b3\u7684\u627f\u8bfa\u3002\u627f\u8bfa\u89e3\u51b3\u4e86\u6700\u521d\u4f20\u9012\u7ed9\u7684\u5bf9\u8c61animate()\uff0c\u4f7f\u5f97\u52a8\u753b\u94fe\u63a5\u66f4\u76f4\u63a5\uff0c\u66f4\u65b9\u4fbf\u3002\u5728\u5165\u95e8\u90e8\u5206\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u4e2a\u57fa\u672c\u7684\u627f\u8bfa\u7684\u4f8b\u5b50\u3002\n<\/p>\n
\n\t\u7531\u4e8e\u52a8\u753b\u52a0\u4e0a\u4f9d\u8d56\u4e8e\u672c\u5730\u7684\u627f\u8bfa\uff0c\u4f60\u53ef\u4ee5\u4ece\u6240\u6709\u5e38\u89c1\u529f\u80fd\u627f\u8bfa\u63d0\u4f9b\uff0c\u5982\u53d7\u76caPromise.all\uff0cPromise.race\u4ee5\u53ca\u7279\u522b\u662fasync\/await\u4f7f\u52a8\u753b\u65f6\u95f4\u7ebf\u5bb9\u6613\u5efa\u7acb\u3002\n<\/p>\n
\r\nconst play = async () => {\r\n  const options = await animate({\r\n    elements: "span",\r\n    duration: 3000,\r\n    transform: [\"translateY(-100vh)\", 0]\r\n  });\r\n  await animate({\r\n    ...options,\r\n    transform: [\"rotate(0turn)\", 1]\r\n  });\r\n  await animate({\r\n    ...options,\r\n    duration: 800,\r\n    easing: "in-quintic",\r\n    transform: [\"scale(1)\", 0]\r\n  });\r\n};\r\n\/\/ \u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\nplay();<\/pre>\n
\n\t\u4e0a\u9762\u7684\u4ee3\u7801\u7684\u8fd0\u884c\u6548\u679c\uff0c\u53ef\u4ee5\u70b9\u6b64\u67e5\u770b<\/a>\u3002\n<\/p>\n
\n\t\u5e38\u7528\u65b9\u6cd5
\n<\/h2>\n
\n\tanimateplus \u5e38\u7528\u7684\u65b9\u6cd5\u6709\u4e24\u4e2a\uff0c\u5206\u522b\u662fstop() \u548c delay()\u3002\u5148\u770b\u4e00\u4e2a\u5173\u4e8e stop() \u7684\u4f8b\u5b50\u3002\n<\/p>\n
\r\nimport {stop} from "\/animateplus.js";\r\nanimate({\r\n  elements: "span",\r\n  easing: "linear",\r\n  duration: index => 8000 + index * 200,\r\n  loop: true,\r\n  transform: [\"rotate(0deg)\", 360]\r\n});\r\ndocument.addEventListener("click", ({target}) => stop(target));<\/pre>\n
\n\t\u4e0a\u9762\u4ee3\u7801\u7684\u8fd0\u884c\u6548\u679c\uff0c\u53ef\u4ee5\u70b9\u6b64\u67e5\u770b<\/a>\u3002 stop\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7684\u5143\u7d20\u4e0a\u7684\u52a8\u753b\u3002\n<\/p>\n
\n\tdelay \u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\u8bbe\u7f6e\u4e00\u4e2a\u8ba1\u65f6\u5668\u3002\u5b83setTimeout()\u901a\u8fc7\u56de\u62a5\u627f\u8bfa\u548c\u66f4\u52a0\u51c6\u786e\uff0c\u4e00\u81f4\u548c\u7535\u6c60\u53cb\u597d\u6765\u533a\u5206\u3002\u8be5\u5ef6\u8fdf\u9009\u9879\u5185\u90e8\u4f9d\u9760\u8fd9\u79cd\u65b9\u6cd5\u3002\n<\/p>\n
\r\nimport {delay} from "\/animateplus.js";\r\n\r\ndelay(500).then(time => console.log(`${time}ms elapsed`));<\/pre>\n
\n\t\u6d4f\u89c8\u5668\u652f\u6301
\n<\/h2>\n
\n\tAnimate Plus\u4f5c\u4e3a\u539f\u751fES2015\u6a21\u5757\u63d0\u4f9b\uff0c\u8fd9\u610f\u5473\u7740\u60a8\u53ef\u80fd\u9700\u8981\u6839\u636e\u60a8\u7684\u6d4f\u89c8\u5668\u652f\u6301\u7b56\u7565\u8fdb\u884c\u4f20\u8f93\u3002\u8be5\u5e93\u7684\u5de5\u4f5c\u539f\u7406<script type=module>\u4e0e\u4ee5\u4e0b\u6d4f\u89c8\u5668\u4e00\u6837\uff1a\n<\/p>\n