{"id":443122,"date":"2024-12-26T05:20:12","date_gmt":"2024-12-26T05:20:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443122"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443122","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: CSS, WebP, Canvas, Lottie, Spine \u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a9\/99f\/1b3\/1a999f1b3fb3866362ff55379097b6f0.png\" width=\"2438\" height=\"1369\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a9\/99f\/1b3\/1a999f1b3fb3866362ff55379097b6f0.png\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0430\u0448\u0430, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0434\u0435\u043b\u0430 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u00a0<a href=\"https:\/\/kts.tech\/\">KTS<\/a>.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u0435 \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u044f\u0440\u043a\u0438\u0445 \u0438 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0443\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u044f \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#CSS\">CSS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#SVG\">SVG<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#WebP\">WebP<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Canvas\">Canvas<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Lottie\">Lottie<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Spine\">Spine<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B5%D0%BA%D0%B2%D0%B5%D0%BD%D1%86%D0%B8%D1%8F\">\u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"CSS\" id=\"CSS\"><\/a><\/p>\n<h2>CSS<\/h2>\n<p>CSS \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043e\u043b\u0435\u0435 \u201c\u0436\u0438\u0432\u044b\u043c\u201d: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0444\u043e\u043a\u0443\u0441\u0435 \u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u0432\u044b\u0441\u043e\u043a\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0438\u0434\u0435\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0439.<\/p>\n<p>\u041f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0442\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043f\u0440\u043e \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/819757\/\">\u0441\u0442\u0430\u0442\u044c\u044e \u043c\u043e\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u0433\u0438 \u041a\u0440\u0438\u0441\u0442\u0438\u043d\u044b<\/a>.<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438, \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS, \u0438 \u043d\u0430 \u044d\u0442\u043e \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h3>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0430\u043a\u043e\u0439 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d851c1a6b1bc82ae8\" data-style=\"\" id=\"6755ea7d851c1a6b1bc82ae8\" width=\"\"><\/div>\n<p>\u0422\u0430\u043a\u0436\u0435 CSS \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0417\u0434\u0435\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u0449\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u0441\u0430 \u041f\u0435\u043b\u044c\u043c\u0435\u043d\u044f:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dca01a46b4cc2082a\" data-style=\"\" id=\"6755ea7dca01a46b4cc2082a\" width=\"\"><\/div>\n<p>\u0415\u0449\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 CSS \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0438\u0433\u0440\u0435 &#171;\u041c\u0435\u043c\u043e\u0440\u0438 \u0421\u043c\u0435\u0448\u0430\u0440\u0438\u043a\u0438&#187;:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d08571a136e0b173c\" data-style=\"\" id=\"6755ea7d08571a136e0b173c\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"SVG\" id=\"SVG\"><\/a><\/p>\n<h2>SVG<\/h2>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, SVG \u2013 \u044d\u0442\u043e \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432, \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u043e\u0440\u043c). \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430:<\/p>\n<ul>\n<li>\n<p>CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0439 SVG-\u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>@keyframes<\/strong> \u0438 <strong>animation<\/strong>. \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u043d\u043e\u0433\u0434\u0430 SVG \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434, \u0438 \u043d\u0435 \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS \u043d\u0435 \u043e\u0431\u043e\u0439\u0434\u0435\u0448\u044c\u0441\u044f. \u0422\u0443\u0442 \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f SMIL (Synchronized Multimedia Integration Language).<\/p>\n<p>\u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 CSS, SMIL \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412\u0441\u0435-\u0442\u0430\u043a\u0438 CSS \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG, \u043b\u0443\u0447\u0448\u0435 \u0442\u0430\u043a \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0412 \u043a\u0430\u043a\u0438\u0445 \u0436\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f SMIL? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f CSS;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (SMIL \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c);<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG \u0447\u0435\u0440\u0435\u0437 SMIL<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0435\u0433 <code>&lt;animate \/&gt;<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"300\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt; &lt;circle cx=\"100\" cy=\"100\" r=\"15\" width=\"200\" height=\"200\" fill=\"red\"&gt; &lt;animate attributeName=\"r\" from=\"15\" to=\"50\" dur=\"3s\" repeatCount=\"indefinite\" \/&gt; &lt;\/circle&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dfbab546b0d4e5cd2\" data-style=\"\" id=\"6755ea7dfbab546b0d4e5cd2\" width=\"\"><\/div>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;animateTransform \/&gt;<\/code> \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f (translate), \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (scale), \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f (rotate) \u0438 \u043d\u0430\u043a\u043b\u043e\u043d\u044b (skewX \u0438 skewY).<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;         &lt;rect x=\"50\" y=\"50\" width=\"100\" height=\"100\" fill=\"green\"&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"rotate\"             from=\"0 100 100\"             to=\"360 100 100\"             dur=\"5s\"             repeatCount=\"indefinite\"           \/&gt;         &lt;\/rect&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<p>\u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dcd4392135895c225\" data-style=\"\" id=\"6755ea7dcd4392135895c225\" width=\"\"><\/div>\n<p>\u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0438 \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS. \u041e\u0434\u043d\u0430\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 SMIL \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0435\u0433 <code>animateTransform<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>additive=\u201dsum\u201d<\/code>. \u0422\u043e\u0433\u0434\u0430 \u0434\u0432\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043b\u043e\u0436\u0430\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;         &lt;rect x=\"50\" y=\"50\" width=\"100\" height=\"100\" fill=\"green\"&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"rotate\"             from=\"0 100 100\"             to=\"360 100 100\"             dur=\"5s\"             repeatCount=\"indefinite\"           \/&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"scale\"             values=\"0.5; 1; 0.5\"             keyTimes=\"0; 0.5; 1\"             dur=\"4s\"             repeatCount=\"indefinite\"             additive='sum'           \/&gt;         &lt;\/rect&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d5558e1137e55eeb1\" data-style=\"\" id=\"6755ea7d5558e1137e55eeb1\" width=\"\"><\/div>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u0442\u0435\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c: \u201c\u0427\u0442\u043e \u0436\u0435 \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u2013 \u043d\u0435\u0442?\u201d. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>additive=\u201dsum\u201d<\/code> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 (\u043e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 scale) \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0435\u0433\u043e \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u0447\u0442\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0443\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0422\u0435\u0433 <code>&lt;animateMotion \/&gt;<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0437\u044c\u043c\u0435\u043c SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;svg         width=\"300\"         height=\"300\"         viewBox=\"0 0 64 64\"         fill=\"none\"         xmlns=\"http:\/\/www.w3.org\/2000\/svg\"       &gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894 17.7573L46.1708 20.3944C45.832 21.072 45.1395 21.5 44.382 21.5H42C40.8954 21.5 40 20.6046 40 19.5V17.8028L38 20.8028V24.5C38 25.6046 37.1046 26.5 36 26.5H15.5C14.3954 26.5 13.5 25.6046 13.5 24.5V13Z\"           fill=\"white\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M55.49 24.3586C55.5681 24.9053 55.1882 25.4118 54.6414 25.4899L47.6414 26.4899C47.0947 26.5681 46.5882 26.1882 46.5101 25.6414C46.4319 25.0947 46.8118 24.5882 47.3586 24.51L54.3586 23.51C54.9053 23.4319 55.4118 23.8118 55.49 24.3586ZM47 28C47 27.4477 47.4477 27 48 27H54.5C55.0523 27 55.5 27.4477 55.5 28C55.5 28.5523 55.0523 29 54.5 29H48C47.4477 29 47 28.5523 47 28Z\"           fill=\"white\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M34.51 24.3586C34.4319 24.9053 34.8118 25.4118 35.3586 25.4899L42.3586 26.4899C42.9053 26.5681 43.4118 26.1882 43.4899 25.6414C43.5681 25.0947 43.1882 24.5882 42.6414 24.51L35.6414 23.51C35.0947 23.4319 34.5882 23.8118 34.51 24.3586ZM43 28C43 27.4477 42.5523 27 42 27H35.5C34.9477 27 34.5 27.4477 34.5 28C34.5 28.5523 34.9477 29 35.5 29H42C42.5523 29 43 28.5523 43 28Z\"           fill=\"white\"         \/&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bf6\/ecb\/c93\/bf6ecbc9327fb083cd734b69b8d20928.png\" width=\"614\" height=\"606\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bf6\/ecb\/c93\/bf6ecbc9327fb083cd734b69b8d20928.png\"\/><\/figure>\n<p>\u041a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0442\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0442\u0435\u0433 <code>&lt;circle&gt;&lt;\/circle&gt;<\/code> \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c <code>animateMotion<\/code> \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0432 \u0442\u0435\u0433 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>mpath<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <code>path<\/code> \u2013 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">&lt;circle cx=\"0\" cy=\"0\" r=\"1\" fill=\"green\"&gt;           &lt;animateMotion dur=\"20s\" repeatCount=\"indefinite\"&gt;             &lt;mpath href=\"#motionPath\" \/&gt;           &lt;\/animateMotion&gt;         &lt;\/circle&gt; <\/code><\/pre>\n<p>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;svg         width=\"300\"         height=\"300\"         viewBox=\"0 0 64 64\"         fill=\"none\"         xmlns=\"http:\/\/www.w3.org\/2000\/svg\"       &gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894 17.7573L46.1708 20.3944C45.832 21.072 45.1395 21.5 44.382 21.5H42C40.8954 21.5 40 20.6046 40 19.5V17.8028L38 20.8028V24.5C38 25.6046 37.1046 26.5 36 26.5H15.5C14.3954 26.5 13.5 25.6046 13.5 24.5V13Z\"           fill=\"white\"           id=\"motionPath\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M55.49 24.3586C55.5681 24.9053 55.1882 25.4118 54.6414 25.4899L47.6414 26.4899C47.0947 26.5681 46.5882 26.1882 46.5101 25.6414C46.4319 25.0947 46.8118 24.5882 47.3586 24.51L54.3586 23.51C54.9053 23.4319 55.4118 23.8118 55.49 24.3586ZM47 28C47 27.4477 47.4477 27 48 27H54.5C55.0523 27 55.5 27.4477 55.5 28C55.5 28.5523 55.0523 29 54.5 29H48C47.4477 29 47 28.5523 47 28Z\"           fill=\"white\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M34.51 24.3586C34.4319 24.9053 34.8118 25.4118 35.3586 25.4899L42.3586 26.4899C42.9053 26.5681 43.4118 26.1882 43.4899 25.6414C43.5681 25.0947 43.1882 24.5882 42.6414 24.51L35.6414 23.51C35.0947 23.4319 34.5882 23.8118 34.51 24.3586ZM43 28C43 27.4477 42.5523 27 42 27H35.5C34.9477 27 34.5 27.4477 34.5 28C34.5 28.5523 34.9477 29 35.5 29H42C42.5523 29 43 28.5523 43 28Z\"           fill=\"white\"         \/&gt;         &lt;circle cx=\"0\" cy=\"0\" r=\"1\" fill=\"green\"&gt;           &lt;animateMotion dur=\"20s\" repeatCount=\"indefinite\"&gt;             &lt;mpath href=\"#motionPath\" \/&gt;           &lt;\/animateMotion&gt;         &lt;\/circle&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u0437\u0430\u0435\u0442 \u043f\u043e \u043d\u0430\u0448\u0435\u043c\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u043a\u043e\u0442\u0443:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dae0e5d6b314ff51b\" data-style=\"\" id=\"6755ea7dae0e5d6b314ff51b\" width=\"\"><\/div>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 SVG;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 SVG;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 SVG.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u043f\u0443\u0442\u0438 (<code>stroke-dasharray<\/code> \u0438 <code>stroke-dashoffset<\/code>) \u0441 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 CSS-\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7df3c34e13a23f756a\" data-style=\"\" id=\"6755ea7df3c34e13a23f756a\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"WebP\" id=\"WebP\"><\/a><\/p>\n<h2>WebP<\/h2>\n<p>\u0424\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439 Google \u0432 2010 \u0433\u043e\u0434\u0443. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0436\u0430\u0442\u0438\u044f \u0431\u0435\u0437 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435. \u0412\u0435\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 25-35 %. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u2013 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0424\u043e\u0440\u043c\u0430\u0442 WebP \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430. \u0427\u0435\u043c \u0432\u044b\u0448\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0435\u0441\u0438\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0434\u0440\u043e\u0432 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043e\u0431\u0449\u0438\u0439 \u0432\u0435\u0441 \u0444\u0430\u0439\u043b\u0430 \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0432\u0435\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0435\u0451 \u0434\u043b\u0438\u043d\u044b. \u0415\u0441\u043b\u0438 \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0442\u043d\u0438 \u0438\u043b\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u043a\u0430\u0434\u0440\u043e\u0432, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u0431\u044a\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c\u044b\u043c \u0441 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c WebP-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 Safari \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0436\u0435\u0441\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043f\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d), \u0447\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0423 WebP \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435\u0442, \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044e (\u0435\u0441\u043b\u0438 \u0432\u044b \u0441 \u043d\u0435\u0439 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u2013 \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0439\u0442\u0435, \u0435\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c <a href=\"#%D0%A1%D0%B5%D0%BA%D0%B2%D0%B5%D0%BD%D1%86%D0%B8%D1%8F\">\u0432 \u043a\u043e\u043d\u0446\u0435<\/a>). \u041e\u0442\u0447\u0430\u0441\u0442\u0438 \u0442\u0430\u043a \u0438 \u0435\u0441\u0442\u044c, \u0432\u0435\u0434\u044c \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u043e\u043a\u0430\u0434\u0440\u043e\u0432\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 WebP \u0432\u0441\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435.<\/p>\n<p>WebP-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0435\u0435 \u043d\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u044b\u0445. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 (\u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435) \u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0432\u0438\u0436\u0443\u0449\u0435\u0439\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 (\u043a\u0430\u043a \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435).<\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 WebP \u0431\u044b\u043b\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u044e\u0434\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WebP \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e, \u0434\u0435\u043b\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443 \u043d\u0430 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e.<\/p>\n<p>\u0415\u0449\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u043e\u0432, \u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u044d\u0442\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043d\u0438\u0436\u0435. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 WebP \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e 100 % \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f WebP-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0430\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c webp \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u0434\u043e \u043d\u0435\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>src<\/code> \u0434\u043b\u044f \u0442\u0435\u0433\u0430 <code>&lt;img \/&gt;<\/code><\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0445 \u043f\u043e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0412\u0437\u043b\u0435\u0442\u0430\u044e\u0449\u0430\u044f \u043f\u0442\u0438\u0446\u0430 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0413\u0430\u0437\u043f\u0440\u043e\u043c\u0431\u0430\u043d\u043a\u0430:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d08571a136e0b173e\" data-style=\"\" id=\"6755ea7d08571a136e0b173e\" width=\"\"><\/div>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0430 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432. \u0415\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0438\u0437\u043a\u043e\u0439, \u0447\u0442\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Safari \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0430\u0441\u044c \u0441\u0430\u043c\u0430 \u0441\u043e\u0431\u043e\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0444\u043e\u0440\u043c\u0430\u0442 WebP.<\/p>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0430\u0440\u0430 \u043e\u0442 \u043a\u0443\u0440\u0438\u0446\u044b \u0438 \u0433\u043e\u0440\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0447\u0435\u0439:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dae0e5d6b314ff51d\" data-style=\"\" id=\"6755ea7dae0e5d6b314ff51d\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"Canvas\" id=\"Canvas\"><\/a><\/p>\n<h2>Canvas<\/h2>\n<p>Canvas \u2013 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e). \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Canvas, \u043d\u0443\u0436\u043d\u044b \u043b\u0438\u0448\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f HTML \u0438 JavaScript.<\/p>\n<p>\u041d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 Canvas, \u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, Canvas \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0438\u043b, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Phaser, PixiJS \u0438\u043b\u0438 Three.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 API \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u042d\u0442\u0438 \u0434\u0432\u0438\u0436\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445 WebGL, \u0447\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\/Basic_animations\">\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a>.<\/p>\n<p>Canvas \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0435, \u0442\u0430\u043a \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0432\u043e\u0431\u043e\u0434\u043e\u0439 \u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u0430\u0434\u0440\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440, \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Canvas API \u043d\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0435 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0430\u0434\u0430\u0442\u044c. \u0422\u0430\u043a\u0436\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u043d\u0435\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0435\u0441\u044c \u0441 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Canvas_API\/Tutorial\/Optimizing_canvas\">\u0441\u0431\u043e\u0440\u043d\u0438\u043a\u043e\u043c \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<p>\u0415\u0449\u0435 \u0443 Canvas \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0438\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043f\u0440\u0430\u0432\u0434\u0430, \u044d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 &#171;\u0447\u0438\u0441\u0442\u044b\u0439&#187; Canvas, \u0430 \u043d\u0435 \u0434\u0432\u0438\u0436\u043e\u043a).<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0445 \u0438\u0433\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&lt;div \/&gt;<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<p>\u0412 <a href=\"https:\/\/body-melody-main.ktsdev.ru\/\">\u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/a> \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0439 \u0432\u043e\u043b\u043d\u044b \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c Canvas:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7ec07fea6aff09fcee\" data-style=\"\" id=\"6755ea7ec07fea6aff09fcee\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"Lottie\" id=\"Lottie\"><\/a><\/p>\n<h2>Lottie<\/h2>\n<p>Lottie (\u0438\u043b\u0438 \u041b\u043e\u0442\u0442\u0438) \u2013 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 JSON \u0434\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u041b\u043e\u0442\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c: \u0444\u0430\u0439\u043b\u044b \u041b\u043e\u0442\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u041b\u043e\u0442\u0442\u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432 \u0432 Telegram;<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u041b\u043e\u0442\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Adobe After Effects), \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/lottiefiles.com\/\">\u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435<\/a>.<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c \u041b\u043e\u0442\u0442\u0438 \u0441 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c\u0438 \u0433\u0438\u0444\u043a\u0430\u043c\u0438. GIF-\u0444\u0430\u0439\u043b\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0444\u043e\u0440\u043c\u0430\u0442 JSON, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 Lottie, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, GIF \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a Lottie \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u0430\u0434\u0440\u0443, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 Lottie \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 PNG \u0438 GIF:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/142\/617\/72b\/14261772b97ebcd41f090729a18d1e2d.png\" width=\"1452\" height=\"666\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/142\/617\/72b\/14261772b97ebcd41f090729a18d1e2d.png\"\/><\/figure>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e Lottie \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 <strong>dotLottie<\/strong>. \u042d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 Lottie \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u0422\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 ZIP-\u0430\u0440\u0445\u0438\u0432\u044b, \u0441\u0436\u0430\u0442\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0441\u0436\u0430\u0442\u0438\u044f Deflate, \u0438 \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 .lottie (\u043e\u0442\u0441\u044e\u0434\u0430 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435).<\/p>\n<p>\u0424\u0430\u0439\u043b\u044b dotLottie \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0447\u0435\u043c Lottie. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0438\u0445 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 <a href=\"https:\/\/lottiefiles.com\/\">LottieFiles<\/a>.<\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 Lottie-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/065\/b50\/fe5\/065b50fe5b8b0e5e625eaad6b0d1f9c2.png\" width=\"339\" height=\"78\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/065\/b50\/fe5\/065b50fe5b8b0e5e625eaad6b0d1f9c2.png\"\/><\/figure>\n<p> \u0420\u0430\u0437\u043c\u0435\u0440 \u0442\u043e\u0439 \u0436\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 dotLottie:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a48\/95f\/218\/a4895f218e11551b61688b4dcb68da34.png\" width=\"339\" height=\"90\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a48\/95f\/218\/a4895f218e11551b61688b4dcb68da34.png\"\/><\/figure>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432 dotLottie \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0430\u0442\u044c\u0441\u044f. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 (\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u043d\u043e\u0432\u044c \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0441 <a href=\"https:\/\/lottiefiles.com\/\">LottieFiles<\/a>):<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7eae0e5d6b314ff521\" data-style=\"\" id=\"6755ea7eae0e5d6b314ff521\" width=\"\"><\/div>\n<p>\u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 dotLottie \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0441\u044b. \u041d\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c \u0432\u0441\u0435 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Lottie \u0432 dotLottie \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/lottiefiles.com\/tools\/lottie-to-dotlottie\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c Lottie-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/lottie-web\">lottie-web<\/a> \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 Lottie:<\/p>\n<pre><code class=\"javascript\">import * as React from 'react'; import Lottie, { AnimationItem } from 'lottie-web';  const TestLottie: React.FC = () =&gt;  {   const [animationItem, setAnimationItem] =     React.useState&lt;AnimationItem | null&gt;(null);        const containerRef = React.useRef&lt;HTMLDivElement&gt;(null);      React.useEffect(() =&gt; {     if (containerRef.current) {       const animation = Lottie.loadAnimation({         container: containerRef.current,         path: 'https:\/\/lottie.host\/d08e7662-fa30-4250-85b2-e2b84099d740\/2RdMSZgTtW.json'       });        setAnimationItem(animation);     }      return () =&gt; {       animationItem?.destroy();     };   }, []);    return (       &lt;div ref={containerRef} className=\"div\" \/&gt;   ); }  export default TestLottie; <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432 <code>animationItem<\/code> \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>useState<\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0410<code>useRef<\/code> \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 <code>containerRef<\/code> \u2013 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>div<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 <code>useEffect<\/code> \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0435 \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c <code>path<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0443\u0442\u044c \u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443. \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>animationItem?.destroy()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0443 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7ef3c34e13a23f7570\" data-style=\"\" id=\"6755ea7ef3c34e13a23f7570\" width=\"\"><\/div>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 JSON, \u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e <code>path<\/code> \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>animationData<\/code>:<\/p>\n<pre><code class=\"javascript\">import testAnim from '.\/test.json';  const animation = Lottie.loadAnimation({  container: containerRef.current,  animationData: testAnim  }); <\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f <code>loadAnimation<\/code> \u043c\u043e\u0436\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>renederer<\/code>. \u0415\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u043d\u043e <code>svg<\/code>, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c <code>canvas<\/code> \u0438\u043b\u0438 <code>html<\/code>.<\/p>\n<pre><code class=\"javascript\">const animation = Lottie.loadAnimation({  container: containerRef.current,  animationData: testAnim,  renderer: 'canvas',  }); <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>canvas<\/code>, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dea\/5bc\/cc1\/dea5bccc102cfcebb49e51605561acfd.png\" width=\"2048\" height=\"694\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dea\/5bc\/cc1\/dea5bccc102cfcebb49e51605561acfd.png\"\/><\/figure>\n<p>\u0423 <code>animationItem<\/code> \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2013 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u0430\u0443\u0437\u0443 \u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">const handlePlayClick = () =&gt; {     animationItem?.play();   }    const handlePauseClick = () =&gt; {     animationItem?.pause();   }    return (     &lt;&gt;       &lt;div ref={containerRef} className=\"div\"\/&gt;       &lt;button onClick={handlePlayClick}&gt;Play&lt;\/button&gt;       &lt;button onClick={handlePauseClick}&gt;Pause&lt;\/button&gt;     &lt;\/&gt;   ); <\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7ef35f7b138eaa5fc7\" data-style=\"\" id=\"6755ea7ef35f7b138eaa5fc7\" width=\"\"><\/div>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c dotLottie-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e <strong>dotLottie<\/strong> \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/LottieFiles\/dotlottie-web\/blob\/main\/packages\/react\/README.md\">@lottiefiles\/dotlottie-react<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0437\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>DotLottieReact<\/strong>:<\/p>\n<pre><code class=\"javascript\">&lt;DotLottieReact         src={testAnim}         loop         autoplay       \/&gt; <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 Canvas.<\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>dotLottieRefCallback<\/code>:<\/p>\n<pre><code class=\"javascript\">import * as React from 'react'; import testAnim from '.\/dotTest.lottie'; import { DotLottie, DotLottieReact } from '@lottiefiles\/dotlottie-react';  const TestDotLottie: React.FC = () =&gt; {   const [dotLottie, setDotLottie] = React.useState&lt;DotLottie | null&gt;(null);    const play = () =&gt; {     dotLottie?.play();   };    const pause = () =&gt; {     dotLottie?.pause();   };    const stop = () =&gt; {     dotLottie?.stop();   };    return (     &lt;&gt;       &lt;DotLottieReact         src={testAnim}         loop         autoplay         dotLottieRefCallback={setDotLottie}       \/&gt;       &lt;div&gt;         &lt;button onClick={play}&gt;Play&lt;\/button&gt;         &lt;button onClick={pause}&gt;Pause&lt;\/button&gt;         &lt;button onClick={stop}&gt;Stop&lt;\/button&gt;       &lt;\/div&gt;     &lt;\/&gt;   ); };  export default TestDotLottie;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, Lottie \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c. \u0415\u0441\u043b\u0438 Lottie-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u044d\u0442\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0431\u0438\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u0442\u043e\u043a (Thread). \u0414\u043b\u044f \u043e\u0431\u0445\u043e\u0434\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0437\u0430\u0431\u0438\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 Lottie \u0432 worker, \u043e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f: Canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e, \u0430 \u0432\u043e\u0442 SVG-\u0440\u0435\u043d\u0434\u0435\u0440 \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 SVG \u043c\u043d\u043e\u0433\u043e \u0438 \u043e\u043d\u0438 \u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f, \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439. \u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0445\u043e\u0434\u043e\u043c \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0430 \u043d\u0430 mp4.<\/p>\n<p>Lottie-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 LottieFiles \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d <a href=\"https:\/\/lottiefiles.com\/interactivity\">\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0433\u0430\u0439\u0434<\/a>. \u0412 \u043d\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0435 \u043a\u0430\u0434\u0440\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0438\u043b\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0432\u0438\u0434\u043d\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0443.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h3>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0421\u0431\u0435\u0440\u043a\u043e\u0442\u0430:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7eca01a46b4cc20832\" data-style=\"\" id=\"6755ea7eca01a46b4cc20832\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"Spine\" id=\"Spine\"><\/a><\/p>\n<h2>Spine<\/h2>\n<p>Spine \u2212 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f 2D-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041e\u043d\u0430 \u0443\u0434\u043e\u0431\u043d\u0430 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440 \u0438\u043b\u0438 \u0440\u043e\u043b\u0438\u043a\u043e\u0432. Spine \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u043a\u0435\u043b\u0435\u0442\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u201c\u043a\u043e\u0441\u0442\u0435\u0439\u201d, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0412\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 &#171;\u043a\u043e\u0441\u0442\u0435\u0439&#187;, \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043a\u0430\u0434\u0440\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043d\u0430\u0431\u043e\u0440 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>Spine \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u043a\u0430\u0434\u0440\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043b\u0430\u0432\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0442\u044c \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c, \u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u043a\u0430\u0434\u0440\u0430\u043c\u0438. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043c\u043f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0435\u0439 (\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442\u043e\u0432). \u0421\u043b\u0435\u0432\u0430 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e Spine, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u2212 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7efbab546b0d4e5cda\" data-style=\"\" id=\"6755ea7efbab546b0d4e5cda\" width=\"\"><\/div>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0432\u0438\u0434\u0435\u043e \u0434\u0430\u043b\u0435\u0435. \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0432\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043d\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u0437\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430. \u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7e851c1a6b1bc82aec\" data-style=\"\" id=\"6755ea7e851c1a6b1bc82aec\" width=\"\"><\/div>\n<p>\u041a \u0441\u043b\u043e\u0432\u0443 \u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u043e\u0432. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 Spine \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0430\u043c\u044f\u0442\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f Spine- \u0438 sprite-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e16\/1b8\/acc\/e161b8acc8253a2d48071683a9e1f7cf.png\" width=\"675\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e16\/1b8\/acc\/e161b8acc8253a2d48071683a9e1f7cf.png\"\/><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e\u043c Spine \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u041c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043a\u0438\u043d\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7ff3c34e13a23f7572\" data-style=\"\" id=\"6755ea7ff3c34e13a23f7572\" width=\"\"><\/div>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 Spine \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0431\u0435\u0437 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u043d\u0435 \u043e\u0431\u043e\u0448\u043b\u043e\u0441\u044c. \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0437\u0430 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c, \u0430 \u043d\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0445 \u0441\u043e\u0444\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u0442\u0430\u043a \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0435\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f: Canvas, Phaser, Three.js, WebGL \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d <a href=\"https:\/\/ru.esotericsoftware.com\/spine-runtimes\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/EsotericSoftware\/spine-runtimes\/blob\/4.2\/spine-ts\/README.md\">\u0432\u043e\u0442 \u0442\u0443\u0442<\/a>.<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 2D;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430 \u0433\u0438\u0431\u043a\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043c\u0435\u043d\u044b \u0441\u043a\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<ul>\n<li>\n<p>\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u0438 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>Spine-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0432\u0438\u0436\u043a\u0430, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u044f\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h3>\n<p>\u041a\u043e\u0442\u0438\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f Whiskas:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7f08571a136e0b1746\" data-style=\"\" id=\"6755ea7f08571a136e0b1746\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"%D0%A1%D0%B5%D0%BA%D0%B2%D0%B5%D0%BD%D1%86%D0%B8%D1%8F\" id=\"\u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f\"><\/a><\/p>\n<h2>\u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f<\/h2>\n<p>\u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f \u2212 \u043f\u043e\u0434\u0445\u043e\u0434, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043a\u0430\u0437\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043a\u0430\u0434\u0440\u043e\u0432. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 <strong>\u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442\u044b.<\/strong> \u041f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u0417\u0434\u0435\u0441\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0431\u0435\u0433\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u0442\u043e \u0432 \u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u0432\u0438\u0436\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Phaser), \u0442\u0430\u043a \u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u0445, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 <a href=\"https:\/\/www.cat-in-web.ru\/sprite-animation-on-canvas\/\">\u0441\u0442\u0430\u0442\u044c\u0435-\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435<\/a>.<\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u0437\u0430\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0435 \u043d\u0435 \u0442\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0434\u0440\u043e\u0432 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u0445 \u0441\u043c\u0435\u043d\u044b: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u0430\u0434\u0440\u043e\u0432, \u0442\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u0435\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043d\u043e \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u044a\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0434\u0440\u044b \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0445\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c: \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f: \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0443 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0434\u0435\u0436\u0434\u044b, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0445 \u043a\u0430\u0434\u0440\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u0430\u043b\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0434\u0440\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0430\u044f  \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0441\u0431\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h4>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u0430\u0434\u0440\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445<\/h3>\n<p> \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442\u0430 \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u041c\u0435\u0433\u0430\u0431\u0430\u0448\u043d\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bdc\/b9c\/566\/bdcb9c56619bf4f8c04963302a9f33ba.png\" width=\"840\" height=\"840\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bdc\/b9c\/566\/bdcb9c56619bf4f8c04963302a9f33ba.png\"\/><\/figure>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u0443\u0431\u0438\u043a\u0430 \u0441 \u0440\u0430\u0437\u0431\u043e\u0440\u043e\u043c \u043a\u043e\u0434\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a\u0443\u0431\u0438\u043a\u0430 \u0434\u043b\u044f \u0442\u043e\u0439 \u0436\u0435 \u041c\u0435\u0433\u0430\u0431\u0430\u0448\u043d\u0438:<\/p>\n<pre><code class=\"javascript\">export interface SpriteOptions {   ctx: CanvasRenderingContext2D;   image: string;   width: number;   height: number;   frameWidth: number;   frameHeight: number;   lines: number;   columns: number;   ticksPerFrame?: number;   numberOfFrames?: number; }  export class Sprite {   ctx: CanvasRenderingContext2D;   image: HTMLImageElement;   width: number;   height: number;   ticksPerFrame: number;   numberOfFrames: number;   frameWidth: number;   frameHeight: number;   frameIndex: number;   tickCount: number;   lines: number;   columns: number;   animation: ReturnType&lt;typeof requestAnimationFrame&gt; | null = null;    private _oneFrameWidth: number;   private _oneFrameHeight: number;    constructor(options: SpriteOptions) {     \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u0430     this.ctx = options.ctx;      \/\/ \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f     const imageElement = new Image();      imageElement.src = options.image;     this.image = imageElement;      \/\/ \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0440\u0435\u0439\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0430     this.frameIndex = 0;     \/\/ \u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0442\u0438\u043a\u043e\u0432, \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0448\u043b\u043e \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043d\u0438\u044f     this.tickCount = 0;     \/\/ \u041a\u043e\u043b-\u0432\u043e \u0442\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u0430 (\u043f\u0440\u0438 60 fps, ticksPerFrame = 4 \u0431\u0443\u0434\u0435\u0442 15 \u043a\u0430\u0434\u0440\u043e\u0432\/\u0441)     this.ticksPerFrame = options.ticksPerFrame ?? 0;     \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0432 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435     this.numberOfFrames = options.numberOfFrames ?? 1;      \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0435\u0439\u043b\u0438\u0442\u044c\u0441\u044f)     this.width = options.width;     this.height = options.height;      \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 (\u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f)     this.frameWidth = options.frameWidth;     this.frameHeight = options.frameHeight;      \/\/ \u041a\u043e\u043b-\u0432\u043e \u043b\u0438\u043d\u0438\u0439 \u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435     this.lines = options.lines;     this.columns = options.columns;      \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435     this._oneFrameWidth = options.width \/ options.columns;     this._oneFrameHeight = options.height \/ options.lines;   }    private _update() {     this.tickCount++;      if (this.tickCount &gt; this.ticksPerFrame) {       this.tickCount = 0;        this.frameIndex = this.frameIndex + 1 &gt; this.numberOfFrames ? 0 : this.frameIndex + 1;     }   }    private _render() {     this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);     this.ctx.drawImage(       this.image,       (this.frameIndex % this.columns) * this._oneFrameWidth,       (Math.floor(this.frameIndex \/ this.columns) % this.lines) * this._oneFrameHeight,       this._oneFrameWidth,       this._oneFrameHeight,       0,       0,       this.frameWidth,       this.frameHeight     );   }    start() {     const loop = () =&gt; {       this._update();       this._render();        this.animation = window.requestAnimationFrame(loop);     };      this.animation = window.requestAnimationFrame(loop);   }    stop() {     if (this.animation) {       window.cancelAnimationFrame(this.animation);     }      this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>SpriteOptions<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437:<\/p>\n<ul>\n<li>\n<p><code>ctx<\/code> \u2212 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 <code>CanvasRenderingContext2D<\/code>, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442;<\/p>\n<\/li>\n<li>\n<p><code>image<\/code> \u2212 \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0441\u043f\u0440\u0430\u0439\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><code>width<\/code> \u0438 <code>height<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><code>frameWidth<\/code> \u0438 <code>frameHeight<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p><code>lines<\/code> \u0438 <code>columns<\/code> \u2212 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p><code>ticksPerFrame<\/code> (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) \u2212 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u201c\u0442\u0438\u043a\u043e\u0432\u201d \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u0430, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><code>numberOfFrames<\/code> (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) \u2212 \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<ul>\n<li>\n<p><code>ctx<\/code> \u2212 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p><code>image<\/code> \u2212 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 <code>HTMLImageElement<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0434\u0440\u044b \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f: <\/p>\n<ul>\n<li>\n<p><code>frameIndex<\/code> \u2212 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u043a\u0430\u0434\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p><code>tickCount<\/code> \u2212 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u0438\u043a\u043e\u0432 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>ticksPerFrame<\/code> \u2212 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0438\u043a\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p><code>numberOfFrames<\/code> \u2212 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0432 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u043c\u0435\u0440\u044b: <\/p>\n<ul>\n<li>\n<p><code>width<\/code> \u0438 <code>height<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>frameWidth<\/code> \u0438 <code>frameHeight<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p><code>_oneFrameWidth<\/code> \u0438 <code>_oneFrameHeight<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435, \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<ul>\n<li>\n<p><code>_update()<\/code> \u2212 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a <code>tickCount<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0448\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u0438\u043a\u043e\u0432 (\u0431\u043e\u043b\u044c\u0448\u0435 <code>ticksPerFrame<\/code>), \u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 <code>frameIndex<\/code>. \u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u0430\u0434\u0440 \u0431\u044b\u043b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u0442\u043e \u0432 <code>frameIndex<\/code> \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 0;<\/p>\n<\/li>\n<li>\n<p><code>_render()<\/code> \u2212 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043a\u0430\u0434\u0440 (<code>ctx.clearRect<\/code>) \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 <code>drawImage<\/code>.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u043c\u0435\u0442\u043e\u0434 <code>drawImage<\/code> <strong>CanvasRenderingContext2D<\/strong>: <code>drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)<\/code><\/p>\n<ul>\n<li>\n<p><code>image<\/code> \u2212 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p><code>sx<\/code> \u0438 <code>sy<\/code> \u2212 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u043f\u043e \u043e\u0441\u044f\u043c X \u0438 Y \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u044d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p><code>(this.frameIndex % this.columns) * this._oneFrameWidth<\/code> \u0434\u043b\u044f \u043e\u0441\u0438 X;<\/p>\n<\/li>\n<li>\n<p><code>(Math.floor(this.frameIndex \/ this.columns) % this.lines) * this._oneFrameHeight<\/code> \u0434\u043b\u044f \u043e\u0441\u0438 Y;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>sWidth<\/code> \u0438 <code>sHeight<\/code> \u2212 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f (\u0437\u0434\u0435\u0441\u044c \u0431\u0435\u0440\u0435\u043c <code>this._oneFrameWidth<\/code> \u0438 <code>this._oneFrameHeight<\/code>);<\/p>\n<\/li>\n<li>\n<p><code>dx<\/code> \u0438 <code>dy<\/code> \u2212 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435, \u043a\u0443\u0434\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0434\u0440 (\u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435\u0433\u0434\u0430 0, 0);<\/p>\n<\/li>\n<li>\n<p><code>dWidth<\/code> \u0438 <code>dHeight<\/code> \u2212 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043a\u0430\u0434\u0440 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435 (\u0437\u0434\u0435\u0441\u044c \u0431\u0435\u0440\u0435\u043c <code>this.frameWidth<\/code> \u0438 <code>this.frameHeight<\/code>).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><code>start()<\/code> \u2212 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0446\u0438\u043a\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>requestAnimationFrame<\/code> . \u0412\u043d\u0443\u0442\u0440\u0438 <code>loop<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>_update<\/code> (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0434\u0440\u0430) \u0438 <code>_render<\/code> (\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u0430\u0434\u0440\u0430), \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 <code>this.animation<\/code>, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><code>stop()<\/code> \u2212 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0432\u044b\u0437\u044b\u0432\u0430\u044f <code>cancelAnimationFrame<\/code> \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c, \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043a\u0430\u043d\u0432\u0430\u0441.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0440\u043e\u0441\u043a\u0430 \u043a\u0443\u0431\u0438\u043a\u0430. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u043e\u0439\u043b\u0435\u0440 \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7fae0e5d6b314ff527\" data-style=\"\" id=\"6755ea7fae0e5d6b314ff527\" width=\"\"><\/div>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Dice<\/code> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 <strong>\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438<\/strong>:<\/p>\n<ul>\n<li>\n<p><code>diceResultLoading<\/code> \u2212 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0438\u0434\u0435\u0442 \u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0440\u043e\u0441\u043a\u0430 (\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430):<\/p>\n<ul>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 true, \u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0430 false, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430 \u0438 \u043f\u043e\u0440\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>diceResult<\/code> \u2212 \u0445\u0440\u0430\u043d\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0440\u043e\u0441\u043a\u0430 \u043a\u0443\u0431\u0438\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>isResultAnimation<\/code> \u2212 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043a\u0443\u0431\u0438\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><code>canvasRef<\/code> \u2212 \u043d\u0430 canvas, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>spriteRef<\/code> \u2212 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 Sprite, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><code>getDiceResult<\/code> \u2212 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0431\u0440\u043e\u0441\u043a\u0430 \u043a\u0443\u0431\u0438\u043a\u0430. \u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 <code>diceResultLoading<\/code> \u0432 true;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 <code>setTimeout<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 <code>diceResultLoading<\/code> \u0432 false, \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 <code>diceResult<\/code> \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e callback-\u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c <code>handleStartResultAnimation<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435);<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>handleStartResultAnimation<\/code> \u2212 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 <code>isResultAnimation<\/code> \u0432 true;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 <code>setTimeout<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e (\u0441\u0442\u0430\u0432\u0438\u0442 <code>isResultAnimation<\/code> \u0432 false);<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>handleDiceClick<\/code> \u2212 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u043b\u0438\u043a \u043d\u0430 \u043a\u0443\u0431\u0438\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 getDiceResult, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043d\u0435\u0435 <code>handleStartResultAnimation<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 <code>diceResultLoading<\/code> \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f true, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f: <\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f <code>&lt;canvas&gt;<\/code> \u0447\u0435\u0440\u0435\u0437 <code>canvasRef<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f (<code>ctx<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Sprite<\/code> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: <\/p>\n<ul>\n<li>\n<p><code>image<\/code>: \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><code>width<\/code>, <code>height<\/code>: \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>numberOfFrames<\/code>: \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p><code>lines<\/code>, <code>columns<\/code>: \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b (8&#215;8);<\/p>\n<\/li>\n<li>\n<p><code>ticksPerFrame<\/code>: \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u043e\u0432 (1 \u0442\u0438\u043a = 1 \u043a\u0430\u0434\u0440);<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>spriteRef.current.start()<\/code>;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 <code>diceResultLoading<\/code> \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f <code>false<\/code>, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>spriteRef.current.stop()<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p> \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">import cx from 'clsx'; import * as React from 'react';  import diceSprite from '..\/assets\/images\/dice\/cube-sprite.png';  import s from '.\/Dice.module.scss'; import { Sprite } from '.\/Sprite'; import { DICE_IMAGES } from '..\/assets\/images\/dice'; const DICE_RESULT_ANIMATION_TIME = 1200;  type Props = {   onHandleNextStepFinished?: () =&gt; void; };  type DiceResult = 1 | 2 | 3 | 4 | 5 | 6;  const Dice: React.FC&lt;Props&gt; = () =&gt; {   const [diceResultLoading, setDiceResultLoading] = React.useState(false);   const [diceResult, setDiceResult] = React.useState&lt;DiceResult&gt;(1);   const [isResultAnimation, setIsResultAnimation] = React.useState(false);    const canvasRef = React.useRef&lt;HTMLCanvasElement | null&gt;(null);   const spriteRef = React.useRef&lt;Sprite | null&gt;(null);    const getDiceResult = React.useCallback((callback?: () =&gt; void) =&gt; {     setDiceResultLoading(true);      setTimeout(() =&gt; {       setDiceResultLoading(false);       setDiceResult(Math.ceil(Math.random() * 6) as DiceResult);        callback?.();     }, 2000);   }, []);    const handleStartResultAnimation = React.useCallback(() =&gt; {     setIsResultAnimation(true);      const timeout = setTimeout(() =&gt; {       setIsResultAnimation(false);     }, DICE_RESULT_ANIMATION_TIME);      return () =&gt; {       if (timeout) {         clearTimeout(timeout);       }     };   }, []);    const handleDiceClick = React.useCallback(() =&gt; {     getDiceResult(handleStartResultAnimation);   }, [getDiceResult, handleStartResultAnimation]);    React.useEffect(() =&gt; {     if (!diceResultLoading || !canvasRef.current) {       spriteRef.current?.stop();        return undefined;     }      const ctx = canvasRef.current.getContext('2d');      if (!ctx) {       return undefined;     }      spriteRef.current = new Sprite({       ctx,       image: diceSprite,       width: 2048,       height: 2048,       numberOfFrames: 60,       frameHeight: 100,       frameWidth: 100,       lines: 8,       columns: 8,       ticksPerFrame: 1,     });      spriteRef.current.start();      return () =&gt; {       spriteRef.current?.stop();     };   }, [diceResultLoading]);    return (     &lt;div       className={cx(s['dice-wrapper'], { [s.inactive]: diceResultLoading })}       onClick={handleDiceClick}     &gt;       &lt;div className={s.dice}&gt;         {!diceResultLoading &amp;&amp; (           &lt;img             src={DICE_IMAGES[diceResult - 1]}             className={cx(s.image, {               [s.image_withAnimation]: isResultAnimation,             })}           \/&gt;         )}         &lt;canvas width={100} height={100} ref={canvasRef} \/&gt;       &lt;\/div&gt;     &lt;\/div&gt;   ); };  export default Dice;<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0440\u043e\u0441\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d (<strong>!diceResultLoading<\/strong>), \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f\u00a0<strong>&lt;img&gt;<\/strong>\u00a0\u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043a\u0443\u0431\u0438\u043a\u0430 (<strong>DICE_IMAGES[diceResult &#8212; 1]<\/strong>) \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u041d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438 (\u0431\u0440\u043e\u0441\u043e\u043a \u043a\u0443\u0431\u0438\u043a\u0430 \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0439\u0447\u0438\u043a\u0430) \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u041c\u0435\u0433\u0430\u0431\u0430\u0448\u043d\u044f:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea80851c1a6b1bc82af2\" data-style=\"\" id=\"6755ea80851c1a6b1bc82af2\" width=\"\"><\/div>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438 \u0432 <a href=\"https:\/\/space.special.ktsstudio.com\/\">\u0434\u0440\u0443\u0433\u043e\u043c \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/a>:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea80f35f7b138eaa5fcf\" data-style=\"\" id=\"6755ea80f35f7b138eaa5fcf\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B\" id=\"\u0414\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b\"><\/a><\/p>\n<h2>\u0414\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h2>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0430\u0436\u043d\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0412 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/motion.dev\/\">motion (Framer Motion)<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/www.react-spring.dev\/\">react-spring<\/a>. \u0423 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u0438.<\/p>\n<p><strong>React Spring<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u044f \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c\u0438 \u043c\u0430\u0441\u0441\u044b, \u0443\u043f\u0440\u0443\u0433\u043e\u0441\u0442\u0438 \u0438 \u0442\u0440\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043c\u043e\u0434\u0435\u043b\u044f\u043c \u0444\u0438\u0437\u0438\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u201c\u043f\u043e\u0434\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0442\u044c\u201d \u0438 \u201c\u0437\u0430\u0442\u0443\u0445\u0430\u0442\u044c\u201d, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u043a\u043e\u043d\u044b.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u043a\u043e\u043b\u043e\u0434\u0435, \u043c\u044b \u0432\u0437\u044f\u043b\u0438 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 <a href=\"https:\/\/codesandbox.io\/p\/sandbox\/to6uf\">\u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043a\u043e\u043b\u043e\u0434\u043e\u0439 \u043a\u0430\u0440\u0442 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 react-spring<\/a> \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0435\u0433\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea80cd4392135895c22d\" data-style=\"\" id=\"6755ea80cd4392135895c22d\" width=\"\"><\/div>\n<p><strong>motion (Framer Motion)<\/strong> \u2212 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0446\u0432\u0435\u0442\u043e\u043c, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435. \u0417\u0434\u0435\u0441\u044c \u043b\u0443\u0447\u0448\u0435 \u0442\u043e\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a <a href=\"https:\/\/motion.dev\/docs\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u043e\u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/motion.dev\/docs\/react-reorder\">Reorder<\/a> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0442\u0430\u043a\u0430\u044f \u043a\u0440\u0430\u0441\u043e\u0442\u0430:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea80c07fea6aff09fcf6\" data-style=\"\" id=\"6755ea80c07fea6aff09fcf6\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f\u0441\u044c \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u043c CSS: \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 WebP, Canvas \u0438\u043b\u0438 Lottie \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0435 \u043c\u0443\u0434\u0440\u0438\u0442\u0435 \u0441 \u0442\u044f\u0436\u0435\u043b\u044b\u043c\u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f\u043c\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Spine. \u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0435\u0439 \u044f \u0432 \u0446\u0435\u043b\u043e\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c. \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 2D-\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u043e\u043d\u0430 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u0432\u0435\u0441\u043e\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u0435\u0437\u0430\u043c\u0435\u043d\u0438\u043c\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>\u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043c\u043e\u0438\u0445 \u043a\u043e\u043b\u043b\u0435\u0433-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u2212 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/819757\/\">\u041b\u0435\u0442\u0430\u044e\u0449\u0438\u0439 \u0421\u0430\u043d\u0442\u0430 \u0438 \u0442\u0430\u043d\u0446\u0443\u044e\u0449\u0438\u0435 \u0441\u043d\u0435\u0433\u0438\u0440\u0438: \u043e\u043f\u044b\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/775948\/\">\u0420\u043e\u0430\u0434\u043c\u044d\u043f \u043f\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c\u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443 \u043e\u0442 KTS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/834732\/\">\u041d\u0435 JavaScript\u2019\u043e\u043c \u0435\u0434\u0438\u043d\u044b\u043c: \u043a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0437\u0430\u0442\u0430\u0449\u0438\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/862348\/\">\u041c\u0430\u0442\u0440\u0438\u0446\u0430 soft skills: \u043a\u0430\u043a \u0432\u044b\u0440\u0430\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0436\u0435\u0440\u0430 \u0434\u043e \u0441\u0438\u043d\u044c\u043e\u0440\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/779670\/\">\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c VS Code \u0434\u043b\u044f \u0432\u0435\u0431\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/837888\/\">CMS \u0437\u0430 0 \u0440\u0443\u0431\u043b\u0435\u0439: \u043a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Strapi<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/858988\/\">\u0427\u0442\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0432 Strapi 5. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0441\u0442\u0430\u043b\u043e \u043b\u0443\u0447\u0448\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0412\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u044b \u0442\u043e\u0436\u0435 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435, \u0438 \u044f \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0432 \u0441\u0432\u043e\u0438\u0445 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044f\u0445. \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/864302\/\"> https:\/\/habr.com\/ru\/articles\/864302\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0430\u0448\u0430, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0434\u0435\u043b\u0430 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u00a0<a href=\"https:\/\/kts.tech\/\">KTS<\/a>.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u0435 \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u044f\u0440\u043a\u0438\u0445 \u0438 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0443\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u044f \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#CSS\">CSS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#SVG\">SVG<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#WebP\">WebP<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Canvas\">Canvas<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Lottie\">Lottie<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Spine\">Spine<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B5%D0%BA%D0%B2%D0%B5%D0%BD%D1%86%D0%B8%D1%8F\">\u0421\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"CSS\" id=\"CSS\"><\/a><\/p>\n<h2>CSS<\/h2>\n<p>CSS \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043e\u043b\u0435\u0435 \u201c\u0436\u0438\u0432\u044b\u043c\u201d: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0444\u043e\u043a\u0443\u0441\u0435 \u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u0432\u044b\u0441\u043e\u043a\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0438\u0434\u0435\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0439.<\/p>\n<p>\u041f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0442\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043f\u0440\u043e \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/819757\/\">\u0441\u0442\u0430\u0442\u044c\u044e \u043c\u043e\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u0433\u0438 \u041a\u0440\u0438\u0441\u0442\u0438\u043d\u044b<\/a>.<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438, \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS, \u0438 \u043d\u0430 \u044d\u0442\u043e \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h3>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0430\u043a\u043e\u0439 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d851c1a6b1bc82ae8\" data-style=\"\" id=\"6755ea7d851c1a6b1bc82ae8\" width=\"\"><\/div>\n<p>\u0422\u0430\u043a\u0436\u0435 CSS \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0417\u0434\u0435\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u0449\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u0441\u0430 \u041f\u0435\u043b\u044c\u043c\u0435\u043d\u044f:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dca01a46b4cc2082a\" data-style=\"\" id=\"6755ea7dca01a46b4cc2082a\" width=\"\"><\/div>\n<p>\u0415\u0449\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 CSS \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0438\u0433\u0440\u0435 &#171;\u041c\u0435\u043c\u043e\u0440\u0438 \u0421\u043c\u0435\u0448\u0430\u0440\u0438\u043a\u0438&#187;:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d08571a136e0b173c\" data-style=\"\" id=\"6755ea7d08571a136e0b173c\" width=\"\"><\/div>\n<p><a class=\"anchor\" name=\"SVG\" id=\"SVG\"><\/a><\/p>\n<h2>SVG<\/h2>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, SVG \u2013 \u044d\u0442\u043e \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432, \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u043e\u0440\u043c). \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430:<\/p>\n<ul>\n<li>\n<p>CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0439 SVG-\u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>@keyframes<\/strong> \u0438 <strong>animation<\/strong>. \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u043d\u043e\u0433\u0434\u0430 SVG \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434, \u0438 \u043d\u0435 \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS \u043d\u0435 \u043e\u0431\u043e\u0439\u0434\u0435\u0448\u044c\u0441\u044f. \u0422\u0443\u0442 \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f SMIL (Synchronized Multimedia Integration Language).<\/p>\n<p>\u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 CSS, SMIL \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412\u0441\u0435-\u0442\u0430\u043a\u0438 CSS \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG, \u043b\u0443\u0447\u0448\u0435 \u0442\u0430\u043a \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0412 \u043a\u0430\u043a\u0438\u0445 \u0436\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f SMIL? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f CSS;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (SMIL \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c);<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG \u0447\u0435\u0440\u0435\u0437 SMIL<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0435\u0433 <code>&lt;animate \/&gt;<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"300\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt; &lt;circle cx=\"100\" cy=\"100\" r=\"15\" width=\"200\" height=\"200\" fill=\"red\"&gt; &lt;animate attributeName=\"r\" from=\"15\" to=\"50\" dur=\"3s\" repeatCount=\"indefinite\" \/&gt; &lt;\/circle&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dfbab546b0d4e5cd2\" data-style=\"\" id=\"6755ea7dfbab546b0d4e5cd2\" width=\"\"><\/div>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;animateTransform \/&gt;<\/code> \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f (translate), \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (scale), \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f (rotate) \u0438 \u043d\u0430\u043a\u043b\u043e\u043d\u044b (skewX \u0438 skewY).<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;         &lt;rect x=\"50\" y=\"50\" width=\"100\" height=\"100\" fill=\"green\"&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"rotate\"             from=\"0 100 100\"             to=\"360 100 100\"             dur=\"5s\"             repeatCount=\"indefinite\"           \/&gt;         &lt;\/rect&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<p>\u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7dcd4392135895c225\" data-style=\"\" id=\"6755ea7dcd4392135895c225\" width=\"\"><\/div>\n<p>\u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0438 \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS. \u041e\u0434\u043d\u0430\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 SMIL \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0435\u0433 <code>animateTransform<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>additive=\u201dsum\u201d<\/code>. \u0422\u043e\u0433\u0434\u0430 \u0434\u0432\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043b\u043e\u0436\u0430\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;         &lt;rect x=\"50\" y=\"50\" width=\"100\" height=\"100\" fill=\"green\"&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"rotate\"             from=\"0 100 100\"             to=\"360 100 100\"             dur=\"5s\"             repeatCount=\"indefinite\"           \/&gt;           &lt;animateTransform             attributeName=\"transform\"             type=\"scale\"             values=\"0.5; 1; 0.5\"             keyTimes=\"0; 0.5; 1\"             dur=\"4s\"             repeatCount=\"indefinite\"             additive='sum'           \/&gt;         &lt;\/rect&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6755ea7d5558e1137e55eeb1\" data-style=\"\" id=\"6755ea7d5558e1137e55eeb1\" width=\"\"><\/div>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u0442\u0435\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c: \u201c\u0427\u0442\u043e \u0436\u0435 \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u2013 \u043d\u0435\u0442?\u201d. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>additive=\u201dsum\u201d<\/code> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 (\u043e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 scale) \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0435\u0433\u043e \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u0447\u0442\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0443\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0422\u0435\u0433 <code>&lt;animateMotion \/&gt;<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0437\u044c\u043c\u0435\u043c SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;svg         width=\"300\"         height=\"300\"         viewBox=\"0 0 64 64\"         fill=\"none\"         xmlns=\"http:\/\/www.w3.org\/2000\/svg\"       &gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894 17.7573L46.1708 20.3944C45.832 21.072 45.1395 21.5 44.382 21.5H42C40.8954 21.5 40 20.6046 40 19.5V17.8028L38 20.8028V24.5C38 25.6046 37.1046 26.5 36 26.5H15.5C14.3954 26.5 13.5 25.6046 13.5 24.5V13Z\"           fill=\"white\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M55.49 24.3586C55.5681 24.9053 55.1882 25.4118 54.6414 25.4899L47.6414 26.4899C47.0947 26.5681 46.5882 26.1882 46.5101 25.6414C46.4319 25.0947 46.8118 24.5882 47.3586 24.51L54.3586 23.51C54.9053 23.4319 55.4118 23.8118 55.49 24.3586ZM47 28C47 27.4477 47.4477 27 48 27H54.5C55.0523 27 55.5 27.4477 55.5 28C55.5 28.5523 55.0523 29 54.5 29H48C47.4477 29 47 28.5523 47 28Z\"           fill=\"white\"         \/&gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M34.51 24.3586C34.4319 24.9053 34.8118 25.4118 35.3586 25.4899L42.3586 26.4899C42.9053 26.5681 43.4118 26.1882 43.4899 25.6414C43.5681 25.0947 43.1882 24.5882 42.6414 24.51L35.6414 23.51C35.0947 23.4319 34.5882 23.8118 34.51 24.3586ZM43 28C43 27.4477 42.5523 27 42 27H35.5C34.9477 27 34.5 27.4477 34.5 28C34.5 28.5523 34.9477 29 35.5 29H42C42.5523 29 43 28.5523 43 28Z\"           fill=\"white\"         \/&gt;       &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0442\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0442\u0435\u0433 <code>&lt;circle&gt;&lt;\/circle&gt;<\/code> \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c <code>animateMotion<\/code> \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0432 \u0442\u0435\u0433 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>mpath<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <code>path<\/code> \u2013 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">&lt;circle cx=\"0\" cy=\"0\" r=\"1\" fill=\"green\"&gt;           &lt;animateMotion dur=\"20s\" repeatCount=\"indefinite\"&gt;             &lt;mpath href=\"#motionPath\" \/&gt;           &lt;\/animateMotion&gt;         &lt;\/circle&gt; <\/code><\/pre>\n<p>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;svg         width=\"300\"         height=\"300\"         viewBox=\"0 0 64 64\"         fill=\"none\"         xmlns=\"http:\/\/www.w3.org\/2000\/svg\"       &gt;         &lt;path           fill-rule=\"evenodd\"           clip-rule=\"evenodd\"           d=\"M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894<\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-443122","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=443122"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443122\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}