{"id":343835,"date":"2023-01-12T09:02:27","date_gmt":"2023-01-12T09:02:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=343835"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=343835","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0432\u0435\u043b \u0411\u0435\u043b\u043e\u0432\u043e\u043b, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/kion.ru\/home\">\u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0438\u043d\u043e\u0442\u0435\u0430\u0442\u0440\u0430 KION<\/a> \u0432 <a href=\"https:\/\/career.habr.com\/companies\/mts\/vacancies\">\u041c\u0422\u0421 Digital<\/a>. \u042d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/694384\/\">\u0441\u0435\u0440\u0438\u0430\u043b\u0430 \u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u0444\u0438\u0447\u0438 Autoplay<\/a> \u0432 KION, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u0432\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MotionLayout \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u0437\u0430\u0434\u0430\u0447\u0438 \u0432 KION. \u0418\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c MotionLayout, \u0430 \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/82c\/bbd\/a71\/82cbbda717ba57bf1c31fe83adf17e63.jpg\" width=\"1920\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/82c\/bbd\/a71\/82cbbda717ba57bf1c31fe83adf17e63.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0432\u043e\u0434\u043d\u0430\u044f:<\/strong><\/p>\n<p>MotionLayout \u2013 \u044d\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e MotionLayout \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.android.com\/training\/constraint-layout\/motionlayout\"><u>\u0442\u0443\u0442<\/u><\/a><u>.<\/u><\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0430\u0448\u0435\u0439 \u0444\u0438\u0447\u0435.<\/p>\n<p>\u041d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0432\u0441\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430 \u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c, \u043d\u043e \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u043e\u0438\u0441\u043a, \u0430\u043d\u0430\u043b\u0438\u0437 \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041c\u044b \u0432 KION \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0440\u0438\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u043e\u043c. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0437\u0440\u0438\u0442\u0435\u043b\u044e.<\/p>\n<p>\u041e\u0431\u0441\u0443\u0434\u0438\u0432 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>api, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0435\u0440\u043d\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u0438\u043b\u044c\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0444\u0438\u043b\u044c\u043c, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 api.<\/p>\n<\/li>\n<\/ul>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 api, \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0430pi \u0443 \u043d\u0430\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043b\u0443\u0447\u0448\u0438\u0439 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c.<\/p>\n<p>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043c\u044b \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2013 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0444\u0438\u043b\u044c\u043c \u0434\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u0442\u0440\u043e\u0432, \u0443 \u043d\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cd6\/308\/f78\/cd6308f783afa412a8358e1f8db55a7f.gif\" alt=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0416\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" title=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0416\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" width=\"512\" height=\"236\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cd6\/308\/f78\/cd6308f783afa412a8358e1f8db55a7f.gif\"\/><figcaption>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0416\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/figcaption><\/figure>\n<p>\u041e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0444\u0438\u043b\u044c\u043c \u0434\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u0442\u0440\u043e\u0432, \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c \u043e\u0442 api. \u0418 \u0435\u0441\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043a\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u043e\u0431\u0449\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0440\u0430 \u0438\u0433\u0440\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u043a\u043d\u043e\u043f\u043a\u0438. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0437\u0430\u0434 \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2a9\/620\/42c\/2a962042c0aa9513fced55d15f691e0b.gif\" alt=\"\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \" title=\"\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \" width=\"600\" height=\"277\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2a9\/620\/42c\/2a962042c0aa9513fced55d15f691e0b.gif\"\/><figcaption>\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb <\/figcaption><\/figure>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u043e\u043a\u043e\u0448\u043a\u043e \u0441 \u043f\u043b\u0435\u0435\u0440\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0442\u0438\u0442\u0440\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb.<\/p>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb \u0438\u043b\u0438 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u0438\u043b\u044c\u043c.<\/p>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abX\u00bb \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043b\u0435\u0435\u0440\u043e\u043c.\u00a0<\/p>\n<p>\u0421 \u043a\u043b\u0438\u043a\u0430\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<ol>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u043e\u043a\u043e\u0448\u043a\u043e \u043f\u043b\u0435\u0435\u0440\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043b\u0435\u0432\u044b\u0439 \u043d\u0438\u0436\u043d\u0438\u0439 \u0443\u0433\u043e\u043b;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0425\u00bb \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043d\u0438\u0437\u0443 \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u0436\u0430\u043d\u0440\u043e\u043c \u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \u0438 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043e\u0442\u0441\u0447\u0435\u0442 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u043b \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0443\u043d\u043a\u0442\u044b 1-4\u00a0\u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout, \u043f\u0443\u043d\u043a\u0442 5 \u0431\u0443\u0434\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u2013 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a.<\/p>\n<p><strong>\u041e\u0442 \u0442\u0435\u043e\u0440\u0438\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435:<\/strong><\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c xml-\u0444\u0430\u0439\u043b <em>activity_main.xml<\/em> \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u043d\u0430\u0448\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432.<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;androidx.constraintlayout.motion.widget.MotionLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"     xmlns:tools=\"http:\/\/schemas.android.com\/tools\"     android:id=\"@+id\/motionLayout\"     android:layout_width=\"match_parent\"     android:layout_height=\"match_parent\"     app:layoutDescription=\"@xml\/scene\"     tools:context=\".MainActivity\">      &lt;ImageView         android:id=\"@+id\/poster\"         android:layout_width=\"match_parent\"         android:layout_height=\"match_parent\"         android:scaleType=\"centerCrop\"         app:srcCompat=\"@drawable\/poster\"         tools:ignore=\"ContentDescription\" \/>      &lt;View         android:id=\"@+id\/shadow\"         android:layout_width=\"0dp\"         android:layout_height=\"0dp\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toStartOf=\"parent\"         app:layout_constraintTop_toTopOf=\"parent\"         android:background=\"#99000000\"         tools:ignore=\"ContentDescription\" \/>      &lt;ImageView         android:id=\"@+id\/close\"         android:layout_width=\"wrap_content\"         android:layout_height=\"wrap_content\"         android:layout_marginTop=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:padding=\"16dp\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintTop_toTopOf=\"parent\"         app:srcCompat=\"@drawable\/ic_close_24\"         tools:ignore=\"ContentDescription,ImageContrastCheck\" \/>      &lt;TextView         android:id=\"@+id\/filmTitle\"         android:layout_width=\"0dp\"         android:layout_height=\"wrap_content\"         android:layout_marginStart=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"12dp\"         android:gravity=\"end\"         android:text=\"@string\/vod_title\"         android:textColor=\"#EEEEEE\"         android:textSize=\"24sp\"         app:layout_constraintBottom_toTopOf=\"@id\/filmInfo\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toEndOf=\"@+id\/player\"         app:layout_constraintTop_toTopOf=\"parent\"         app:layout_constraintVertical_bias=\"1.0\"         app:layout_constraintVertical_chainStyle=\"packed\" \/>       &lt;TextView         android:id=\"@+id\/filmInfo\"         android:layout_width=\"0dp\"         android:layout_height=\"wrap_content\"         android:layout_marginStart=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"32dp\"         android:gravity=\"end\"         android:text=\"@string\/vod_detail\"         android:textColor=\"#B2C6DB\"         android:textSize=\"14sp\"         app:layout_constraintBottom_toTopOf=\"@id\/nextFilm\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toEndOf=\"@+id\/player\"         app:layout_constraintTop_toBottomOf=\"@+id\/filmTitle\"         app:layout_constraintVertical_chainStyle=\"packed\" \/>      &lt;androidx.appcompat.widget.AppCompatButton         android:id=\"@+id\/watchCredits\"         android:layout_width=\"wrap_content\"         android:layout_height=\"44dp\"         android:layout_marginEnd=\"10dp\"         android:alpha=\"0.8\"         android:background=\"@drawable\/bg_credits\"         android:gravity=\"center\"         android:paddingLeft=\"20dp\"         android:paddingTop=\"13dp\"         android:paddingRight=\"20dp\"         android:paddingBottom=\"13dp\"         android:text=\"@string\/watch_credits\"         android:textAllCaps=\"false\"         android:textColor=\"@android:color\/white\"         android:textSize=\"12sp\"         android:visibility=\"visible\"         app:layout_constraintBottom_toBottomOf=\"@+id\/nextFilm\"         app:layout_constraintEnd_toStartOf=\"@id\/nextFilm\"         app:layout_constraintTop_toTopOf=\"@id\/nextFilm\"         app:lineSpacing=\"2sp\"         tools:ignore=\"TouchTargetSizeCheck\" \/>      &lt;com.example.motionlayoutsample.ProgressButton         android:id=\"@+id\/nextFilm\"         android:layout_width=\"202dp\"         android:layout_height=\"44dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"80dp\"         android:paddingLeft=\"20dp\"         android:paddingTop=\"13dp\"         android:paddingRight=\"20dp\"         android:paddingBottom=\"13dp\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintTop_toBottomOf=\"@id\/filmInfo\"         app:text=\"@string\/next_film\"         tools:ignore=\"TouchTargetSizeCheck\" \/>      &lt;ImageView         android:id=\"@+id\/player\"         android:layout_width=\"257dp\"         android:layout_height=\"140dp\"         android:src=\"@drawable\/content\"         android:padding=\"2dp\"         android:layout_marginStart=\"24dp\"         android:layout_marginBottom=\"80dp\"         android:background=\"@drawable\/bg_player\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintStart_toStartOf=\"parent\"         tools:ignore=\"ContentDescription\" \/>  &lt;\/androidx.constraintlayout.motion.widget.MotionLayout><\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c :<\/p>\n<ul>\n<li>\n<p>motionLayout \u2013 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>poster \u2013 \u043f\u043e\u0441\u0442\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>shadow \u2013 \u0437\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>close \u2013 \u0438\u043a\u043e\u043d\u043a\u0430 \u00abX\u00bb<\/p>\n<\/li>\n<li>\n<p>filmTitle \u2013 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>filmInfo \u2013 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>watchCredits \u2013 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb<\/p>\n<\/li>\n<li>\n<p>nextFilm \u2013 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb<\/p>\n<\/li>\n<li>\n<p>player \u2013 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0441 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0435\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043b\u0435\u0435\u0440\u0430 (\u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u043a\u043e\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e imageView, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u0435\u0435\u0440. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, FrameLayout).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441\u0446\u0435\u043d\u044b <em>scene.xml<\/em>, \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043d\u0435\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b.<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;MotionScene xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">      &lt;ConstraintSet android:id=\"@+id\/start\">              &lt;\/ConstraintSet>      &lt;ConstraintSet android:id=\"@+id\/end\">              &lt;\/ConstraintSet>      &lt;Transition         android:id=\"@+id\/transition\"         app:duration=\"500\"         app:constraintSetEnd=\"@id\/end\"         app:constraintSetStart=\"@+id\/start\" \/>  &lt;\/MotionScene><\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c :<\/p>\n<ul>\n<li>\n<p>start \u2013 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>end \u2013 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>transition \u2013 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 start \u0438 end, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 duration (\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432 500 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/70d\/25a\/bb4\/70d25abb43a825f933ac20c0ce0a181c.jpg\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 Android Studio\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 Android Studio\" width=\"1600\" height=\"1161\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/70d\/25a\/bb4\/70d25abb43a825f933ac20c0ce0a181c.jpg\" data-blurred=\"true\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 Android Studio<\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443 \u0432 Android Studio, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0438 constraintSet \u043f\u0443\u0441\u0442\u044b\u0435, \u0438 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u043d\u044b\u0439 \u0444\u0430\u0439\u043b scene.xml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;MotionScene xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">        &lt;ConstraintSet android:id=\"@+id\/start\">          &lt;Constraint             android:id=\"@+id\/player\"             android:layout_width=\"0dp\"             android:layout_height=\"0dp\"             app:layout_constraintStart_toStartOf=\"parent\"             app:layout_constraintEnd_toEndOf=\"parent\"             app:layout_constraintBottom_toBottomOf=\"parent\"             app:layout_constraintTop_toTopOf=\"parent\" \/>         &lt;Constraint             android:id=\"@+id\/filmTitle\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"wrap_content\"             android:layout_height=\"wrap_content\"             android:layout_marginEnd=\"24dp\"             app:layout_constraintVertical_chainStyle=\"packed\"             android:layout_marginBottom=\"12dp\"             app:layout_constraintBottom_toTopOf=\"@id\/filmInfo\"             app:layout_constraintVertical_bias=\"1.0\"             app:layout_constraintTop_toBottomOf=\"parent\" \/>         &lt;Constraint             android:layout_marginEnd=\"24dp\"             android:layout_height=\"wrap_content\"             android:layout_marginBottom=\"32dp\"             app:layout_constraintBottom_toTopOf=\"@id\/nextFilm\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"wrap_content\"             app:layout_constraintTop_toBottomOf=\"@+id\/filmTitle\"             app:layout_constraintVertical_chainStyle=\"packed\"             android:id=\"@+id\/filmInfo\" \/>         &lt;Constraint             android:id=\"@+id\/shadow\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"0dp\"             android:layout_height=\"0dp\"             app:layout_constraintBottom_toBottomOf=\"parent\"             app:layout_constraintTop_toTopOf=\"parent\"             app:layout_constraintStart_toStartOf=\"parent\"             android:visibility=\"invisible\" \/>         &lt;Constraint             android:id=\"@+id\/close\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"wrap_content\"             android:layout_height=\"wrap_content\"             android:layout_marginEnd=\"28dp\"             app:layout_constraintTop_toTopOf=\"parent\"             android:layout_marginTop=\"28dp\"             android:visibility=\"invisible\" \/>     &lt;\/ConstraintSet>      &lt;ConstraintSet android:id=\"@+id\/end\">          &lt;Constraint             android:id=\"@+id\/poster\"             android:layout_width=\"match_parent\"             android:layout_height=\"match_parent\" \/>         &lt;Constraint             android:id=\"@+id\/shadow\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"0dp\"             android:layout_height=\"0dp\"             app:layout_constraintBottom_toBottomOf=\"parent\"             app:layout_constraintTop_toTopOf=\"parent\"             app:layout_constraintStart_toStartOf=\"parent\"             android:visibility=\"visible\" \/>         &lt;Constraint             android:id=\"@+id\/close\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"wrap_content\"             android:layout_height=\"wrap_content\"             android:layout_marginEnd=\"28dp\"             app:layout_constraintTop_toTopOf=\"parent\"             android:layout_marginTop=\"28dp\"             android:visibility=\"visible\" \/>         &lt;Constraint             android:id=\"@+id\/filmTitle\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"0dp\"             android:layout_height=\"wrap_content\"             android:layout_marginEnd=\"24dp\"             android:layout_marginStart=\"24dp\"             app:layout_constraintVertical_chainStyle=\"packed\"             app:layout_constraintTop_toTopOf=\"parent\"             app:layout_constraintStart_toEndOf=\"@+id\/player\"             android:layout_marginBottom=\"12dp\"             app:layout_constraintBottom_toTopOf=\"@id\/filmInfo\"             app:layout_constraintVertical_bias=\"1.0\" \/>         &lt;Constraint             android:id=\"@+id\/filmInfo\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"0dp\"             android:layout_height=\"wrap_content\"             android:layout_marginEnd=\"24dp\"             android:layout_marginStart=\"24dp\"             app:layout_constraintVertical_chainStyle=\"packed\"             app:layout_constraintStart_toEndOf=\"@+id\/player\"             android:layout_marginBottom=\"32dp\"             app:layout_constraintBottom_toTopOf=\"@id\/nextFilm\"             app:layout_constraintTop_toBottomOf=\"@+id\/filmTitle\" \/>         &lt;Constraint             android:id=\"@+id\/watchCredits\"             android:layout_width=\"wrap_content\"             android:layout_height=\"44dp\"             android:visibility=\"visible\"             android:layout_marginEnd=\"10dp\"             app:layout_constraintTop_toTopOf=\"@id\/nextFilm\"             app:layout_constraintEnd_toStartOf=\"@id\/nextFilm\"             app:layout_constraintBottom_toBottomOf=\"@+id\/nextFilm\"             android:alpha=\"0.8\" \/>         &lt;Constraint             android:id=\"@+id\/nextFilm\"             app:layout_constraintEnd_toEndOf=\"parent\"             android:layout_width=\"202dp\"             android:layout_height=\"44dp\"             android:layout_marginEnd=\"24dp\"             app:layout_constraintBottom_toBottomOf=\"parent\"             android:layout_marginBottom=\"80dp\"             app:layout_constraintTop_toBottomOf=\"@id\/filmInfo\" \/>         &lt;Constraint             android:id=\"@+id\/player\"             android:layout_width=\"257dp\"             android:layout_height=\"140dp\"             app:layout_constraintBottom_toBottomOf=\"parent\"             android:layout_marginBottom=\"80dp\"             android:layout_marginStart=\"24dp\"             app:layout_constraintStart_toStartOf=\"parent\" \/>     &lt;\/ConstraintSet>      &lt;Transition         android:id=\"@+id\/transition\"         app:duration=\"500\"         app:constraintSetEnd=\"@id\/end\"         app:constraintSetStart=\"@+id\/start\" \/>  &lt;\/MotionScene><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 ConstraintSet \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c start \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c end, \u2013 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/671\/53d\/edc\/67153dedc4a78194de5ccc257a7ffd75.gif\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 Android studio \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 0.25x (\u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0432\u043d\u0435\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434)\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 Android studio \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 0.25x (\u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0432\u043d\u0435\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434)\" width=\"1132\" height=\"860\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/671\/53d\/edc\/67153dedc4a78194de5ccc257a7ffd75.gif\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 Android studio \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 0.25x (\u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0432\u043d\u0435\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434)<\/figcaption><\/figure>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430, \u043d\u043e \u043c\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u043f\u0440\u043e \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c \u2014 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0435\u0440\u0438\u044f\u00bb \u0434\u043e\u043b\u0436\u043d\u0430 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u044f\u0441\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u0415\u0441\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout, \u0442\u043e \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0438\u043d\u0430\u0447\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u043e\u043c \u2014 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0441\u0446\u0435\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">import android.animation.ValueAnimator import android.content.Context import android.os.Parcel import android.os.Parcelable import android.util.AttributeSet import android.view.Gravity import android.widget.ImageView import android.widget.LinearLayout import android.widget.ProgressBar import android.widget.TextView import androidx.cardview.widget.CardView import androidx.core.animation.addListener import androidx.core.content.ContextCompat import androidx.core.content.res.use  class ProgressButton @JvmOverloads constructor(     context: Context,     attrs: AttributeSet? = null,     defStyleAttr: Int = 0 ) : CardView(context, attrs, defStyleAttr) {      var onCountDown: (() -> Unit)? = null     private var clickListener: OnClickListener? = null      private val textView = TextView(context).apply {         gravity = Gravity.CENTER         setTextColor(             ContextCompat.getColor(context, R.color.progress_button_text_color)         )         isAllCaps = false         layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {             setPadding(0, 0, 12.toPx, 0)         }     }     private val imageView = ImageView(context).apply {         setImageResource(R.drawable.ic_player_next)         layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)     }      private val progressBar =         ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal).apply {             max = 100             progress = if (isInEditMode) 70 else 0             isIndeterminate = false             layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)             progressDrawable = ContextCompat.getDrawable(                 context, R.drawable.next_episode_progress_bar_states             )         }       private val animator = ValueAnimator.ofInt(0, 100).apply {         addUpdateListener {             progressBar.progress = it.animatedValue as Int         }         addListener(             onEnd = {                 if (animatedValue == 100) {                     onCountDown?.invoke()                 }             }         )         duration = 7000     }      fun startProgress() {         if (!animator.isRunning) {             animator.start()         }     }      fun cancelProgress() {         animator.cancel()     }      init {         addView(progressBar)         addView(             LinearLayout(context).apply {                 orientation = LinearLayout.HORIZONTAL                 layoutParams =                     LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {                         gravity = Gravity.CENTER                     }                 gravity = Gravity.CENTER                 addView(textView)                 addView(imageView)             }         )         radius = 7.toPx.toFloat()         super.setOnClickListener {             animator.cancel()             clickListener?.onClick(it)         }         setBackgroundResource(R.drawable.next_episode_button_stroke)         context.theme.obtainStyledAttributes(             attrs,             R.styleable.PlayerNextEpisodeButton,             0, 0         ).use {             textView.text = it.getString(R.styleable.PlayerNextEpisodeButton_text)         }         isSaveEnabled = true     }      override fun setOnClickListener(l: OnClickListener?) {         clickListener = l     }      override fun onDetachedFromWindow() {         super.onDetachedFromWindow()         cancelProgress()         onCountDown = null     }      override fun onSaveInstanceState(): Parcelable? {         val superState = super.onSaveInstanceState()         superState?.let {             val state = SavedState(superState)             state.progressBarState = progressBar.onSaveInstanceState()             state.isProgressRunning = animator.isRunning             state.currentPlayTime = animator.currentPlayTime             return state         } ?: run {             return superState         }     }      override fun onRestoreInstanceState(state: Parcelable?) {         when (state) {             is SavedState -> {                 super.onRestoreInstanceState(state.superState)                 progressBar.onRestoreInstanceState(state.progressBarState)                 if (state.isProgressRunning) {                     animator.currentPlayTime = state.currentPlayTime                     startProgress()                 }             }             else -> {                 super.onRestoreInstanceState(state)             }         }     }      private class SavedState : BaseSavedState {         var progressBarState: Parcelable? = null         var isProgressRunning = false         var currentPlayTime = 0L          constructor(parcel: Parcel) : super(parcel) {             progressBarState = parcel.readParcelable(ProgressBar::class.java.classLoader)             isProgressRunning = parcel.readInt() == 1             currentPlayTime = parcel.readLong()         }          constructor (parcelable: Parcelable?) : super(parcelable)          override fun writeToParcel(out: Parcel?, flags: Int) {             super.writeToParcel(out, flags)             out?.writeParcelable(progressBarState, flags)             out?.writeInt(if (isProgressRunning) 1 else 0)             out?.writeLong(currentPlayTime)         }          companion object {             @Suppress(\"unused\")             @JvmField             val CREATOR = object : Parcelable.Creator&lt;SavedState> {                 override fun createFromParcel(source: Parcel): SavedState {                     return SavedState(source)                 }                  override fun newArray(size: Int): Array&lt;SavedState?> {                     return arrayOfNulls(size)                 }             }         }     }  }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u043e\u043c, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 ValueAnimator, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043c\u0435\u043d\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n<ul>\n<li>\n<p><code>startProgress()<\/code> \u2013 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/p>\n<\/li>\n<li>\n<p><code>cancelProgress()<\/code> \u2013 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76b\/fd1\/933\/76bfd1933ac0372bfc5f3ff535d79165.gif\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435\" width=\"600\" height=\"338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76b\/fd1\/933\/76bfd1933ac0372bfc5f3ff535d79165.gif\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430\u044f \u0432\u0430\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.\u00a0<\/p>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<p><code>motionLayout.transitionToEnd()<\/code> \u2013 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f start \u043a end<\/p>\n<p><code>motionLayout.transitionToStart()<\/code> \u2013 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f end \u043a start<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043a \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c \u043a\u043d\u043e\u043f\u043e\u043a.<\/p>\n<pre><code class=\"kotlin\">close.setOnClickListener {     nextFilm.cancelProgress() } player.setOnClickListener {     motionLayout.transitionToStart()     nextFilm.cancelProgress() } watchCredits.setOnClickListener {     motionLayout.transitionToStart()     nextFilm.cancelProgress() } nextFilm.setOnClickListener {     motionLayout.transitionToStart()     nextFilm.cancelProgress() } nextFilm.onCountDown = {     nextFilm.performClick() }<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430 progressButton \u2013 \u044d\u0442\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c startProgress(), cancelProgress().<\/p>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044e \u0442\u0438\u0442\u0440\u043e\u0432.<\/p>\n<p><code>nextFilm.startProgress()<\/code><\/p>\n<p><code>motionLayout.transitionToEnd()<\/code><\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c, \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0435\u043d\u0430, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442: \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e:<\/p>\n<pre><code class=\"kotlin\">class MainViewModel : ViewModel() {     var motionLayoutState : Bundle? = null }  class MainActivity : AppCompatActivity() {      private val viewModel by viewModels&lt;MainViewModel>()     private lateinit var binding: ActivityMainBinding      override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)                  viewModel.motionLayoutState?.let {             binding.motionLayout.transitionState = it         }     }      override fun onSaveInstanceState(outState: Bundle) {         viewModel.motionLayoutState = binding.motionLayout.transitionState         super.onSaveInstanceState(outState)     } }<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 MotionLayout \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e viewModel, \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0446\u0435\u043d\u0430 \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e progressButton \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043a\u043e\u0434 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63bdbc633afabae0665017f0\" data-style=\"\" id=\"63bdbc633afabae0665017f0\" width=\"\"><\/div>\n<p><strong>\u041a\u0430\u043a\u043e\u0432 \u0438\u0442\u043e\u0433?<\/strong><\/p>\n<p>MotionLayout \u2013 \u043c\u043e\u0449\u043d\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 Android, \u043d\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u043d\u0435 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c c \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u044f \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0443\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f! \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0438\u0437 \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MotionLayout \u2013 <strong>\u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438<\/strong>.<\/p>\n<p>\u041c\u043e\u0438 \u043a\u043e\u043b\u043b\u0435\u0433\u0438 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0432\u043e\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 \u0444\u0438\u0447\u0435, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0438\u0445 \u0442\u0440\u0443\u0434\u0430\u043c\u0438:<\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/681456\/\">\u041f\u0440\u043e \u0441\u0430\u043c\u0443 \u0444\u0438\u0447\u0443 Autoplay \u0432 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0438\u043d\u043e\u0442\u0435\u0430\u0442\u0440\u0435<\/a><\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/692074\/\">\u041f\u0440\u043e \u043d\u044e\u0430\u043d\u0441\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0438\u0447\u0438 \u043d\u0430 tvOS<\/a><\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/694384\/\">\u041f\u0440\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0444\u0438\u0447\u0438 \u043d\u0430 Angular \u043f\u043e\u0434 SmartTV<\/a><\/p>\n<p>\u0410 \u0435\u0449\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u043f\u0440\u043e \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0438\u0447\u0443 KION, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430 \u2013 \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u0442\u0438\u0442\u0440\u043e\u0432.<\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/661531\/\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u0440\u043e \u0441\u0430\u043c\u0443 \u0444\u0438\u0447\u0443<\/a><\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/671922\/\">\u041f\u0440\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Computed Properties \u0432 Angular<\/a><\/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\/company\/ru_mts\/blog\/709958\/\"> https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/709958\/<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0432\u0435\u043b \u0411\u0435\u043b\u043e\u0432\u043e\u043b, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/kion.ru\/home\">\u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0438\u043d\u043e\u0442\u0435\u0430\u0442\u0440\u0430 KION<\/a> \u0432 <a href=\"https:\/\/career.habr.com\/companies\/mts\/vacancies\">\u041c\u0422\u0421 Digital<\/a>. \u042d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/company\/ru_mts\/blog\/694384\/\">\u0441\u0435\u0440\u0438\u0430\u043b\u0430 \u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u0444\u0438\u0447\u0438 Autoplay<\/a> \u0432 KION, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u0432\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MotionLayout \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u0437\u0430\u0434\u0430\u0447\u0438 \u0432 KION. \u0418\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c MotionLayout, \u0430 \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0432\u043e\u0434\u043d\u0430\u044f:<\/strong><\/p>\n<p>MotionLayout \u2013 \u044d\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e MotionLayout \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.android.com\/training\/constraint-layout\/motionlayout\"><u>\u0442\u0443\u0442<\/u><\/a><u>.<\/u><\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0430\u0448\u0435\u0439 \u0444\u0438\u0447\u0435.<\/p>\n<p>\u041d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0432\u0441\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430 \u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c, \u043d\u043e \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u043e\u0438\u0441\u043a, \u0430\u043d\u0430\u043b\u0438\u0437 \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041c\u044b \u0432 KION \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0440\u0438\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u043e\u043c. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0437\u0440\u0438\u0442\u0435\u043b\u044e.<\/p>\n<p>\u041e\u0431\u0441\u0443\u0434\u0438\u0432 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>api, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0435\u0440\u043d\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u0438\u043b\u044c\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0444\u0438\u043b\u044c\u043c, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 api.<\/p>\n<\/li>\n<\/ul>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 api, \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0430pi \u0443 \u043d\u0430\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043b\u0443\u0447\u0448\u0438\u0439 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c.<\/p>\n<p>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043c\u044b \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2013 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0444\u0438\u043b\u044c\u043c \u0434\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u0442\u0440\u043e\u0432, \u0443 \u043d\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<figure class=\"\"><figcaption>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0416\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/figcaption><\/figure>\n<p>\u041e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0444\u0438\u043b\u044c\u043c \u0434\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u0442\u0440\u043e\u0432, \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c \u043e\u0442 api. \u0418 \u0435\u0441\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043a\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u043e\u0431\u0449\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0440\u0430 \u0438\u0433\u0440\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u043a\u043d\u043e\u043f\u043a\u0438. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0437\u0430\u0434 \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430.<\/p>\n<figure class=\"full-width\"><figcaption>\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb <\/figcaption><\/figure>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u043e\u043a\u043e\u0448\u043a\u043e \u0441 \u043f\u043b\u0435\u0435\u0440\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0443 \u0442\u0438\u0442\u0440\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb.<\/p>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb \u0438\u043b\u0438 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u0438\u043b\u044c\u043c.<\/p>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abX\u00bb \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043b\u0435\u0435\u0440\u043e\u043c.\u00a0<\/p>\n<p>\u0421 \u043a\u043b\u0438\u043a\u0430\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<ol>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u043e\u043a\u043e\u0448\u043a\u043e \u043f\u043b\u0435\u0435\u0440\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043b\u0435\u0432\u044b\u0439 \u043d\u0438\u0436\u043d\u0438\u0439 \u0443\u0433\u043e\u043b;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0425\u00bb \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043d\u0438\u0437\u0443 \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u0436\u0430\u043d\u0440\u043e\u043c \u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb \u0438 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043e\u0442\u0441\u0447\u0435\u0442 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u043b \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0443\u043d\u043a\u0442\u044b 1-4\u00a0\u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout, \u043f\u0443\u043d\u043a\u0442 5 \u0431\u0443\u0434\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MotionLayout, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u2013 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a.<\/p>\n<p><strong>\u041e\u0442 \u0442\u0435\u043e\u0440\u0438\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435:<\/strong><\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c xml-\u0444\u0430\u0439\u043b <em>activity_main.xml<\/em> \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u043d\u0430\u0448\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432.<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;androidx.constraintlayout.motion.widget.MotionLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"     xmlns:tools=\"http:\/\/schemas.android.com\/tools\"     android:id=\"@+id\/motionLayout\"     android:layout_width=\"match_parent\"     android:layout_height=\"match_parent\"     app:layoutDescription=\"@xml\/scene\"     tools:context=\".MainActivity\">      &lt;ImageView         android:id=\"@+id\/poster\"         android:layout_width=\"match_parent\"         android:layout_height=\"match_parent\"         android:scaleType=\"centerCrop\"         app:srcCompat=\"@drawable\/poster\"         tools:ignore=\"ContentDescription\" \/>      &lt;View         android:id=\"@+id\/shadow\"         android:layout_width=\"0dp\"         android:layout_height=\"0dp\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toStartOf=\"parent\"         app:layout_constraintTop_toTopOf=\"parent\"         android:background=\"#99000000\"         tools:ignore=\"ContentDescription\" \/>      &lt;ImageView         android:id=\"@+id\/close\"         android:layout_width=\"wrap_content\"         android:layout_height=\"wrap_content\"         android:layout_marginTop=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:padding=\"16dp\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintTop_toTopOf=\"parent\"         app:srcCompat=\"@drawable\/ic_close_24\"         tools:ignore=\"ContentDescription,ImageContrastCheck\" \/>      &lt;TextView         android:id=\"@+id\/filmTitle\"         android:layout_width=\"0dp\"         android:layout_height=\"wrap_content\"         android:layout_marginStart=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"12dp\"         android:gravity=\"end\"         android:text=\"@string\/vod_title\"         android:textColor=\"#EEEEEE\"         android:textSize=\"24sp\"         app:layout_constraintBottom_toTopOf=\"@id\/filmInfo\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toEndOf=\"@+id\/player\"         app:layout_constraintTop_toTopOf=\"parent\"         app:layout_constraintVertical_bias=\"1.0\"         app:layout_constraintVertical_chainStyle=\"packed\" \/>       &lt;TextView         android:id=\"@+id\/filmInfo\"         android:layout_width=\"0dp\"         android:layout_height=\"wrap_content\"         android:layout_marginStart=\"24dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"32dp\"         android:gravity=\"end\"         android:text=\"@string\/vod_detail\"         android:textColor=\"#B2C6DB\"         android:textSize=\"14sp\"         app:layout_constraintBottom_toTopOf=\"@id\/nextFilm\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintStart_toEndOf=\"@+id\/player\"         app:layout_constraintTop_toBottomOf=\"@+id\/filmTitle\"         app:layout_constraintVertical_chainStyle=\"packed\" \/>      &lt;androidx.appcompat.widget.AppCompatButton         android:id=\"@+id\/watchCredits\"         android:layout_width=\"wrap_content\"         android:layout_height=\"44dp\"         android:layout_marginEnd=\"10dp\"         android:alpha=\"0.8\"         android:background=\"@drawable\/bg_credits\"         android:gravity=\"center\"         android:paddingLeft=\"20dp\"         android:paddingTop=\"13dp\"         android:paddingRight=\"20dp\"         android:paddingBottom=\"13dp\"         android:text=\"@string\/watch_credits\"         android:textAllCaps=\"false\"         android:textColor=\"@android:color\/white\"         android:textSize=\"12sp\"         android:visibility=\"visible\"         app:layout_constraintBottom_toBottomOf=\"@+id\/nextFilm\"         app:layout_constraintEnd_toStartOf=\"@id\/nextFilm\"         app:layout_constraintTop_toTopOf=\"@id\/nextFilm\"         app:lineSpacing=\"2sp\"         tools:ignore=\"TouchTargetSizeCheck\" \/>      &lt;com.example.motionlayoutsample.ProgressButton         android:id=\"@+id\/nextFilm\"         android:layout_width=\"202dp\"         android:layout_height=\"44dp\"         android:layout_marginEnd=\"24dp\"         android:layout_marginBottom=\"80dp\"         android:paddingLeft=\"20dp\"         android:paddingTop=\"13dp\"         android:paddingRight=\"20dp\"         android:paddingBottom=\"13dp\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintEnd_toEndOf=\"parent\"         app:layout_constraintTop_toBottomOf=\"@id\/filmInfo\"         app:text=\"@string\/next_film\"         tools:ignore=\"TouchTargetSizeCheck\" \/>      &lt;ImageView         android:id=\"@+id\/player\"         android:layout_width=\"257dp\"         android:layout_height=\"140dp\"         android:src=\"@drawable\/content\"         android:padding=\"2dp\"         android:layout_marginStart=\"24dp\"         android:layout_marginBottom=\"80dp\"         android:background=\"@drawable\/bg_player\"         app:layout_constraintBottom_toBottomOf=\"parent\"         app:layout_constraintStart_toStartOf=\"parent\"         tools:ignore=\"ContentDescription\" \/>  &lt;\/androidx.constraintlayout.motion.widget.MotionLayout><\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c :<\/p>\n<ul>\n<li>\n<p>motionLayout \u2013 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>poster \u2013 \u043f\u043e\u0441\u0442\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>shadow \u2013 \u0437\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>close \u2013 \u0438\u043a\u043e\u043d\u043a\u0430 \u00abX\u00bb<\/p>\n<\/li>\n<li>\n<p>filmTitle \u2013 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>filmInfo \u2013 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>watchCredits \u2013 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0438\u0442\u0440\u044b\u00bb<\/p>\n<\/li>\n<li>\n<p>nextFilm \u2013 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u043c\u00bb<\/p>\n<\/li>\n<li>\n<p>player \u2013 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0441 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0435\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043b\u0435\u0435\u0440\u0430 (\u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u043a\u043e\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e imageView, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u0435\u0435\u0440. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, FrameLayout).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441\u0446\u0435\u043d\u044b <em>scene.xml<\/em>, \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043d\u0435\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b.<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;MotionScene xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">      &lt;ConstraintSet android:id=\"@+id\/start\">              &lt;\/ConstraintSet>      &lt;ConstraintSet android:id=\"@+id\/end\">              &lt;\/ConstraintSet>      &lt;Transition         android:id=\"@+id\/transition\"         app:duration=\"500\"         app:constraintSetEnd=\"@id\/end\"         app:constraintSetStart=\"@+id\/start\" \/>  &lt;\/MotionScene><\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c :<\/p>\n<ul>\n<li>\n<p>start \u2013 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>end \u2013 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>transition \u2013 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 start \u0438 end, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 duration (\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432 500 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 Android Studio<\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443 \u0432 Android Studio, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0438 constraintSet \u043f\u0443\u0441\u0442\u044b\u0435, \u0438 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u043d\u044b\u0439 \u0444\u0430\u0439\u043b scene.xml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?> &lt;MotionScene xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"     xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">        &lt;ConstraintSet android:id=\"@+id\/start\">          &lt;Constraint             android:id=\"@+id\/player\"             android:layout_width=\"0dp\"             android:layout_height=\"0dp\"             app:layout_constraintStart_toStartOf=\"parent\"            <\/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-343835","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343835","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=343835"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343835\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=343835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=343835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=343835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}