{"id":337374,"date":"2022-08-22T15:00:21","date_gmt":"2022-08-22T15:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=337374"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=337374","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 Jetpack Compose<\/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>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041d\u043e \u044f \u0435\u0449\u0451 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043f\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \u0432 Compose \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0434\u043e\u043a\u043b\u0430\u0434 \u0434\u043b\u044f \u043c\u0430\u0439\u0441\u043a\u043e\u0433\u043e <a href=\"https:\/\/mobiusconf.com\/?utm_source=habr&amp;utm_medium=683656\">Mobius<\/a>. \u0410 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u044e\u0431\u0438\u0442 \u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u044c, \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e. \u0412 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u0438\u0434\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u043c \u0432\u0441\u0435 \u0448\u0430\u0433\u0438 \u043f\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/9e9\/ca9\/b37\/9e9ca9b37c92dd95a5be601be12c3d12.jpg\" width=\"2651\" height=\"1559\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9e9\/ca9\/b37\/9e9ca9b37c92dd95a5be601be12c3d12.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u0417\u0430\u0447\u0435\u043c \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438?<\/h3>\n<p>\u0427\u0435\u043b\u043e\u0432\u0435\u043a\u0443 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.\u00a0\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c\u0438 \u0432 \u0436\u0438\u0437\u043d\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e, \u0430 \u043d\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.\u00a0\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043f\u0438\u0442\u044c \u043a\u043e\u0444\u0435, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0441\u0432\u0430\u0440\u0438\u0442\u044c. \u0410 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043a \u043a\u043e\u0444\u0435\u043c\u0430\u0448\u0438\u043d\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0430\u043a\u0430\u043d, \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0448\u0443\u0440\u0448\u0430\u043d\u0438\u0435 \u043a\u043e\u0444\u0435\u0439\u043d\u044b\u0445 \u0437\u0451\u0440\u0435\u043d, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u043d\u043a\u0430 \u2026 \u043d\u0443 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430, \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430: \u044d\u043a\u0440\u0430\u043d\u0430\u043c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043f\u0440\u043e\u0444\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e:<\/p>\n<ul>\n<li>\n<p>\u041e\u043d\u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u0443 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430? \u041e\u0442\u0432\u0435\u0442 \u2014\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0434\u0430, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n<ol>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0443\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u0442\u043e \u043e\u043d\u043e, \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e, \u0441\u0442\u0430\u043d\u0435\u0442 \u0444\u0430\u0432\u043e\u0440\u0438\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u044e\u0442 \u00ab\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0434 \u0441\u043b\u043e\u0432\u043e\u043c \u00ab\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0443 \u043d\u0435 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0438\u043b\u0438 \u0444\u0440\u0438\u0437\u0438\u043d\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0434\u043e\u043b\u0433\u0438\u0435 \u0438 \u0447\u0430\u0441\u0442\u044b\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445).<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u044b\u043c. \u0412\u0435\u0434\u044c \u043a\u043e\u0433\u0434\u0430 \u044d\u043a\u0440\u0430\u043d \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0432\u0438\u0441, \u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u044e\u0442 \u043e\u0442\u043a\u043b\u0438\u043a\u0430, \u0438 \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043d\u0435\u0440\u0432\u043d\u043e \u0442\u0430\u043f\u0430\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u0443.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0446\u0435\u043b\u044b\u0439 \u0430\u0440\u0441\u0435\u043d\u0430\u043b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0437\u0430\u0447\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u2014 \u0441\u0432\u043e\u0451 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u0443\u0442\u0438 \u0438 \u043e\u0431\u0441\u0443\u0434\u0438\u043c, \u043a\u0430\u043a \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0412 <em>Jetpack Compose<\/em> \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439: \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u0438 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u044d\u043a\u0441\u043a\u0443\u0440\u0441 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u0438, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c\u0438 <a href=\"https:\/\/material.io\/design\/motion\/the-motion-system.html\">Material Design Motion<\/a>.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 4 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p><strong>AnimatedVisibility<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>AnimatedContent<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Crossfade<\/strong><\/p>\n<\/li>\n<li>\n<p>Modifier.<strong>animateContentSize<\/strong><\/p>\n<\/li>\n<\/ol>\n<h3>AnimatedVisibility<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. <em>AnimatedVisibility<\/em> \u2014 \u044d\u0442\u043e composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 2 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"kotlin\">@ExperimentalAnimationApi @Composable fun AnimatedVisibility(     visible: Boolean,     modifier: Modifier = Modifier,     enter: EnterTransition = fadeIn() + expandIn(),     exit: ExitTransition = shrinkOut() + fadeOut(),     content: @Composable() AnimatedVisibilityScope.() -> Unit ) {...}<\/code><\/pre>\n<p> \u0438<\/p>\n<pre><code class=\"kotlin\">@ExperimentalAnimationApi @Composable fun AnimatedVisibility(     visibleState: MutableTransitionState&lt;Boolean>,     modifier: Modifier = Modifier,     enter: EnterTransition = fadeIn() + expandIn(),     exit: ExitTransition = fadeOut() + shrinkOut(),     content: @Composable() AnimatedVisibilityScope.() -> Unit ) {...}<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>visible<\/strong> \u0441 \u0442\u0438\u043f\u043e\u043c <em>Boolean<\/em>, \u0430 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>visibleState <\/strong>\u0441 \u0442\u0438\u043f\u043e\u043c <em>MutableTransitionState.<\/em> \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <em>MutableTransitionState \u2014<\/em> \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>enter<\/strong> c \u0442\u0438\u043f\u043e\u043c <em>EnterTransition.<\/em> \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>EnterTransition <\/em>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412 <em>Jetpack Compose<\/em> \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 8 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3db\/760\/096\/3db760096c79e06917f7a27f7b7700de.gif\" alt=\"EnterTransition. \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\" title=\"EnterTransition. \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\" width=\"800\" height=\"323\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3db\/760\/096\/3db760096c79e06917f7a27f7b7700de.gif\"\/><figcaption>EnterTransition. \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>exit<\/strong> c \u0442\u0438\u043f\u043e\u043c <em>ExitTransition.<\/em> \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>ExitTransition <\/em>\u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u0447\u0435\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 <em>EnterTransition<\/em> \u0432 <em>Jetpack Compose<\/em> \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 8 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 <em>ExitTransition<\/em>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/224\/97f\/a44\/22497fa44fb5c66667e6991f29210a59.gif\" alt=\"ExitTransition.  \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\" title=\"ExitTransition.  \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\" width=\"800\" height=\"330\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/224\/97f\/a44\/22497fa44fb5c66667e6991f29210a59.gif\"\/><figcaption>ExitTransition.  \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u0438 \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>AnimatedVisibility<\/em> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <strong>content<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c,\u00a0composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>AnimatedVisibility<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 <u>composable-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/u>. \u0412\u043d\u0443\u0442\u0440\u044c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <em>AnimatedVisibility<\/em> \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">AnimatedVisibility(     visible = visible,     enter = slideInHorizontally() + expandHorizontally(expandFrom = Alignment.End)         + fadeIn(),     exit = slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })          + shrinkHorizontally() + fadeOut(), ) {     Image(         modifier = Modifier.fillMaxWidth(),         painter = painterResource(id = R.drawable.ic_logo),         contentDescription = \"\",     ) }<\/code><\/pre>\n<p>\u0410 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/p>\n<pre><code class=\"kotlin\">AnimatedVisibility(     visible = visible,     enter = fadeIn(animationSpec = tween(durationMillis = 300, easing = LinearEasing)),     exit = fadeOut(animationSpec = tween(durationMillis = 300)), ) {     Image(         modifier = Modifier.fillMaxWidth(),         painter = painterResource(id = R.drawable.ic_logo),         contentDescription = \"\",     ) }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u044d\u0442\u0438 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b \u0437\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u2014 \u0440\u0430\u0437\u043d\u044b\u0435 <em>EnterTransition<\/em> \u0438 <em>ExitTransition<\/em>. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c:<\/p>\n<pre><code class=\"kotlin\">enter = slideInHorizontally()  + expandHorizontally(expandFrom = Alignment.End)  + fadeIn(), exit = slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })  + shrinkHorizontally()  + fadeOut(),<\/code><\/pre>\n<p>\u0410 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e:<\/p>\n<pre><code class=\"kotlin\"> enter = fadeIn(animationSpec = tween(durationMillis = 300, easing = LinearEasing)),  exit = fadeOut(animationSpec = tween(durationMillis = 300)),<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 <em>Transition<\/em>-\u044b, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u041a\u0441\u0442\u0430\u0442\u0438, \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u00ab\u0432\u043e\u043b\u0448\u0435\u0431\u043d\u043e\u0433\u043e\u00bb \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u00ab+\u00bb \u043c\u0435\u0436\u0434\u0443 <em>Transition. <\/em>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"bordered\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a5c\/eaa\/357\/a5ceaa357b3a6fccb8e077d7098a1058.gif\" alt=\"AnimatedVisibility\" title=\"AnimatedVisibility\" width=\"360\" height=\"697\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a5c\/eaa\/357\/a5ceaa357b3a6fccb8e077d7098a1058.gif\"\/><figcaption>AnimatedVisibility<\/figcaption><\/figure>\n<h3>AnimatedContent<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0435\u0439\u0442\u0430. <em>AnimatedContent<\/em> \u2014 \u044d\u0442\u043e composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440:<\/p>\n<pre><code class=\"kotlin\">fun &lt;S> AnimatedContent(     targetState: S,     modifier: Modifier = Modifier,     transitionSpec: AnimatedContentScope&lt;S>.() -> ContentTransform = {         fadeIn(animationSpec = tween(220, delayMillis = 90)) with fadeOut(animationSpec = tween(90))     },     contentAlignment: Alignment = Alignment.TopStart,     content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) {...}<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0438 \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>AnimatedContent,<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>targetState<\/strong>, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>transitionSpec. TransitionSpec<\/strong> \u2014 \u044d\u0442\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0441\u0442\u0435\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435 \u0436\u0435 \u0442\u0438\u043f\u044b \u0442\u0440\u0430\u0437\u0438\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <em>AnimatedVisibility<\/em>.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>AnimatedContent<\/em> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0441\u0430\u043c <strong>content<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041a\u0430\u043a \u0438 <em>AnimatedVisibility, AnimatedContent <\/em>\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <u>composable-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/u>.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>AnimatedContent<\/em>, \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">AnimatedContent(     targetState = state,         transitionSpec = {             fadeIn(animationSpec = tween(durationMillis = 150)) with                 fadeOut(animationSpec = tween(durationMillis = 150)) using                 SizeTransform { initialSize, targetSize ->                     if (targetState == State.EXPAND) {                         keyframes {                             IntSize(initialSize.width, initialSize.height) at 150                             durationMillis = 300                         }                     } else {                         keyframes {                             IntSize(targetSize.width, targetSize.height) at 150                             durationMillis = 300                         }                     }                 }         } ) { targetExpanded ->     if (targetExpanded == State.EXPAND) {         Collapsed()     } else {         Expanded()     } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c <strong>state<\/strong> \u0432\u043d\u0443\u0442\u0440\u044c \u043a composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>AnimatedContent<\/em>. \u0423 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0435\u0439\u0442\u0430<strong> <\/strong>\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: <em>Expanded<\/em> \u0438\u043b\u0438 <em>Collapsed<\/em>.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 <em>transition<\/em>-\u043e\u0432:<\/p>\n<pre><code class=\"kotlin\">transitionSpec = {     fadeIn(animationSpec = tween(durationMillis = 150)) with         fadeOut(animationSpec = tween(durationMillis = 150)) using         SizeTransform { initialSize, targetSize ->             if (targetState == State.EXPAND) {                 keyframes {                     IntSize(initialSize.width, initialSize.height) at 150                     durationMillis = 300                 }             } else {                 keyframes {                     IntSize(targetSize.width, targetSize.height) at 150                     durationMillis = 300                 }             }         } }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <em>EnterTransition<\/em> \u0438 <em>ExitTransition<\/em>-\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <strong>with<\/strong>.<\/p>\n<pre><code class=\"kotlin\">fadeIn(animationSpec = tween(durationMillis = 150)) with     fadeOut(animationSpec = tween(durationMillis = 150))<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <strong>using<\/strong> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <em>SizeTransform<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u0423 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <em>SizeTransform <\/em>\u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u0430\u043a \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u0442\u0430\u043a \u0438 \u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c\u0443 (\u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443) \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 <em>SizeTransform<\/em> \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043b\u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<pre><code class=\"kotlin\">SizeTransform { initialSize, targetSize ->     if (targetState == State.EXPAND) {         keyframes {             IntSize(initialSize.width, initialSize.height) at 150             durationMillis = 300         }     } else {         keyframes {             IntSize(targetSize.width, targetSize.height) at 150             durationMillis = 300         }     } }<\/code><\/pre>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>Experimental.<\/strong><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67a\/36f\/f7f\/67a36ff7f7fee4f22dd38e9dbac7c1e0.gif\" alt=\"AnimatedContent\" title=\"AnimatedContent\" width=\"480\" height=\"246\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67a\/36f\/f7f\/67a36ff7f7fee4f22dd38e9dbac7c1e0.gif\"\/><figcaption>AnimatedContent<\/figcaption><\/figure>\n<h3>Crossfade<\/h3>\n<p><em>Crossfade<\/em>\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0451\u0441\u0442\u043d\u043e\u0433\u043e \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f (<em>fade<\/em>-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439). \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u0441\u0442\u0435\u0439\u0442\u0430), \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f. <em>Crossfade<\/em> \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440:<\/p>\n<pre><code class=\"kotlin\">@Composable fun &lt;T> Crossfade(     targetState: T,     modifier: Modifier = Modifier,     animationSpec: FiniteAnimationSpec&lt;Float> = tween(),     content: @Composable (T) -> Unit ) {...}<\/code><\/pre>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u043d\u0443\u0442\u0440\u044c composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>Crossfade <\/em>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>targetState<\/strong>\u00a0(\u0441\u0442\u0435\u0439\u0442, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>animationSpec. AnimationSpec<\/strong> \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u0430\u043a \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0442.\u043f. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u0440\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c <a href=\"#customs\">\u0447\u0443\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435<\/a>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>Crossfade<\/em> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0430\u043c <strong>content<\/strong>. \u041a\u0430\u043a \u0438 \u0432 \u0434\u0432\u0443\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445,<em> Crossfade<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <u>composable-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/u>.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u043e\u0432\u0430 \u043e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">Crossfade(targetState = state) { screen ->     when (screen) {         State.IMAGE -> SomeImage()         State.TEXT  -> SomeText()     } }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<ol>\n<li>\n<p>\u0412\u043d\u0443\u0442\u0440\u044c\u00a0 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>Crossfade<\/em> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c <strong>state.<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0435\u0439\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0443 \u0438\u043b\u0438 \u0438\u043d\u0443\u044e composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e). \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<\/li>\n<\/ol>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fa6\/71b\/04e\/fa671b04e58d3493504c6ba9a9fe7ad0.gif\" alt=\"Crossfade\" title=\"Crossfade\" width=\"360\" height=\"697\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fa6\/71b\/04e\/fa671b04e58d3493504c6ba9a9fe7ad0.gif\"\/><figcaption>Crossfade<\/figcaption><\/figure>\n<h3>Modifier.animateContentSize<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. <em>AnimateContentSize<\/em> \u2014 \u044d\u0442\u043e extension-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f <em>Modifier<\/em>-\u0430. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043b\u044e\u0431\u043e\u0439 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u043c\u0435\u0435\u0442\u0441\u044f <em>Modifier.<\/em> <em>AnimateContentSize<\/em> \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440:<\/p>\n<pre><code class=\"kotlin\">fun Modifier.animateContentSize(     animationSpec: FiniteAnimationSpec&lt;IntSize> = spring(),     finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null ): Modifier = composed(     inspectorInfo = debugInspectorInfo {         name = \"animateContentSize\"         properties[\"animationSpec\"] = animationSpec         properties[\"finishedListener\"] = finishedListener     } ) {...}<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>animationSpec.\u00a0<\/strong><\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>finishedListener<\/strong>. \u0414\u0430\u043d\u043d\u044b\u0439 \u043b\u0438\u0441\u0442\u0435\u043d\u0435\u0440 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<p>\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">Column(     modifier = Modifier         .fillMaxWidth()         .background(ColorPalette.contentStaticSecondary)         .animateContentSize(), ) {     HeaderItem(fullText) { fullText = !fullText }        if (fullText) {         Text(             text = text,             modifier = Modifier.padding(all = 16.dp)         )     } }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 (<em>Column)<\/em>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0435 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0443 <em>Modifier <\/em>\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f<em> <\/em>extension-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>animateContentSize(). <\/em>\u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 (<em>Column)<\/em> \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0435\u0439\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>Text. <\/em>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8cf\/f24\/efd\/8cff24efdf92ca889fbaea8a792801d3.gif\" alt=\"Modifier.animateContentSize\" title=\"Modifier.animateContentSize\" width=\"450\" height=\"227\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8cf\/f24\/efd\/8cff24efdf92ca889fbaea8a792801d3.gif\"\/><figcaption>Modifier.animateContentSize<\/figcaption><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0438\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435. <\/p>\n<h2>\u041d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h2>\n<p>\u0412\u0441\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 API \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 API. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ul>\n<li>\n<p><strong>Animatable<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>animate*AsState<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Animation: TargetBasedAnimation <\/strong>\u0438<strong> DecayAnimation<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>updateTransition<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>rememberInfiniteTransition<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>Animatable<\/h3>\n<p>\u041a\u043b\u0430\u0441\u0441 <em>Animatable <\/em>\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, <em>Animatable<\/em> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <em>float<\/em> \u0438 <em>color.<\/em> \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<pre><code class=\"kotlin\">fun Animatable(     initialValue: Float,     visibilityThreshold: Float = Spring.DefaultDisplacementThreshold ) = Animatable(     initialValue,     Float.VectorConverter,     visibilityThreshold )<\/code><\/pre>\n<pre><code class=\"kotlin\">fun Animatable(initialValue: Color): Animatable&lt;Color, AnimationVector4D> =     Animatable(initialValue, (Color.VectorConverter)(initialValue.colorSpace))<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>initialValue. <\/strong>\u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<p>\u0412\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439\u00a0 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>visibilityThreshold<\/strong> \u2014 \u044d\u0442\u043e \u043f\u043e\u0440\u043e\u0433 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0442\u043e, \u0441 \u043a\u0430\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u0448\u0435\u0439 \u0441\u0432\u043e\u0435\u0433\u043e \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">var animated by remember { mutableStateOf(false) } val rotation = remember { Animatable(initialValue = 360f) }  LaunchedEffect(animated) {     rotation.animateTo(         targetValue = if (animated) 0f else 360f,         animationSpec = tween(durationMillis = 1000),     ) }  Image(     modifier = Modifier.graphicsLayer {         rotationY = rotation.value     },     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>rotation<\/strong> \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <em>Animatable <\/em>\u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>remember<\/em>. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 <em>Animatable<\/em> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>initialValue<\/strong><em> = 360f.\u00a0<\/em><\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <strong>LaunchedEffect<\/strong>. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <em>coroutine scope<\/em>, \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c <em>suspend<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044e. (<em>\u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043a\u0441\u0438\u043e\u043c\u043e\u0439).<\/em><\/p>\n<p>\u0423 \u043a\u043b\u0430\u0441\u0441\u0430 <em>Animatable<\/em> \u0435\u0441\u0442\u044c <em>suspend<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>animateTo<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u043c\u0435\u0440\u0435 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u044b\u043c, \u0438 \u043b\u044e\u0431\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u0435\u043d\u0430. \u0412\u043d\u0443\u0442\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<strong>animateTo<\/strong> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <strong>targetValue<\/strong> (\u0446\u0435\u043b\u0435\u0432\u043e\u0435\/\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435) \u0438 <strong>animationSpec <\/strong>(\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438)<strong>. <\/strong>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>Image<\/strong>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <strong>modifier<\/strong> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u0438 Y. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/214\/b9e\/5b3\/214b9e5b33c48c3e21b94b90c50b1938.gif\" alt=\"Animatable\" title=\"Animatable\" width=\"360\" height=\"622\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/214\/b9e\/5b3\/214b9e5b33c48c3e21b94b90c50b1938.gif\"\/><figcaption>Animatable<\/figcaption><\/figure>\n<h3>animate*AsState<\/h3>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 <em>animate*AsState <\/em>\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u043c\u0438 API \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 Compose \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 (\u0446\u0435\u043b\u0435\u0432\u043e\u0435) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 API \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e.<\/p>\n<p><em>\u0412 Jetpack Compose<\/em> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b <em>animate*AsState<\/em>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/de5\/4bd\/04d\/de54bd04dc27543f709657e1c8ab5b22.jpg\" alt=\"\u0422\u0438\u043f\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u00a0animate*AsState\" title=\"\u0422\u0438\u043f\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u00a0animate*AsState\" width=\"744\" height=\"372\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de5\/4bd\/04d\/de54bd04dc27543f709657e1c8ab5b22.jpg\" data-blurred=\"true\"\/><figcaption>\u0422\u0438\u043f\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u00a0animate*AsState<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0430\u043d\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445:<\/p>\n<pre><code class=\"kotlin\">@Composable fun animateFloatAsState(     targetValue: Float,     animationSpec: AnimationSpec&lt;Float> = defaultAnimation,     visibilityThreshold: Float = 0.01f,     finishedListener: ((Float) -> Unit)? = null ): State&lt;Float> {...}<\/code><\/pre>\n<p>\u0438<\/p>\n<pre><code class=\"kotlin\">@Composable fun animateDpAsState(     targetValue: Dp,     animationSpec: AnimationSpec&lt;Dp> = dpDefaultSpring,     finishedListener: ((Dp) -> Unit)? = null ): State&lt;Dp> {...}<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>targetValue <\/strong>\u2014 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 (\u0446\u0435\u043b\u0435\u0432\u043e\u0435) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u0442\u043e\u0440\u044b\u043c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>animationSpec<\/strong>. \u0422\u0440\u0435\u0442\u044c\u0438\u043c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <strong>visibilityThreshold<\/strong>. \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c <strong>finishedListener<\/strong>.\u00a0<\/p>\n<p>\u041f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">val rotation by animateFloatAsState(     targetValue = if (state == State.IMAGE_FORWARD) 180f else 0f,     animationSpec = tween(durationMillis = 1000, easing = LinearEasing), )  Box(     modifier = Modifier         .fillMaxWidth()         .fillMaxHeight()         .graphicsLayer { rotationY = rotation },     contentAlignment = Alignment.Center, ) {...}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <strong>rotation<\/strong> \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>animateFloatAsState.\u00a0<\/em><\/p>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>targetValue<\/strong>, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>targetValue<\/strong> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0442\u0435\u0439\u0442\u0430 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u0438\u0431\u043e <em>180f,<\/em> \u043b\u0438\u0431\u043e <em>0f<\/em>.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>animateFloatAsState <\/em>\u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>animationSpec<\/strong>. \u0417\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 <em>1000 \u043c\u0441<\/em> \u0438 \u0442\u0438\u043f \u043a\u0440\u0438\u0432\u043e\u0439 \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0412 \u0444\u0438\u043d\u0430\u043b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>rotation<\/strong> \u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <em>Box<\/em>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <strong>modifier<\/strong> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u0438 Y.<\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438,<em> animate*AsState<\/em> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <em>Animatable<\/em> \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0438 \u0441\u0430\u043c\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/761\/140\/b8d\/761140b8db4fe34de81a5a0258375813.gif\" alt=\"animate*AsState\" title=\"animate*AsState\" width=\"360\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/761\/140\/b8d\/761140b8db4fe34de81a5a0258375813.gif\"\/><figcaption>animate*AsState<\/figcaption><\/figure>\n<h3>Animation<\/h3>\n<p><em>Animation<\/em> \u2014 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0412 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u0432\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430:<\/p>\n<ul>\n<li>\n<p><em>TargetBasedAnimation<\/em><\/p>\n<\/li>\n<li>\n<p><em>DecayAnimation<\/em><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u043c\u0438. \u041d\u0430\u0447\u043d\u0451\u043c \u0441<em> TargetBasedAnimation<\/em> \u2014 \u044d\u0442\u043e API \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0414\u0440\u0443\u0433\u0438\u0435 API \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <em>TargetBasedAnimation<\/em> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<pre><code class=\"kotlin\">constructor(     animationSpec: AnimationSpec&lt;T>,     typeConverter: TwoWayConverter&lt;T, V>,     initialValue: T,     targetValue: T,     initialVelocityVector: V? = null ) : this(     animationSpec.vectorize(typeConverter),     typeConverter,     initialValue,     targetValue,     initialVelocityVector )<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <em>TargetBasedAnimation<\/em> \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>animationSpec<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>typeConverter<\/strong> \u2014 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440 \u0442\u0438\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p><strong>initialValue<\/strong> \u0438 <strong>targetValue<\/strong> \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>initialVelocityVector <\/strong>\u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434:\u00a0<\/p>\n<pre><code class=\"kotlin\">var state by remember { mutableStateOf(false) } val anim = remember {     TargetBasedAnimation(         animationSpec = tween(durationMillis = 2000),         typeConverter = Float.VectorConverter,         initialValue = 100f,         targetValue = 300f,     ) } var playTime by remember { mutableStateOf(0L) } var animationValue by remember { mutableStateOf(0) }  LaunchedEffect(state) {     val startTime = withFrameNanos { it }     do {         playTime = withFrameNanos { it } - startTime         animationValue = anim.getValueFromNanos(playTime).toInt()     } while (!anim.isFinishedFromNanos(playTime)) }  Image(     modifier = Modifier.size(animationValue.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u043e\u043a, \u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043a \u0447\u0435\u043c\u0443.<\/p>\n<pre><code class=\"kotlin\">val anim = remember {     TargetBasedAnimation(         animationSpec = tween(durationMillis = 2000),         typeConverter = Float.VectorConverter,         initialValue = 100f,         targetValue = 300f,     ) }<\/code><\/pre>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>anim<\/strong> \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 <em>TargetBasedAnimation<\/em>. \u0414\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <em>\u00a0<\/em>\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b: \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c 2 \u0441\u0435\u043a.), \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440 \u0442\u0438\u043f\u0430, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"kotlin\">var animationValue by remember { mutableStateOf(0) }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0451 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"kotlin\">LaunchedEffect(state) {     val startTime = withFrameNanos { it }     do {         playTime = withFrameNanos { it } - startTime         animationValue = anim.getValueFromNanos(playTime).toInt()     } while (!anim.isFinishedFromNanos(playTime))<\/code><\/pre>\n<p>\u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435! \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u00a0\u043f\u043e\u043c\u043e\u0449\u0438 <em>TargetBasedAnimation <\/em>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b <em>coroutines<\/em>. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <u>\u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/u> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <strong>LaunchedEffect<\/strong>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d <em>coroutine scope<\/em>. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e <em>coroutine scope<\/em> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 <em>suspend<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u0438. (<em>\u0422\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430)<\/em><\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438 \u0432\u0430\u0436\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u043d\u0430\u043d\u043e\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>withFrameNanos<\/strong>. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>getValueFromNanos <\/strong>\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u0435\u0436\u0434\u0443 \u0444\u0440\u0435\u0439\u043c\u0430\u043c\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"kotlin\">Image(     modifier = Modifier.size(animationValue.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0443 <em>Modifier<\/em>. \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/19a\/9d5\/73e\/19a9d573eba6c528524e018e5c549460.gif\" alt=\"TargetBasedAnimation\" title=\"TargetBasedAnimation\" width=\"360\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/19a\/9d5\/73e\/19a9d573eba6c528524e018e5c549460.gif\"\/><figcaption>TargetBasedAnimation<\/figcaption><\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <em>Animation <\/em>\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441<em> DecayAnimation, <\/em>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f API \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u00ab\u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f\u00bb. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043a \u043a\u043e\u043d\u0446\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u044c\u0441\u044f. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>DecayAnimation<\/em> \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 <em>TargetBasedAnimation,<\/em> \u043d\u043e \u0435\u0441\u0442\u044c \u0438 \u0432\u0430\u0436\u043d\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f:<\/p>\n<pre><code class=\"kotlin\">  constructor(     animationSpec: DecayAnimationSpec&lt;T>,     typeConverter: TwoWayConverter&lt;T, V>,     initialValue: T,     initialVelocityVector: V ) : this(     animationSpec.vectorize(typeConverter),     typeConverter,     initialValue,     initialVelocityVector )<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <em>DecayAnimation,<\/em> \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>animationSpec<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>typeConverter<\/strong> \u2014 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440 \u0442\u0438\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0451\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p><strong>initialValue <\/strong>\u2014<strong> <\/strong>\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <em>TargetBasedAnimation,<\/em> \u0433\u0434\u0435 \u043c\u044b \u0435\u0449\u0451 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>targetValue<\/strong>);<\/p>\n<\/li>\n<li>\n<p><strong>initialVelocityVector <\/strong>\u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0442\u0443\u0445\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0435 \u044d\u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043e\u0440\u0438\u044e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">var state by remember { mutableStateOf(false) } val anim = remember {     DecayAnimation(         animationSpec = FloatExponentialDecaySpec(frictionMultiplier = 0.7f),         initialValue = 0f,         initialVelocity = 500f     ) } var playTime by remember { mutableStateOf(0L) } var animationValue by remember { mutableStateOf(0) }  LaunchedEffect(state) {     val startTime = withFrameNanos { it }     do {         playTime = withFrameNanos { it } - startTime         animationValue = anim.getValueFromNanos(playTime).toInt()     } while (!anim.isFinishedFromNanos(playTime)) }  Image(     modifier = Modifier.size(animationValue.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a:<\/p>\n<pre><code class=\"kotlin\">val anim = remember {     DecayAnimation(         animationSpec = FloatExponentialDecaySpec(frictionMultiplier = 0.7f),         initialValue = 0f,         initialVelocity = 500f,     ) }<\/code><\/pre>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>anim<\/strong> \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 <em>DecayAnimation<\/em>. \u0414\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <em>\u00a0<\/em>\u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b: \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"kotlin\">var animationValue by remember { mutableStateOf(0) }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0451 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"kotlin\">LaunchedEffect(state) {     val startTime = withFrameNanos { it }     do {         playTime = withFrameNanos { it } - startTime         animationValue = anim.getValueFromNanos(playTime).toInt()     } while (!anim.isFinishedFromNanos(playTime)) }<\/code><\/pre>\n<p>\u0410 \u0434\u0430\u043b\u044c\u0448\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430 <em>TargetBasedAnimation<\/em>, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b <em>coroutines<\/em>. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u043d\u0430\u043d\u043e\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>withFrameNanos<\/strong>. \u0414\u0430\u043b\u0435\u0435, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>getValueFromNanos<\/strong>.<\/p>\n<pre><code class=\"kotlin\">Image(     modifier = Modifier.size(animationValue.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446,\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0443 <em>Modifier<\/em>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d7f\/c07\/866\/d7fc078667529c5bc36f8d73d85dff3b.gif\" alt=\"DecayAnimation\" title=\"DecayAnimation\" width=\"360\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d7f\/c07\/866\/d7fc078667529c5bc36f8d73d85dff3b.gif\"\/><figcaption>DecayAnimation<\/figcaption><\/figure>\n<h3>updateTransition<\/h3>\n<p><a class=\"anchor\" name=\"updateTransition\" id=\"updateTransition\"><\/a><\/p>\n<p><em>updateTransition<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432\u043e <strong>view<\/strong>, \u0442\u043e <em>updateTransition<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c <strong>anomatorSet<\/strong>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"kotlin\">@Composable fun &lt;T> updateTransition(     targetState: T,     label: String? = null ): Transition&lt;T> {     val transition = remember { Transition(targetState, label = label) }     transition.animateTo(targetState)     DisposableEffect(transition) {         onDispose {             transition.onTransitionEnd()         }     }     return transition }<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <strong>Transition<\/strong><em>, <\/em>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <em>updateTransition<\/em> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <strong>Transition<\/strong> \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <strong>Transition<\/strong>, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>updateTransition<\/em> \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>targetState<\/strong> \u2014 \u0441\u0442\u0435\u0439\u0442, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>label<\/strong>\u00a0 \u2014 \u043b\u0435\u0439\u0431\u043b \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 <em>Transition-\u044b <\/em>\u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <strong>Transition<\/strong> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <em>animate*<\/em> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 10 \u0442\u0430\u043a\u0438\u0445 <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0442\u0438\u043f\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/58b\/718\/35d\/58b71835db573f6046f7009be9e2b7e7.jpg\" alt=\"\u041d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f Transition\" title=\"\u041d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f Transition\" width=\"744\" height=\"372\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/58b\/718\/35d\/58b71835db573f6046f7009be9e2b7e7.jpg\" data-blurred=\"true\"\/><figcaption>\u041d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f Transition<\/figcaption><\/figure>\n<p>\u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>animate* <\/em>\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>Transition<\/strong> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>updateTransition<\/em>.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">val transition = updateTransition(state, label = \"\") val sizeValue by transition.animateDp(     transitionSpec = { tween(durationMillis = 1000) },     label = \"\", ) { screenState ->     if (screenState == State.Up) {         136.dp     } else {         56.dp     } } val rotateValue by transition.animateFloat(     transitionSpec = { tween(durationMillis = 1000) },     label = \"\", ) { screenState ->     if (screenState == State.Up) {         0f     } else {         360f     } }  Image(     modifier = Modifier         .fillMaxWidth()         .rotate(rotateValue)         .size(sizeValue),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0434\u0432\u0443\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <strong>Transition<\/strong><em>,<\/em> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>updateTransition<\/em>, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043d\u0435\u0451 <strong>state. <\/strong>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <strong>state <\/strong>\u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c 2 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: <em>State.Up<\/em> \u0438 <em>State.Down<\/em>.<\/p>\n<pre><code class=\"kotlin\">val sizeValue by transition.animateDp(     transitionSpec = { tween(durationMillis = 1000) },     label = \"\", ) { screenState ->     if (screenState == State.UP) {         136.dp     } else {         56.dp     } }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>sizeValue, <\/strong>\u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0423 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e <strong>Transition<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>animateDp. <\/strong>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><strong>transitionSpec<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u0430, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e\u00a0\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443;<\/p>\n<\/li>\n<li>\n<p><strong>label<\/strong> \u2014 \u043b\u0435\u0439\u0431\u043b \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0432 \u043b\u044f\u043c\u0431\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>animateDp<\/strong>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0435\u0439\u0442\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <strong>sizeValue,<\/strong> \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"kotlin\">val rotateValue by transition.animateFloat(     transitionSpec = { tween(durationMillis = 1000) },     label = \"\", ) { screenState ->     if (screenState == State.UP) {         0f     } else {         360f     } }<\/code><\/pre>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f\u00a0 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <strong>rotateValue;<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423 <strong>Transition<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>animateFloat<\/strong>;<\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>animateFloat:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>transitionSpec<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0437\u0434\u0435\u0441\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443)<\/p>\n<\/li>\n<li>\n<p><strong>label<\/strong> \u2014 \u043b\u0435\u0439\u0431\u043b \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"kotlin\">Image(     modifier = Modifier         .fillMaxWidth()         .rotate(rotateValue)         .size(sizeValue),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (<strong>sizeValue<\/strong>) \u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 (<strong>rotateValue<\/strong>) \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u0439 <em>modifier<\/em>-\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <em>updateTransition<\/em>:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/899\/8ef\/435\/8998ef43560961bf96ca8e87f9f8ae2f.gif\" alt=\"updateTransition\" title=\"updateTransition\" width=\"360\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/899\/8ef\/435\/8998ef43560961bf96ca8e87f9f8ae2f.gif\"\/><figcaption>updateTransition<\/figcaption><\/figure>\n<h3>rememberInfiniteTransition<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e <em>composable<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>rememberInfiniteTransition. <\/em>\u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 <em>updateTransition <\/em>\u0437\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c: <em>rememberInfiniteTransition <\/em>\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <strong>InfiniteTransition<\/strong><em>. <\/em><strong>InfiniteTransition<\/strong><em> \u2014 <\/em>\u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"kotlin\">@Composable fun rememberInfiniteTransition(): InfiniteTransition {     val infiniteTransition = remember { InfiniteTransition() }     infiniteTransition.run()     return infiniteTransition }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <em>updateTransition,<\/em> \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0442\u0435\u0439\u0442\u0443, \u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <strong>InfiniteTransition<\/strong> \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c. \u0422\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f <strong>InfiniteTransition<\/strong><em>.<\/em> \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 <em>Jetpack Compose<\/em> \u0434\u043b\u044f <strong>InfiniteTransition<\/strong> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445: <em>color, float<\/em> \u0438 <em>value<\/em>.<\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0438\u0436\u0435:<\/p>\n<p>Color:<\/p>\n<pre><code class=\"kotlin\">@Composable fun InfiniteTransition.animateColor(     initialValue: Color,     targetValue: Color,     animationSpec: InfiniteRepeatableSpec&lt;Color> ): State&lt;Color> {...}<\/code><\/pre>\n<p>Float:<\/p>\n<pre><code class=\"kotlin\">@Composable fun InfiniteTransition.animateFloat(     initialValue: Float,     targetValue: Float,     animationSpec: InfiniteRepeatableSpec&lt;Float> ): State&lt;Float> {...}<\/code><\/pre>\n<p>Value:<\/p>\n<pre><code class=\"kotlin\">@Composable fun &lt;T, V : AnimationVector> InfiniteTransition.animateValue(     initialValue: T,     targetValue: T,     typeConverter: TwoWayConverter&lt;T, V>,     animationSpec: InfiniteRepeatableSpec&lt;T> ): State&lt;T> {...}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>initialValue<\/strong> \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>targetValue<\/strong> \u2014 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u0438 \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>animationSpec<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>typeConverter <\/strong>(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <strong>animateValue<\/strong>) \u2014 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u043e\u0440 \u0442\u0438\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">val infiniteTransition = rememberInfiniteTransition()  val sizeValue by infiniteTransition.animateFloat(     initialValue = 40.dp.value,     targetValue = 136.dp.value,     animationSpec = infiniteRepeatable(         animation = tween(durationMillis = 1000, easing = LinearEasing),         repeatMode = RepeatMode.Reverse,     ) )  val rotationValue by infiniteTransition.animateFloat(     initialValue = 0f,     targetValue = 360f,     animationSpec = infiniteRepeatable(         animation = tween(durationMillis = 1000, easing = LinearEasing),         repeatMode = RepeatMode.Restart,     ) )  Image(     modifier = Modifier         .fillMaxWidth()         .rotate(rotationValue)         .size(sizeValue.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043a\u043e\u0434 \u0438\u0437 <a href=\"#updateTransition\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a> \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>updateTransition<\/em>.<\/p>\n<pre><code class=\"kotlin\">val infiniteTransition = rememberInfiniteTransition()<\/code><\/pre>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <strong>InfiniteTransition<\/strong><em>,<\/em> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>rememberInfiniteTransition<\/em><strong>.<\/strong><\/p>\n<pre><code class=\"kotlin\">val sizeValue by infiniteTransition.animateFloat(     initialValue = 40.dp.value,     targetValue = 136.dp.value,     animationSpec = infiniteRepeatable(         animation = tween(durationMillis = 1000, easing = LinearEasing),         repeatMode = RepeatMode.Reverse,     ) )<\/code><\/pre>\n<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>sizeValue, <\/strong>\u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e <strong>InfiniteTransition<\/strong>, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>animateFloat. <\/strong>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><strong>initialValue <\/strong>(\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435)<strong> <\/strong>\u2014 <em>40.dp<\/em><\/p>\n<\/li>\n<li>\n<p><strong>targetValue <\/strong>(\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435)<strong> <\/strong>\u2014 <em>136.dp<\/em><\/p>\n<\/li>\n<li>\n<p><strong>animationSpec <\/strong>(\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u2014 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 1\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (<a href=\"#customs\"><strong>repeatMode<\/strong><\/a>)<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"kotlin\">val rotationValue by infiniteTransition.animateFloat(     initialValue = 0f,     targetValue = 360f,     animationSpec = infiniteRepeatable(         animation = tween(durationMillis = 1000, easing = LinearEasing),         repeatMode = RepeatMode.Restart,     ) )<\/code><\/pre>\n<\/p>\n<\/li>\n<li>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430. \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>rotationValue, <\/strong>\u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0423 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e <strong>InfiniteTransition<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>animateFloat. <\/strong>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><strong>initialValue<\/strong> (\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435)<strong> <\/strong>\u2014 <em>0f<\/em><\/p>\n<\/li>\n<li>\n<p><strong>targetValue <\/strong>(\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435)<strong> <\/strong>\u2014 <em>360f<\/em><\/p>\n<\/li>\n<li>\n<p><strong>animationSpec<\/strong> (\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u2014 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (<a href=\"#customs\"><strong>repeatMode)<\/strong><\/a><\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"kotlin\">Image(     modifier = Modifier         .fillMaxWidth()         .rotate(rotation)         .size(size.dp),     painter = painterResource(id = R.drawable.ic_logo),     contentDescription = \"\", )<\/code><\/pre>\n<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (<strong>sizeValue<\/strong>) \u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 (<strong>rotateValue<\/strong>) \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e). \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <em>extension<\/em>-\u0444\u0443\u043d\u043a\u0446\u0438\u0439 <em>modifier<\/em>-\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\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\/d91\/36d\/af5\/d9136daf51c7b9881e38fd44d3216711.gif\" alt=\"rememberInfiniteTransition\" title=\"rememberInfiniteTransition\" width=\"360\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d91\/36d\/af5\/d9136daf51c7b9881e38fd44d3216711.gif\"\/><figcaption>rememberInfiniteTransition<\/figcaption><\/figure>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432\u0441\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0438 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (\u0441\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430). \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c, \u043a\u0430\u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0448 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u044b\u043c!<\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h2>\n<p><a class=\"anchor\" name=\"customs\" id=\"customs\"><\/a><\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>animationSpec<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>transitionSpec <\/strong>(\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <em>updateTransition<\/em>)<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439\u00a0 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 <em>Jetpack Compose<\/em>:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"95\" width=\"95\">\n<p align=\"center\"><strong>spring<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"104\" width=\"104\">\n<p align=\"center\"><strong>tween<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"109\" width=\"109\">\n<p align=\"center\"><strong>keyframes<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"117\" width=\"117\">\n<p align=\"center\"><strong>repeatable<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"167\" width=\"167\">\n<p align=\"center\"><strong>infiniteRepeatable<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"center\"><strong>snap<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<h3>spring<\/h3>\n<p><em>spring<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u0444\u0438\u0437\u0438\u043a\u0435 \u043f\u0440\u0443\u0436\u0438\u043d\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> spring(     dampingRatio: Float = Spring.DampingRatioNoBouncy,     stiffness: Float = Spring.StiffnessMedium,     visibilityThreshold: T? = null ): SpringSpec&lt;T> {...}<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><strong>dampingRatio<\/strong> \u2014 \u0434\u0435\u043c\u043f\u0444\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0442\u0443\u0445\u0430\u0442\u044c \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u044f \u043f\u0440\u0443\u0436\u0438\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p><strong>stiffness \u2014<\/strong> \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u044c. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0443\u0436\u0438\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u0434\u0435\u043c\u043f\u0444\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u0438 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c7e\/8f6\/22d\/c7e8f622deb34751389a4fd032ad05af.gif\" alt=\"\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u0435\u043c\u043f\u0444\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" title=\"\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u0435\u043c\u043f\u0444\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" width=\"587\" height=\"320\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c7e\/8f6\/22d\/c7e8f622deb34751389a4fd032ad05af.gif\"\/><figcaption>\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u0435\u043c\u043f\u0444\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u043e\u0439 \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u0438 <strong>stiffness<\/strong> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0418\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a9d\/4b0\/6fe\/a9d4b06fe09acc10c8d64f4dfaf8d8e3.gif\" alt=\"\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u0438\" title=\"\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u0438\" width=\"800\" height=\"290\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a9d\/4b0\/6fe\/a9d4b06fe09acc10c8d64f4dfaf8d8e3.gif\"\/><figcaption>\u0425\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u0438<\/figcaption><\/figure>\n<h3>tween<\/h3>\n<p><em>tween<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0437\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0440\u0438\u0432\u043e\u0439 \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> tween(     durationMillis: Int = DefaultDurationMillis,     delayMillis: Int = 0,     easing: Easing = FastOutSlowInEasing ): TweenSpec&lt;T> = {...}<\/code><\/pre>\n<p>\u0412 \u043d\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0440\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><strong>durationMillis<\/strong> \u2014 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>delayMillis<\/strong> \u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>easing<\/strong> \u2014 \u043a\u0440\u0438\u0432\u0430\u044f \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. (\u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0442\u043e\u0440\u0430, \u043a\u0430\u043a \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u0432\u043e <strong>view<\/strong>).<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0441 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u0440\u043e\u0434\u0435 \u0432\u0441\u0451 \u0438 \u0442\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u0440\u0438\u0432\u043e\u0439 \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>\u0412 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u0438\u0440\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. \u0418\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c\u0441\u044f \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c\u0441\u044f. <strong>Easing<\/strong> \u2014 \u044d\u0442\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0438\u043b\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0442\u0440\u0435\u043d\u0438\u0435, \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044f \u0438 \u043c\u0430\u0441\u0441\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <strong>easing<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>\u0412\u0441\u0435\u0433\u043e \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 5 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 <strong>easing<\/strong>:<\/p>\n<ol>\n<li>\n<p><em>FastOutSlowInEasing<\/em><\/p>\n<\/li>\n<li>\n<p><em>LinearOutSlowInEasing<\/em><\/p>\n<\/li>\n<li>\n<p><em>FastOutLinearInEasing<\/em><\/p>\n<\/li>\n<li>\n<p><em>LinearEasing<\/em><\/p>\n<\/li>\n<li>\n<p><em>CubicBezierEasing<\/em><\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 4 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u2014 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043d\u0438\u0436\u0435 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ef\/563\/07e\/1ef56307ebba5f9edb81106896c3c8ed.gif\" alt=\"FastOutSlowInEasing\" title=\"FastOutSlowInEasing\" width=\"800\" height=\"368\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ef\/563\/07e\/1ef56307ebba5f9edb81106896c3c8ed.gif\"\/><figcaption>FastOutSlowInEasing<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/df9\/5a9\/3ff\/df95a93ff3007a8bdbbc9f07000453cf.gif\" alt=\"LinearOutSlowInEasing\" title=\"LinearOutSlowInEasing\" width=\"800\" height=\"368\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/df9\/5a9\/3ff\/df95a93ff3007a8bdbbc9f07000453cf.gif\"\/><figcaption>LinearOutSlowInEasing<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b74\/342\/147\/b74342147a125def469d90a1d7062d04.gif\" alt=\"FastOutLinearInEasing\" title=\"FastOutLinearInEasing\" width=\"800\" height=\"368\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b74\/342\/147\/b74342147a125def469d90a1d7062d04.gif\"\/><figcaption>FastOutLinearInEasing<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24f\/1ca\/f6c\/24f1caf6ca10feebaed135fe01593790.gif\" alt=\"LinearEasing\" title=\"LinearEasing\" width=\"800\" height=\"400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24f\/1ca\/f6c\/24f1caf6ca10feebaed135fe01593790.gif\"\/><figcaption>LinearEasing<\/figcaption><\/figure>\n<p>\u0410 \u0432\u043e\u0442 <em>CubicBezierEasing<\/em> \u2014 \u044d\u0442\u043e <strong>easing<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f. \u0414\u0430\u043d\u043d\u044b\u0439 <strong>easing<\/strong> \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043f\u043e \u0447\u0435\u0442\u044b\u0440\u0451\u043c \u0442\u043e\u0447\u043a\u0430\u043c.\u00a0 \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439:<\/p>\n<pre><code class=\"kotlin\">@Immutable class CubicBezierEasing(     private val a: Float,     private val b: Float,     private val c: Float,     private val d: Float ) : Easing {...}<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f59\/7eb\/ecf\/f597ebecf5219bb97988979a340d60da.gif\" alt=\"CubicBezierEasing\" title=\"CubicBezierEasing\" width=\"800\" height=\"469\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f59\/7eb\/ecf\/f597ebecf5219bb97988979a340d60da.gif\"\/><figcaption>CubicBezierEasing<\/figcaption><\/figure>\n<p>\u041d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u043e\u0447\u0435\u043a.<\/p>\n<h3>keyframes<\/h3>\n<p><em>keyframes<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u043a\u0430\u0434\u0440\u0430\u043c. \u041a\u0430\u0434\u0440\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043d\u0438\u043c\u043a\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043a\u0430\u0445 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432.<\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> keyframes(     init: KeyframesSpec.KeyframesSpecConfig&lt;T>.() -> Unit ): KeyframesSpec&lt;T> {...}<\/code><\/pre>\n<p>\u041e\u043d \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<pre><code class=\"kotlin\">keyframes {     durationMillis = 300     delayMillis = 100      val firstValue =  IntSize(width = 200, height = 100)     val firstFrame = 150     val secondValue =  IntSize(width = 300, height = 200)     val secondFrame = 250      firstValue at firstFrame     secondValue at secondFrame with FastOutLinearInEasing }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>durationMillis<\/strong> \u2014 \u043e\u0431\u0449\u0443\u044e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>delayMillis<\/strong> \u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>firstValue<\/strong> \u0438 <strong>firstFrame <\/strong>\u2014 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0442\u0438\u043f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u0442\u043c\u0435\u0442\u043a\u043e\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0441 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043a\u0430\u0434\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0440\u0438\u0432\u0443\u044e \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0430 \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0443.<\/p>\n<h3>repeatable<\/h3>\n<p><em>repeatable<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> repeatable(     iterations: Int,     animation: DurationBasedAnimationSpec&lt;T>,     repeatMode: RepeatMode = RepeatMode.Restart ): RepeatableSpec&lt;T> {...}<\/code><\/pre>\n<p>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0442\u0440\u0451\u043c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c:<\/p>\n<ul>\n<li>\n<p><strong>iterations<\/strong> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>animation<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>repeatMode<\/strong> \u2014 \u0440\u0435\u0436\u0438\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"repeatMode\" id=\"repeatMode\"><\/a><\/p>\n<p>\u0412 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 <strong>repeatMode<\/strong>:<\/p>\n<ol>\n<li>\n<p><em>RepeatMode.Reverse<\/em> \u2014 \u0440\u0435\u0436\u0438\u043c, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0442\u043e \u0435\u0441\u0442\u044c\u00a0 \u043e\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443.<\/p>\n<\/li>\n<li>\n<p><em>RepeatMode.Restart<\/em> \u2014 \u0440\u0435\u0436\u0438\u043c, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<h3>infiniteRepeatable<\/h3>\n<p><em>infiniteRepeatable<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0435\u0451 \u0441\u043e\u0437\u0434\u0430\u0442\u044c:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> infiniteRepeatable(     animation: DurationBasedAnimationSpec&lt;T>,     repeatMode: RepeatMode = RepeatMode.Restart ): InfiniteRepeatableSpec&lt;T> {...}<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c:<\/p>\n<ul>\n<li>\n<p><strong>animation<\/strong> \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>repeatMode<\/strong> \u2014 \u0440\u0435\u0436\u0438\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0443\u0436\u0435 \u0437\u0430\u0431\u044b\u043b\u0438, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, <a href=\"#repeatMode\">\u043b\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u0432\u044b\u0448\u0435<\/a>.<\/p>\n<\/li>\n<\/ul>\n<h3>snap<\/h3>\n<p>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, <em>snap<\/em> \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <em>snap<\/em> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Stable fun &lt;T> snap(delayMillis: Int = 0) = SnapSpec&lt;T>(delayMillis)<\/code><\/pre>\n<p>\u0418\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>delayMillis<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u043a\u0441\u043a\u0443\u0440\u0441 \u043f\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d, \u0438 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u043e\u0439,\u00a0 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u0430\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 <em>Jetpack Compose<\/em>:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/developer.android.com\/jetpack\/compose\/animation\"><u>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/material.io\/develop\/web\/supporting\/animation\"><u>Material Design animation<\/u><\/a> \u2014 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u044b \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0438\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cubic-bezier.com\/#\"><u>Cubic Bezier<\/u><\/a> \u2014 \u043e\u043d\u043b\u0430\u0439\u043d \u0440\u0435\u0441\u0443\u0440\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0447\u0435\u043a, \u0438 \u043a\u0430\u043a \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0435\u0431\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0443 \u0438 \u043f\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u0438 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u0432 <a href=\"https:\/\/t.me\/km_engineering\"><u>\u0422\u0413-\u043a\u0430\u043d\u0430\u043b \u041a\u043e\u0448\u0435\u043b\u044c\u043a\u0430<\/u><\/a> \u043f\u0440\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u2014\u00a0\u0442\u0430\u043c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a \u043c\u044b \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \ud83d\ude09 \u0412\u0441\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/jugru\/blog\/683656\/\"> https:\/\/habr.com\/ru\/company\/jugru\/blog\/683656\/<\/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>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041d\u043e \u044f \u0435\u0449\u0451 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043f\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \u0432 Compose \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0434\u043e\u043a\u043b\u0430\u0434 \u0434\u043b\u044f \u043c\u0430\u0439\u0441\u043a\u043e\u0433\u043e <a href=\"https:\/\/mobiusconf.com\/?utm_source=habr&amp;utm_medium=683656\">Mobius<\/a>. \u0410 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u044e\u0431\u0438\u0442 \u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u044c, \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e. \u0412 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u0438\u0434\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u043c \u0432\u0441\u0435 \u0448\u0430\u0433\u0438 \u043f\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u0417\u0430\u0447\u0435\u043c \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438?<\/h3>\n<p>\u0427\u0435\u043b\u043e\u0432\u0435\u043a\u0443 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.\u00a0\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c\u0438 \u0432 \u0436\u0438\u0437\u043d\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e, \u0430 \u043d\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.\u00a0\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043f\u0438\u0442\u044c \u043a\u043e\u0444\u0435, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0441\u0432\u0430\u0440\u0438\u0442\u044c. \u0410 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043a \u043a\u043e\u0444\u0435\u043c\u0430\u0448\u0438\u043d\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0430\u043a\u0430\u043d, \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0448\u0443\u0440\u0448\u0430\u043d\u0438\u0435 \u043a\u043e\u0444\u0435\u0439\u043d\u044b\u0445 \u0437\u0451\u0440\u0435\u043d, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u043d\u043a\u0430 \u2026 \u043d\u0443 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430, \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430: \u044d\u043a\u0440\u0430\u043d\u0430\u043c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043f\u0440\u043e\u0444\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e:<\/p>\n<ul>\n<li>\n<p>\u041e\u043d\u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u0443 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430? \u041e\u0442\u0432\u0435\u0442 \u2014\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0434\u0430, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n<ol>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0443\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u0442\u043e \u043e\u043d\u043e, \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e, \u0441\u0442\u0430\u043d\u0435\u0442 \u0444\u0430\u0432\u043e\u0440\u0438\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u044e\u0442 \u00ab\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0434 \u0441\u043b\u043e\u0432\u043e\u043c \u00ab\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0443 \u043d\u0435 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0438\u043b\u0438 \u0444\u0440\u0438\u0437\u0438\u043d\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0434\u043e\u043b\u0433\u0438\u0435 \u0438 \u0447\u0430\u0441\u0442\u044b\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445).<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u044b\u043c. \u0412\u0435\u0434\u044c \u043a\u043e\u0433\u0434\u0430 \u044d\u043a\u0440\u0430\u043d \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0432\u0438\u0441, \u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u044e\u0442 \u043e\u0442\u043a\u043b\u0438\u043a\u0430, \u0438 \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043d\u0435\u0440\u0432\u043d\u043e \u0442\u0430\u043f\u0430\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u0443.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0446\u0435\u043b\u044b\u0439 \u0430\u0440\u0441\u0435\u043d\u0430\u043b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0437\u0430\u0447\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u2014 \u0441\u0432\u043e\u0451 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u0443\u0442\u0438 \u0438 \u043e\u0431\u0441\u0443\u0434\u0438\u043c, \u043a\u0430\u043a \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0412 <em>Jetpack Compose<\/em> \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439: \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u0438 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u044d\u043a\u0441\u043a\u0443\u0440\u0441 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u0438, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c\u0438 <a href=\"https:\/\/material.io\/design\/motion\/the-motion-system.html\">Material Design Motion<\/a>.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 4 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p><strong>AnimatedVisibility<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>AnimatedContent<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Crossfade<\/strong><\/p>\n<\/li>\n<li>\n<p>Modifier.<strong>animateContentSize<\/strong><\/p>\n<\/li>\n<\/ol>\n<h3>AnimatedVisibility<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. <em>AnimatedVisibility<\/em> \u2014 \u044d\u0442\u043e composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 2 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"kotlin\">@ExperimentalAnimationApi @Composable fun AnimatedVisibility(     visible: Boolean,     modifier: Modifier = Modifier,     enter: EnterTransition = fadeIn() + expandIn(),     exit: ExitTransition = shrinkOut() + fadeOut(),     content: @Composable() AnimatedVisibilityScope.() -> Unit ) {...}<\/code><\/pre>\n<p> \u0438<\/p>\n<pre><code class=\"kotlin\">@ExperimentalAnimationApi @Composable fun AnimatedVisibility(     visibleState: MutableTransitionState&lt;Boolean>,     modifier: Modifier = Modifier,     enter: EnterTransition = fadeIn() + expandIn(),     exit: ExitTransition = fadeOut() + shrinkOut(),     content: @Composable() AnimatedVisibilityScope.() -> Unit ) {...}<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>visible<\/strong> \u0441 \u0442\u0438\u043f\u043e\u043c <em>Boolean<\/em>, \u0430 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>visibleState <\/strong>\u0441 \u0442\u0438\u043f\u043e\u043c <em>MutableTransitionState.<\/em> \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <em>MutableTransitionState \u2014<\/em> \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>enter<\/strong> c \u0442\u0438\u043f\u043e\u043c <em>EnterTransition.<\/em> \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>EnterTransition <\/em>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412 <em>Jetpack Compose<\/em> \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 8 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432: <\/p>\n<figure class=\"full-width\"><figcaption>EnterTransition. \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>exit<\/strong> c \u0442\u0438\u043f\u043e\u043c <em>ExitTransition.<\/em> \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>ExitTransition <\/em>\u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u0447\u0435\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 <em>EnterTransition<\/em> \u0432 <em>Jetpack Compose<\/em> \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 8 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 <em>ExitTransition<\/em>:<\/p>\n<figure class=\"full-width\"><figcaption>ExitTransition.  \u0412\u0437\u044f\u0442\u043e \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u0438 \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>AnimatedVisibility<\/em> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <strong>content<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c,\u00a0composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>AnimatedVisibility<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 <u>composable-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/u>. \u0412\u043d\u0443\u0442\u0440\u044c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <em>AnimatedVisibility<\/em> \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">AnimatedVisibility(     visible = visible,     enter = slideInHorizontally() + expandHorizontally(expandFrom = Alignment.End)         + fadeIn(),     exit = slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })          + shrinkHorizontally() + fadeOut(), ) {     Image(         modifier = Modifier.fillMaxWidth(),         painter = painterResource(id = R.drawable.ic_logo),         contentDescription = \"\",     ) }<\/code><\/pre>\n<p>\u0410 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/p>\n<pre><code class=\"kotlin\">AnimatedVisibility(     visible = visible,     enter = fadeIn(animationSpec = tween(durationMillis = 300, easing = LinearEasing)),     exit = fadeOut(animationSpec = tween(durationMillis = 300)), ) {     Image(         modifier = Modifier.fillMaxWidth(),         painter = painterResource(id = R.drawable.ic_logo),         contentDescription = \"\",     ) }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u044d\u0442\u0438 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b \u0437\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u2014 \u0440\u0430\u0437\u043d\u044b\u0435 <em>EnterTransition<\/em> \u0438 <em>ExitTransition<\/em>. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c:<\/p>\n<pre><code class=\"kotlin\">enter = slideInHorizontally()  + expandHorizontally(expandFrom = Alignment.End)  + fadeIn(), exit = slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })  + shrinkHorizontally()  + fadeOut(),<\/code><\/pre>\n<p>\u0410 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e:<\/p>\n<pre><code class=\"kotlin\"> enter = fadeIn(animationSpec = tween(durationMillis = 300, easing = LinearEasing)),  exit = fadeOut(animationSpec = tween(durationMillis = 300)),<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 <em>Transition<\/em>-\u044b, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u041a\u0441\u0442\u0430\u0442\u0438, \u0432 <em>Jetpack Compose<\/em> \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u00ab\u0432\u043e\u043b\u0448\u0435\u0431\u043d\u043e\u0433\u043e\u00bb \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u00ab+\u00bb \u043c\u0435\u0436\u0434\u0443 <em>Transition. <\/em>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"bordered\"><figcaption>AnimatedVisibility<\/figcaption><\/figure>\n<h3>AnimatedContent<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0435\u0439\u0442\u0430. <em>AnimatedContent<\/em> \u2014 \u044d\u0442\u043e composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440:<\/p>\n<pre><code class=\"kotlin\">fun &lt;S> AnimatedContent(     targetState: S,     modifier: Modifier = Modifier,     transitionSpec: AnimatedContentScope&lt;S>.() -> ContentTransform = {         fadeIn(animationSpec = tween(220, delayMillis = 90)) with fadeOut(animationSpec = tween(90))     },     contentAlignment: Alignment = Alignment.TopStart,     content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) {...}<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0438 \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>AnimatedContent,<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>targetState<\/strong>, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>transitionSpec. TransitionSpec<\/strong> \u2014 \u044d\u0442\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430 \u0442\u0440\u0430\u043d\u0437\u0438\u0448\u0435\u043d\u043e\u0432 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0441\u0442\u0435\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435 \u0436\u0435 \u0442\u0438\u043f\u044b \u0442\u0440\u0430\u0437\u0438\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <em>AnimatedVisibility<\/em>.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>AnimatedContent<\/em> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0441\u0430\u043c <strong>content<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041a\u0430\u043a \u0438 <em>AnimatedVisibility, AnimatedContent <\/em>\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <u>composable-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/u>.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>AnimatedContent<\/em>, \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"kotlin\">AnimatedContent(     targetState = state,         transitionSpec = {             fadeIn(animationSpec = tween(durationMillis = 150)) with                 fadeOut(animationSpec = tween(durationMillis = 150)) using                 SizeTransform { initialSize, targetSize ->                     if (targetState == State.EXPAND) {                         keyframes {                             IntSize(initialSize.width, initialSize.height) at 150                             durationMillis = 300                         }                     } else {                         keyframes {                             IntSize(targetSize.width, targetSize.height) at 150                             durationMillis = 300                         }                     }                 }         } ) { targetExpanded ->     if (targetExpanded == State.EXPAND) {         Collapsed()     } else {         Expanded()     } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c <strong>state<\/strong> \u0432\u043d\u0443\u0442\u0440\u044c \u043a composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>AnimatedContent<\/em>. \u0423 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0435\u0439\u0442\u0430<strong> <\/strong>\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: <em>Expanded<\/em> \u0438\u043b\u0438 <em>Collapsed<\/em>.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 <em>transition<\/em>-\u043e\u0432:<\/p>\n<pre><code class=\"kotlin\">transitionSpec = {     fadeIn(animationSpec = tween(durationMillis = 150)) with         fadeOut(animationSpec = tween(durationMillis = 150)) using         SizeTransform { initialSize, targetSize ->             if (targetState == State.EXPAND) {                 keyframes {                     IntSize(initialSize.width, initialSize.height) at 150                     durationMillis = 300                 }             } else {                 keyframes {                     IntSize(targetSize.width, targetSize.height) at 150                     durationMillis = 300                 }             }         } }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <em>EnterTransition<\/em> \u0438 <em>ExitTransition<\/em>-\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <strong>with<\/strong>.<\/p>\n<pre><code class=\"kotlin\">fadeIn(animationSpec = tween(durationMillis = 150)) with     fadeOut(animationSpec = tween(durationMillis = 150))<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <strong>using<\/strong> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <em>SizeTransform<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0440<\/p>\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-337374","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/337374","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=337374"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/337374\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=337374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=337374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=337374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}