{"id":146941,"date":"2026-09-15T06:00:45","date_gmt":"2026-09-15T02:30:45","guid":{"rendered":"https:\/\/motionguru.ir\/blog\/?p=146941"},"modified":"2026-10-13T13:33:12","modified_gmt":"2026-10-13T10:03:12","slug":"rive-motion-design-web-app-guide","status":"publish","type":"post","link":"https:\/\/motionguru.ir\/blog\/rive-motion-design-web-app-guide\/","title":{"rendered":"Rive \u0648 Motion Design \u062f\u0631 \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646: \u0627\u0646\u0642\u0644\u0627\u0628 \u0645\u0648\u0634\u0646\u200c\u06af\u0631\u0627\u0641\u06cc\u06a9 \u062a\u0639\u0627\u0645\u0644\u06cc+ \u06a9\u062f \u0648 \u0631\u0627\u0647\u0646\u0645\u0627"},"content":{"rendered":"<h2 data-path-to-node=\"2\">\u0686\u0631\u0627 Rive \u0622\u06cc\u0646\u062f\u0647 \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u062a\u0635\u0627\u062d\u0628 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a\u061f<\/h2>\n<p data-path-to-node=\"3\">\u062f\u0631 \u0639\u0635\u0631 \u0648\u0628 \u06f3 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0645\u062e\u0627\u0637\u0628 \u062f\u06cc\u06af\u0631 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062e\u0637\u06cc \u0648 \u0628\u06cc\u200c\u0631\u0648\u062d \u062e\u0634\u0646\u0648\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u062f. \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646 MP4 \u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06af\u06cc\u0641 (GIF) \u0628\u0627 \u062d\u062c\u0645\u200c\u0647\u0627\u06cc \u0639\u062c\u06cc\u0628 \u0648 \u06a9\u06cc\u0641\u06cc\u062a \u067e\u0627\u06cc\u06cc\u0646\u060c \u0633\u0627\u0644\u200c\u0647\u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0628\u0648\u0633 \u0637\u0631\u0627\u062d\u0627\u0646 UI\/UX \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u0628\u0648\u062f\u0647\u200c\u0627\u0646\u062f. \u062d\u062a\u06cc <b data-path-to-node=\"3\" data-index-in-node=\"231\">Lottie<\/b> \u06a9\u0647 \u0632\u0645\u0627\u0646\u06cc \u067e\u0627\u062f\u0634\u0627\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u0648\u062f\u060c \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0645\u0631\u0648\u0632 \u0644\u0646\u06af \u0645\u06cc\u200c\u0632\u0646\u062f!<\/p>\n<p data-path-to-node=\"4\">\u0627\u06cc\u0646\u062c\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u0646\u0642\u0637\u0647\u200c\u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 <a href=\"https:\/\/motionguru.ir\/rive-academy\/\"><b data-path-to-node=\"4\" data-index-in-node=\"33\">Rive<\/b> <\/a>\u0648\u0627\u0631\u062f \u0645\u06cc\u062f\u0627\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f. Rive \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0633\u0627\u0632\u06cc \u0648 \u0645\u0648\u062a\u0648\u0631 \u0632\u0645\u0627\u0646\u200c\u0648\u0627\u0642\u0639\u06cc (Real-Time Engine) \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0631\u06cc\u0639\u060c \u0633\u0628\u06a9 \u0648 \u0628\u0631\u062f\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 <b data-path-to-node=\"4\" data-index-in-node=\"202\">\u0628\u0647 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f<\/b>.<\/p>\n<p data-path-to-node=\"5\">\u0627\u0632 \u0686\u0634\u0645\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u06cc \u06a9\u0647 \u062d\u0631\u06a9\u062a \u0645\u0627\u0648\u0633 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u062e\u0631\u06cc\u062f\u06cc \u06a9\u0647 \u0628\u0627 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0634\u0631\u062f\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f\u060c Rive \u0645\u0631\u0632 \u0645\u06cc\u0627\u0646 <a href=\"https:\/\/motionguru.ir\/express\/\"><b data-path-to-node=\"5\" data-index-in-node=\"140\">\u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 (Motion Design)<\/b><\/a> \u0648 <b data-path-to-node=\"5\" data-index-in-node=\"170\">\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc (Development)<\/b> \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0648\u0644\u062a\u0631\u0627-\u062c\u0627\u0645\u0639\u060c \u0635\u0641\u0631 \u062a\u0627 \u0635\u062f Rive\u060c \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u060c \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc\u060c \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u0648 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u200c\u0647\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0622\u0646 \u062f\u0631 \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3 data-path-to-node=\"7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146943\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-300x169.webp\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 Rive \u0648 \u0645\u0648\u0634\u0646 \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-1.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<h2 data-path-to-node=\"11\"><\/h2>\n<h2 data-path-to-node=\"2\">\u0628\u062e\u0634 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc: \u062a\u0627\u062b\u06cc\u0631 Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0631 \u0646\u0631\u062e \u062a\u0628\u062f\u06cc\u0644 (CRO) \u0648 \u0645\u0639\u0645\u0627\u0631\u06cc \u0641\u0646\u06cc<\/h2>\n<p data-path-to-node=\"3\">\u0627\u0645\u0631\u0648\u0632\u0647 \u0631\u0642\u0627\u0628\u062a \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062a\u0646\u0647\u0627 \u0628\u0631 \u0633\u0631 \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u00ab\u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u00bb \u0646\u06cc\u0633\u062a\u060c \u0628\u0644\u06a9\u0647 \u0628\u0631 \u0633\u0631 \u062e\u0644\u0642 \u06cc\u06a9 <b data-path-to-node=\"3\" data-index-in-node=\"90\">\u00ab\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0633\u062d\u0648\u0631\u06a9\u0646\u0646\u062f\u0647\u00bb<\/b> \u0627\u0633\u062a. \u0628\u0631\u0631\u0633\u06cc\u200c\u0647\u0627\u06cc \u0622\u0645\u0627\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0635\u0648\u0644\u06cc <b data-path-to-node=\"3\" data-index-in-node=\"185\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0646\u0631\u062e \u0645\u0627\u0646\u062f\u06af\u0627\u0631\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 (Dwell Time) \u0631\u0627 \u062a\u0627 <b data-path-to-node=\"3\" data-index-in-node=\"280\">\u06f4\u06f0\u066a \u0627\u0641\u0632\u0627\u06cc\u0634<\/b> \u062f\u0627\u062f\u0647 \u0648 \u0646\u0631\u062e \u067e\u0631\u0634 (Bounce Rate) \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0686\u0634\u0645\u200c\u06af\u06cc\u0631\u06cc \u06a9\u0627\u0647\u0634 \u062f\u0647\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0627\u062a\u0641\u0627\u0642 \u0686\u06af\u0648\u0646\u0647 \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0686\u0631\u0627 \u0633\u0627\u0632\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0648 \u062f\u0631 \u062d\u0627\u0644 \u06a9\u0648\u0686 \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f\u061f<\/p>\n<h3 data-path-to-node=\"5\"><span style=\"color: #008000;\">\u06f1. \u0646\u0642\u0634 \u0645\u0633\u062a\u0642\u06cc\u0645 Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 \u0627\u0631\u062a\u0642\u0627\u06cc \u0646\u0631\u062e \u062a\u0628\u062f\u06cc\u0644 (CRO)<\/span><\/h3>\n<p data-path-to-node=\"6\">\u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u0627\u06af\u0631 \u0647\u062f\u0641\u0645\u0646\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0648\u062f\u060c \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0631\u0648\u0627\u0646\u200c\u0634\u0646\u0627\u062e\u062a\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0647\u062f\u0627\u06cc\u062a \u0646\u0627\u062e\u0648\u062f\u0622\u06af\u0627\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <b data-path-to-node=\"6\" data-index-in-node=\"106\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u0628\u0647 \u0637\u0631\u0627\u062d\u0627\u0646 UI\/UX \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 <b data-path-to-node=\"6\" data-index-in-node=\"185\">\u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0622\u0646\u06cc (Instant Feedback Loops)<\/b> \u062e\u0644\u0642 \u06a9\u0646\u0646\u062f:<\/p>\n<ul data-path-to-node=\"7\">\n<li>\n<p data-path-to-node=\"7,0,0\"><b data-path-to-node=\"7,0,0\" data-index-in-node=\"0\">\u06a9\u0627\u0647\u0634 \u0627\u0635\u0637\u06a9\u0627\u06a9 \u062f\u0631 \u0641\u0631\u0645\u200c\u0647\u0627:<\/b> \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0641\u06cc\u0644\u062f \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u06a9\u0627\u0631\u062a \u0627\u0639\u062a\u0628\u0627\u0631\u06cc \u0631\u0627 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0648\u0627\u06a9\u0646\u0634\u200c\u0647\u0627\u06cc \u0645\u06cc\u06a9\u0631\u0648\u0645\u0648\u0634\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u062d\u0633 \u0627\u0645\u0646\u06cc\u062a \u0648 \u067e\u06cc\u0634\u0631\u0641\u062a \u0631\u0627 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f\u0647 \u0648 \u0631\u06cc\u0632\u0634 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0645\u0631\u0627\u062d\u0644 \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0645\u06cc\u200c\u0631\u0633\u0627\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"7,1,0\"><b data-path-to-node=\"7,1,0\" data-index-in-node=\"0\">\u0647\u062f\u0627\u06cc\u062a \u0627\u0644\u06af\u0648\u06cc \u062f\u06cc\u062f\u0627\u0631\u06cc (Visual Hierarchy):<\/b> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc Rive\u060c \u0686\u0634\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0633\u0645\u062a \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u062f\u0639\u0648\u062a \u0628\u0647 \u0627\u0642\u062f\u0627\u0645 (CTA) \u06cc\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u0648\u06cc\u0698\u0647 \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"7,2,0\"><b data-path-to-node=\"7,2,0\" data-index-in-node=\"0\">\u0627\u06cc\u062c\u0627\u062f \u062d\u0633 \u0632\u0646\u062f\u0647 \u0628\u0648\u062f\u0646 \u0645\u062d\u0635\u0648\u0644:<\/b> \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u06a9\u0647 \u0628\u0647 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633\u060c \u0644\u0645\u0633 \u0648 \u062a\u0627\u06cc\u067e \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u062d\u0633 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0639\u062a\u0645\u0627\u062f \u0628\u0631\u0646\u062f \u0631\u0627 \u062f\u0631 \u0630\u0647\u0646 \u0645\u062e\u0627\u0637\u0628 \u062f\u0648\u0686\u0646\u062f\u0627\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<blockquote data-path-to-node=\"8\">\n<p data-path-to-node=\"8,0\"><b data-path-to-node=\"8,0\" data-index-in-node=\"0\">\u06cc\u06a9 \u0627\u0635\u0644 \u0645\u0647\u0645 \u062f\u0631 UX:<\/b> \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u0646\u0628\u0627\u06cc\u062f \u0641\u0642\u0637 \u062a\u0632\u0626\u06cc\u0646\u06cc \u0628\u0627\u0634\u062f\u061b \u0628\u0647\u062a\u0631\u06cc\u0646 <b data-path-to-node=\"8,0\" data-index-in-node=\"60\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u0622\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062d\u062a\u06cc \u0645\u062a\u0648\u062c\u0647 \u00ab\u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0648\u062f\u0646\u00bb \u06cc\u0627 \u00ab\u0647\u062f\u0627\u06cc\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u0628\u0648\u062f\u0646\u00bb \u0622\u0646 \u0646\u0634\u0648\u062f\u060c \u0627\u0645\u0627 \u0645\u0633\u06cc\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc\u0634 \u0647\u0645\u0648\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n<\/blockquote>\n<h3 data-path-to-node=\"10\"><span style=\"color: #008000;\">\u06f2. \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0634\u0627\u062e\u0635\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc Core Web Vitals \u0628\u0627 Rive<\/span><\/h3>\n<p data-path-to-node=\"11\">\u06cc\u06a9\u06cc \u0627\u0632 \u062f\u063a\u062f\u063a\u0647\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0645\u062a\u062e\u0635\u0635\u0627\u0646 \u0633\u0626\u0648 \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u062a\u062d\u0631\u06a9\u060c \u06a9\u0627\u0647\u0634 \u0633\u0631\u0639\u062a \u0644\u0648\u062f \u0633\u0627\u06cc\u062a \u0627\u0633\u062a. \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0645\u0627\u0646\u0646\u062f \u06af\u0648\u06af\u0644 \u0628\u0631 \u0631\u0648\u06cc \u0634\u0627\u062e\u0635\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0646\u0638\u06cc\u0631 <b data-path-to-node=\"11\" data-index-in-node=\"174\">INP (Interaction to Next Paint)<\/b> \u0648 <b data-path-to-node=\"11\" data-index-in-node=\"208\">LCP (Largest Contentful Paint)<\/b> \u062d\u0633\u0627\u0633\u06cc\u062a \u0628\u0627\u0644\u0627\u06cc\u06cc \u062f\u0627\u0631\u0646\u062f.<\/p>\n<p data-path-to-node=\"12\">\u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u0645\u0639\u0645\u0627\u0631\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc <code data-path-to-node=\"12\" data-index-in-node=\"35\">.riv<\/code> \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 <b data-path-to-node=\"12\" data-index-in-node=\"52\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u062c\u0627\u062a\u200c\u062f\u0647\u0646\u062f\u0647 \u0633\u0626\u0648\u06cc \u0641\u0646\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u0648\u062f:<\/p>\n<div class=\"code-block ng-tns-c1976435164-81 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahcKEwjugtKKxuyVAxUAAAAAHQAAAAAQRA\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-81\">\n<div class=\"animated-opacity ng-tns-c1976435164-81\">\n<pre class=\"ng-tns-c1976435164-81\"><code class=\"code-container formatted ng-tns-c1976435164-81 no-decoration-radius\" role=\"text\" data-test-id=\"code-content\">[\u0641\u0627\u06cc\u0644 \u0633\u0646\u06af\u06cc\u0646 MP4 \/ GIF] \u2500\u2500 (\u062d\u062c\u0645 \u0628\u0627\u0644\u0627 + \u06a9\u064f\u0646\u062f \u06a9\u0646\u062f\u0646 Canvas) \u2500\u2500&gt; \u0627\u0641\u062a \u0634\u062f\u06cc\u062f INP \u0648 LCP \u274c\r\n[\u0641\u0627\u06cc\u0644 \u0628\u0647\u06cc\u0646\u0647 Rive (.riv)] \u2500\u2500 (\u0631\u0646\u062f\u0631 \u06f6\u06f0fps + \u062d\u062c\u0645 \u0632\u06cc\u0631 \u06f5\u06f0KB)  \u2500\u2500&gt; \u0646\u0631\u062e \u0633\u0628\u0632 \u062f\u0631 Lighthouse  \u2705\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<ul data-path-to-node=\"14\">\n<li>\n<p data-path-to-node=\"14,0,0\"><b data-path-to-node=\"14,0,0\" data-index-in-node=\"0\">\u0631\u0646\u062f\u0631 \u0628\u0631\u062f\u0627\u0631\u06cc \u0632\u0645\u0627\u0646\u200c\u0648\u0627\u0642\u0639\u06cc (Real-Time Vector Rendering):<\/b> \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u062f\u0627\u0631\u06cc \u0631\u0648\u06cc Canvas \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0631\u0632\u0648\u0644\u0648\u0634\u0646\u200c\u0647\u0627 (\u0627\u0632 \u06af\u0648\u0634\u06cc\u200c\u0647\u0627\u06cc \u0627\u0631\u0632\u0627\u0646\u200c\u0642\u06cc\u0645\u062a \u062a\u0627 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u0647\u0627\u06cc Retina 8K) \u06a9\u06cc\u0641\u06cc\u062a \u0628\u062f\u0648\u0646 \u0627\u0641\u062a \u0628\u0627\u0642\u06cc \u0645\u06cc\u200c\u0645\u0627\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"14,1,0\"><b data-path-to-node=\"14,1,0\" data-index-in-node=\"0\">\u0645\u0635\u0631\u0641 \u0628\u0633\u06cc\u0627\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 (CPU\/GPU):<\/b> \u0645\u0648\u062a\u0648\u0631 \u067e\u0631\u062f\u0627\u0632\u0634\u06cc Rive \u06a9\u0647 \u0628\u0627 C++ \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0628\u0627\u0631 \u067e\u0631\u062f\u0627\u0632\u0634\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0645\u0627\u0646\u0639 \u0627\u0632 \u062f\u0627\u063a \u0634\u062f\u0646 \u06af\u0648\u0634\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0648 \u06a9\u0646\u062f\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"16\"><span style=\"color: #008000;\">\u06f3.<\/span> <span style=\"color: #008000;\">\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc Rive \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc (Design Systems)<\/span><\/h3>\n<p data-path-to-node=\"17\">\u0628\u0631\u0627\u06cc \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u0628\u0632\u0631\u06af\u060c \u0686\u0627\u0644\u0634 \u0627\u0635\u0644\u06cc \u0639\u062f\u0645 \u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0645\u06cc\u0627\u0646 \u062a\u06cc\u0645 \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u06cc\u0645 \u062a\u0648\u0633\u0639\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0633\u0646\u062a\u06cc\u060c \u0637\u0631\u0627\u062d \u06cc\u06a9 \u0648\u06cc\u062f\u06cc\u0648 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u062a\u062d\u0648\u06cc\u0644 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633 \u0645\u06cc\u200c\u062f\u0627\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633 \u0645\u062c\u0628\u0648\u0631 \u0628\u0648\u062f \u0633\u0627\u0639\u062a\u200c\u0647\u0627 \u0632\u0645\u0627\u0646 \u0635\u0631\u0641 \u06a9\u0646\u062f \u062a\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0646\u062f (\u06a9\u0647 \u063a\u0627\u0644\u0628\u0627\u064b \u0628\u0627 \u062e\u0631\u0648\u062c\u06cc \u0627\u0635\u0644\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0645\u06cc\u200c\u0634\u062f!).<\/p>\n<p data-path-to-node=\"18\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc <b data-path-to-node=\"18\" data-index-in-node=\"11\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u0627\u06cc\u0646 \u0641\u0631\u0627\u06cc\u0646\u062f \u0631\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u062f\u06af\u0631\u06af\u0648\u0646 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ol start=\"1\" data-path-to-node=\"19\">\n<li>\n<p data-path-to-node=\"19,0,0\"><b data-path-to-node=\"19,0,0\" data-index-in-node=\"0\">\u0645\u0646\u0628\u0639 \u0648\u0627\u062d\u062f \u062d\u0642\u06cc\u0642\u062a (Single Source of Truth):<\/b> \u0641\u0627\u06cc\u0644 \u062e\u0631\u0648\u062c\u06cc <code data-path-to-node=\"19,0,0\" data-index-in-node=\"53\">.riv<\/code> \u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a. \u0647\u0631 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u06a9\u0647 \u0637\u0631\u0627\u062d \u062f\u0631 \u0645\u062d\u06cc\u0637 Rive Editor \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u062f \u062a\u0648\u0633\u0637 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u060c \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"19,1,0\"><b data-path-to-node=\"19,1,0\" data-index-in-node=\"0\">\u06cc\u06a9\u0633\u0627\u0646\u200c\u0633\u0627\u0632\u06cc \u062e\u0631\u0648\u062c\u06cc \u062f\u0631 \u0686\u0646\u062f \u067e\u0644\u062a\u0641\u0631\u0645 (Cross-Platform Consistency):<\/b> \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 Rive \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0645\u0632\u0645\u0627\u0646 \u062f\u0631 \u0648\u0628 (React\/Vue)\u060c \u0645\u0648\u0628\u0627\u06cc\u0644 (iOS\/Android) \u0648 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627\u06cc \u0686\u0646\u062f\u067e\u0644\u062a\u0641\u0631\u0645\u06cc \u0645\u062b\u0644 Flutter \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<\/li>\n<\/ol>\n<h3 data-path-to-node=\"21\"><span style=\"color: #008000;\">\u06f4. \u0686\u0634\u0645\u200c\u0627\u0646\u062f\u0627\u0632 \u0622\u06cc\u0646\u062f\u0647: Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 \u0646\u0633\u0644 \u0628\u0639\u062f\u06cc \u0648\u0628<\/span><\/h3>\n<p data-path-to-node=\"22\">\u0628\u0627 \u0647\u0645\u06af\u0631\u0627 \u0634\u062f\u0646 \u0648\u0628 \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0641\u0636\u0627\u06cc\u06cc (Spatial UI)\u060c \u0648\u0627\u0642\u0639\u06cc\u062a \u0627\u0641\u0632\u0648\u062f\u0647 (AR) \u0648 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u060c \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0635\u0646\u0639\u062a \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0633\u0627\u0632\u06cc \u0632\u0645\u0627\u0646\u200c\u0648\u0627\u0642\u0639\u06cc \u0631\u0648\u0632 \u0628\u0647 \u0631\u0648\u0632 \u0628\u06cc\u0634\u062a\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p data-path-to-node=\"23\">\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0648 \u0628\u0647\u200c\u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc <b data-path-to-node=\"23\" data-index-in-node=\"21\">Rive \u0648 Motion Design \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/b> \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u062a\u0631\u0646\u062f \u0632\u0648\u062f\u06af\u0630\u0631 \u0646\u06cc\u0633\u062a\u060c \u0628\u0644\u06a9\u0647 <b data-path-to-node=\"23\" data-index-in-node=\"92\">\u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0645\u0647\u0627\u0631\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0647\u0647\u200c \u0622\u06cc\u0646\u062f\u0647<\/b> \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u0627\u0646\u060c \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u0648 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0633\u062a. \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0647\u0632\u0627\u0631\u0627\u0646 \u0631\u0642\u06cc\u0628 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0633 \u062f\u0631\u062e\u0634\u0627\u0646 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u0646\u062f\u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u0627\u0633\u062a.<\/p>\n<h2 data-path-to-node=\"11\"><\/h2>\n<h2 data-path-to-node=\"11\">\u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u0648 \u067e\u0627\u06cc\u0647: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 Rive \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647<\/h2>\n<p data-path-to-node=\"12\">\u0627\u06af\u0631 \u062a\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u062b\u0644 Figma \u06cc\u0627 After Effects \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc Rive \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u062b\u0644 \u0622\u0628 \u062e\u0648\u0631\u062f\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0641\u0631\u0627\u06cc\u0646\u062f \u06a9\u0644\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0645\u0648\u0634\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u062f\u0631 Rive \u0634\u0627\u0645\u0644 \u06f5 \u0645\u0631\u062d\u0644\u0647 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a:<\/p>\n<div class=\"code-block ng-tns-c1976435164-93 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQqwE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-93\">\n<div class=\"animated-opacity ng-tns-c1976435164-93\">\n<pre class=\"ng-tns-c1976435164-93\"><code class=\"code-container formatted ng-tns-c1976435164-93 no-decoration-radius\" role=\"text\" data-test-id=\"code-content\">[\u06f1. \u0648\u0631\u0648\u062f \u0648 \u0633\u0627\u062e\u062a Artboard] \u2794 [\u06f2. \u0637\u0631\u0627\u062d\u06cc \u06cc\u0627 \u0627\u06cc\u0645\u067e\u0648\u0631\u062a] \u2794 [\u06f3. \u0627\u0646\u06cc\u0645\u06cc\u062a \u062f\u0631 Timeline] \u2794 [\u06f4. \u0645\u0646\u0637\u0642\u200c\u062f\u0647\u06cc \u0628\u0627 State Machine] \u2794 [\u06f5. \u062e\u0631\u0648\u062c\u06cc .riv \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc]\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"14\"><span style=\"color: #008000;\">\u06af\u0627\u0645 \u0627\u0648\u0644: \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0645\u062d\u06cc\u0637 Rive Editor<\/span><\/h3>\n<p data-path-to-node=\"15\">\u0648\u0627\u0631\u062f \u0633\u0627\u06cc\u062a <code data-path-to-node=\"15\" data-index-in-node=\"10\">editor.rive.app<\/code> \u0634\u0648\u06cc\u062f. Rive \u0647\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0646\u0633\u062e\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 (Web-based) \u0648 \u0647\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0633\u06a9\u062a\u0627\u067e \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a. \u06cc\u06a9 \u0633\u0646\u062f \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 (Artboard) \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u06cc\u0627\u0632 (\u0645\u062b\u0644\u0627 \u06f4\u06f0\u06f0\u00d7\u06f4\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc) \u062a\u0646\u0638\u06cc\u0645 \u0646\u0645\u0627\u0626\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"16\"><span style=\"color: #008000;\">\u06af\u0627\u0645 \u062f\u0648\u0645: \u0627\u06cc\u0645\u067e\u0648\u0631\u062a \u06cc\u0627 \u062a\u0631\u0633\u06cc\u0645 \u0644\u0627\u06cc\u0647\u200c\u0647\u0627<\/span><\/h3>\n<p data-path-to-node=\"17\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0637\u0631\u062d\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 Rive \u0631\u0633\u0645 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc (SVG) \u0631\u0627 \u0627\u0632 <b data-path-to-node=\"17\" data-index-in-node=\"84\">Figma<\/b> drag &amp; drop \u06a9\u0646\u06cc\u062f. Rive \u0633\u0627\u062e\u062a\u0627\u0631 \u0644\u0627\u06cc\u0647\u200c\u0627\u06cc \u062f\u0642\u06cc\u0642\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0641\u06cc\u06af\u0645\u0627 \u062f\u0627\u0631\u062f.<\/p>\n<h3 data-path-to-node=\"18\"><span style=\"color: #008000;\">\u06af\u0627\u0645 \u0633\u0648\u0645: \u06a9\u0644\u06cc\u062f\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Timeline (Animate Mode)<\/span><\/h3>\n<p data-path-to-node=\"19\">\u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0635\u0641\u062d\u0647\u060c \u062d\u0627\u0644\u062a \u0631\u0627 \u0627\u0632 <b data-path-to-node=\"19\" data-index-in-node=\"26\">Design<\/b> \u0628\u0647 <b data-path-to-node=\"19\" data-index-in-node=\"36\">Animate<\/b> \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0633\u0627\u0632\u06cc\u062f (\u0645\u062b\u0644\u0627\u064b \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0645\u0639\u0645\u0648\u0644\u06cc <code data-path-to-node=\"19\" data-index-in-node=\"139\">Idle<\/code> \u0648 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u06a9\u0644\u06cc\u06a9 <code data-path-to-node=\"19\" data-index-in-node=\"172\">Click<\/code>).<\/p>\n<h3 data-path-to-node=\"20\"><span style=\"color: #008000;\">\u06af\u0627\u0645 \u0686\u0647\u0627\u0631\u0645: \u0627\u06cc\u062c\u0627\u062f \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 State Machine<\/span><\/h3>\n<p data-path-to-node=\"21\">\u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632\u062a\u0631\u06cc\u0646 \u0628\u062e\u0634 Rive! \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0634\u0645\u0627 \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u062e\u0637 \u06a9\u062f\u060c \u062f\u06cc\u0627\u06af\u0631\u0627\u0645 \u0645\u0646\u0637\u0642\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f. \u0628\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 (Inputs) \u0627\u0632 \u0646\u0648\u0639:<\/p>\n<ul data-path-to-node=\"22\">\n<li>\n<p data-path-to-node=\"22,0,0\"><b data-path-to-node=\"22,0,0\" data-index-in-node=\"0\">Boolean:<\/b> (\u062f\u0631\u0633\u062a \/ \u063a\u0644\u0637 &#8211; \u0645\u062b\u0644 \u0631\u0648\u0634\u0646\/\u062e\u0627\u0645\u0648\u0634 \u0628\u0648\u062f\u0646 \u06cc\u06a9 \u0633\u0648\u06cc\u06cc\u0686)<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"22,1,0\"><b data-path-to-node=\"22,1,0\" data-index-in-node=\"0\">Number:<\/b> (\u0639\u062f\u062f\u06cc &#8211; \u0645\u062b\u0644 \u062f\u0631\u0635\u062f \u067e\u06cc\u0634\u0631\u0641\u062a \u06cc\u06a9 Progress Bar)<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"22,2,0\"><b data-path-to-node=\"22,2,0\" data-index-in-node=\"0\">Trigger:<\/b> (\u062a\u062d\u0631\u06cc\u06a9 \u0644\u062d\u0638\u0647\u200c\u0627\u06cc &#8211; \u0645\u062b\u0644 \u0627\u0641\u06a9\u062a \u0634\u0644\u06cc\u06a9 \u06cc\u0627 \u0627\u0646\u0641\u062c\u0627\u0631 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9)<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"23\"><span style=\"color: #008000;\">\u06af\u0627\u0645 \u067e\u0646\u062c\u0645: \u062e\u0631\u0648\u062c\u06cc \u0628\u0627 \u067e\u0633\u0648\u0646\u062f \u0627\u062e\u062a\u0635\u0627\u0635\u06cc <code data-path-to-node=\"23\" data-index-in-node=\"33\">.riv<\/code><\/span><\/h3>\n<p data-path-to-node=\"24\">\u0641\u0627\u06cc\u0644 \u0646\u0647\u0627\u06cc\u06cc \u0634\u0645\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a \u062e\u0631\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0634\u062f\u0647 <code data-path-to-node=\"24\" data-index-in-node=\"39\">.riv<\/code> \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u06cc\u200c\u0634\u0648\u062f. \u062d\u062c\u0645 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b <b data-path-to-node=\"24\" data-index-in-node=\"83\">\u0628\u06cc\u0646 \u06f5 \u062a\u0627 \u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0628\u0627\u06cc\u062a<\/b> \u0627\u0633\u062a!<\/p>\n<h3 data-path-to-node=\"26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146944\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-300x169.webp\" alt=\"\u0646\u0645\u0627\u06cc \u0645\u062d\u06cc\u0637 \u06a9\u0627\u0631\u06cc Rive Editor \u0634\u0627\u0645\u0644 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u062f\u06cc\u0632\u0627\u06cc\u0646\u060c \u0627\u0646\u06cc\u0645\u06cc\u062a \u0648 \u0627\u0633\u062a\u06cc\u062a \u0645\u0627\u0634\u06cc\u0646\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-2.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<h2 data-path-to-node=\"30\"><\/h2>\n<h2 data-path-to-node=\"30\">\u06f1\u06f0 \u062a\u06a9\u0646\u06cc\u06a9 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0639\u062c\u0632\u0647\u200c\u06af\u0631 \u062f\u0631 Rive \u0648 Motion Design \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/h2>\n<p data-path-to-node=\"31\">\u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u0645\u0648\u0634\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc\u060c \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06f1\u06f0 \u062a\u06a9\u0646\u06cc\u06a9 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0645\u0644\u06a9\u0647 \u0630\u0647\u0646 \u062e\u0648\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<h3 data-path-to-node=\"32\"><span style=\"color: #008000;\">\u06f1. \u0645\u0627\u0634\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u062d\u062f\u0648\u062f (State Machine \/ FSM)<\/span><\/h3>\n<p data-path-to-node=\"33\">\u0627\u0633\u062a\u06cc\u062a \u0645\u0627\u0634\u06cc\u0646 \u06a9\u0644\u06cc\u062f \u0627\u0635\u0644\u06cc \u062a\u0639\u0627\u0645\u0644\u200c\u067e\u0630\u06cc\u0631\u06cc \u0627\u0633\u062a. \u0628\u0647 \u062c\u0627\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0648\u06cc\u062f\u06cc\u0648 \u0637\u0648\u0644\u0627\u0646\u06cc\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0631\u06cc\u0632 (States) \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0646\u062d\u0648\u0647 \u0627\u0646\u062a\u0642\u0627\u0644 (Transitions) \u0628\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"34\"><span style=\"color: #008000;\">\u06f2. \u0627\u0633\u062a\u062e\u0648\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0631\u06cc\u06af\u200c\u0628\u0646\u062f\u06cc (Bone Rigging &amp; IK)<\/span><\/h3>\n<p data-path-to-node=\"35\">Rive \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0644\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0627\u0633\u062a\u062e\u0648\u0627\u0646\u200c\u0647\u0627 (Bones) \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <b data-path-to-node=\"35\" data-index-in-node=\"91\">IK (Inverse Kinematics)<\/b>\u060c \u0648\u0642\u062a\u06cc \u062f\u0633\u062a \u06cc\u0627 \u067e\u0627\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0631\u0627 \u0645\u06cc\u200c\u06a9\u0634\u06cc\u062f\u060c \u06a9\u0644 \u0628\u062f\u0646 \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"code-block ng-tns-c1976435164-95 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQrQE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-95\">\n<div class=\"animated-opacity ng-tns-c1976435164-95\">\n<pre class=\"ng-tns-c1976435164-95\"><code class=\"code-container formatted ng-tns-c1976435164-95 no-decoration-radius\" role=\"text\" data-test-id=\"code-content\">[\u0645\u0641\u0635\u0644 \u0634\u0627\u0646\u0647] \u2500\u2500 (Bone) \u2500\u2500&gt; [\u0645\u0641\u0635\u0644 \u0622\u0631\u0646\u062c] \u2500\u2500 (IK Target) \u2500\u2500&gt; [\u0645\u0686 \u062f\u0633\u062a]\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"37\"><span style=\"color: #008000;\">\u06f3. \u0631\u062f\u06cc\u0627\u0628\u06cc \u0646\u0634\u0627\u0646\u06af\u0631 \u0645\u0627\u0648\u0633 (Mouse Tracking with Constraints)<\/span><\/h3>\n<p data-path-to-node=\"38\">\u0628\u0627 \u0648\u0635\u0644 \u06a9\u0631\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647 \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u0627\u0648\u0633 \u06a9\u0627\u0631\u0628\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062e\u06cc\u0631\u0647\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0627\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f. \u0645\u062b\u0644\u0627\u064b \u0686\u0634\u0645\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u06cc\u0627 \u0646\u0648\u0631 \u06cc\u06a9 \u0686\u0631\u0627\u063a\u200c\u0642\u0648\u0647 \u06a9\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u06a9\u0648\u0631\u0633\u0631 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627 \u062a\u0639\u0642\u06cc\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h3 data-path-to-node=\"39\"><span style=\"color: #008000;\">\u06f4. \u0645\u062a\u0648\u0646 \u067e\u0648\u06cc\u0627 (Dynamic Text Runs)<\/span><\/h3>\n<p data-path-to-node=\"40\">\u062f\u0631 Rive \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u0648\u0646 \u062f\u0631\u0648\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u062a\u06af\u200c\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u06a9\u062f (React \u06cc\u0627 Flutter) \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u0646\u06cc \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u0646\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f (\u0645\u062b\u0644 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0627 \u0627\u0645\u062a\u06cc\u0627\u0632 \u0628\u0627\u0632\u06cc \u0631\u0648\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc).<\/p>\n<h3 data-path-to-node=\"42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146945\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-300x169.webp\" alt=\"\u0627\u0633\u062a\u062e\u0648\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0631\u06cc\u06af\u200c\u0628\u0646\u062f\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0628\u0631\u062f\u0627\u0631\u06cc \u062f\u0631 Rive\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-3.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<div class=\"code-block ng-tns-c1976435164-96 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQrgE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-96\">\n<div class=\"animated-opacity ng-tns-c1976435164-96\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-96 ng-star-inserted\">\n<div class=\"buttons ng-tns-c1976435164-96 ng-star-inserted\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"46\"><span style=\"color: #008000;\">\u06f5. \u0622\u0631\u062a\u200c\u0628\u0648\u0631\u062f\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648 (Nested Artboards)<\/span><\/h3>\n<p data-path-to-node=\"47\">\u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0627\u0646\u0646\u062f Components \u062f\u0631 Figma\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 Rive \u0631\u0627 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u06cc\u06af\u0631 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u0627\u0698\u0648\u0644\u0627\u0631 \u0634\u062f\u0646 \u0648 \u06a9\u0627\u0647\u0634 \u0634\u062f\u06cc\u062f \u062d\u062c\u0645 \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<h3 data-path-to-node=\"48\"><span style=\"color: #008000;\">\u06f6. \u062a\u0631\u06a9\u06cc\u0628 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u06f1 \u0628\u0639\u062f\u06cc \u0648 \u06f2 \u0628\u0639\u062f\u06cc (1D &amp; 2D Blend States)<\/span><\/h3>\n<p data-path-to-node=\"49\">\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0633\u0631\u0639\u062a \u062d\u0631\u06a9\u062a \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0627 \u062f\u0631\u0635\u062f \u0627\u0633\u06a9\u0631\u0648\u0644\u060c \u0686\u0646\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647 \u0646\u0631\u0645\u06cc \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u0634\u0648\u0646\u062f (\u0645\u062b\u0644\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062d\u0627\u0644\u062a \u0686\u0647\u0631\u0647 \u0627\u0632 \u062e\u0646\u062b\u06cc \u0628\u0647 \u062e\u0648\u0634\u062d\u0627\u0644 \u06cc\u0627 \u0639\u0635\u0628\u0627\u0646\u06cc)\u060c \u0627\u0632 Blend States \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"50\"><span style=\"color: #008000;\">\u06f7. \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u0646\u0631\u0645 \u0628\u0627 Mesh Deformation<\/span><\/h3>\n<p data-path-to-node=\"51\">\u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0634\u0628\u06a9\u0647 (Mesh) \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0633\u0647\u200c\u0628\u0639\u062f\u06cc\u200c\u0646\u0645\u0627\u060c \u067e\u0627\u0631\u0686\u0647\u200c\u0627\u06cc\u060c \u0645\u0627\u06cc\u0639\u0627\u062a \u06cc\u0627 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0698\u0644\u0647\u200c\u0627\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"52\"><span style=\"color: #008000;\">\u06f8. \u0634\u0646\u0648\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u062f\u0631\u0648\u0646\u200c\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc (Listeners)<\/span><\/h3>\n<p data-path-to-node=\"53\">\u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062f\u0631 \u0648\u0628\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0627\u062e\u0644 \u062e\u0648\u062f\u0650 Rive \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0644\u0627\u06cc\u0647 X \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f \u06cc\u0627 \u0645\u0627\u0648\u0633 \u0631\u0627 \u0631\u0648\u06cc \u0622\u0646 \u0628\u0631\u062f (Hover)\u060c \u0641\u0644\u0627\u0646 Input \u062f\u0631 State Machine \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f!<\/p>\n<h3 data-path-to-node=\"54\"><span style=\"color: #008000;\">\u06f9. \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0632\u06cc\u0631 \u06f5 \u062f\u0642\u06cc\u0642\u0647 \u062f\u0631 \u0648\u0628 (JavaScript Web Runtime)<\/span><\/h3>\n<p data-path-to-node=\"55\">\u0628\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 JavaScript\/TypeScript \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0627\u06cc\u0644 <code data-path-to-node=\"55\" data-index-in-node=\"51\">.riv<\/code> \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"code-block ng-tns-c1976435164-97 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQrwE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-97\">\n<div class=\"animated-opacity ng-tns-c1976435164-97\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-97 ng-star-inserted\">\n<p><span class=\"ng-tns-c1976435164-97\">JavaScript<\/span><\/p>\n<div class=\"buttons ng-tns-c1976435164-97 ng-star-inserted\"><\/div>\n<\/div>\n<pre class=\"ng-tns-c1976435164-97\"><code class=\"code-container formatted ng-tns-c1976435164-97\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-keyword\">import<\/span> { Rive } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@rive-app\/canvas'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> riveInstance = <span class=\"hljs-keyword\">new<\/span> Rive({\r\n    <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">'hero_animation.riv'<\/span>,\r\n    <span class=\"hljs-attr\">canvas<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'canvas'<\/span>),\r\n    <span class=\"hljs-attr\">autoplay<\/span>: <span class=\"hljs-literal\">true<\/span>,\r\n    <span class=\"hljs-attr\">stateMachines<\/span>: <span class=\"hljs-string\">'State Machine 1'<\/span>,\r\n    <span class=\"hljs-attr\">onLoad<\/span>: <span class=\"hljs-function\">() =&gt;<\/span> {\r\n        riveInstance.resizeDrawingSurfaceToCanvas();\r\n    }\r\n});\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"57\"><span style=\"color: #008000;\">\u06f1\u06f0. \u062c\u0648\u06cc\u200c\u0627\u0633\u062a\u06cc\u06a9\u200c\u0647\u0627 \u0648 \u06a9\u0646\u062a\u0631\u0644\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (Joysticks &amp; Constraints)<\/span><\/h3>\n<p data-path-to-node=\"58\">\u0628\u0627 \u0633\u0627\u062e\u062a \u062c\u0648\u06cc\u200c\u0627\u0633\u062a\u06cc\u06a9\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u062f\u0631\u0648\u0646 Rive\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0646\u0642\u0637\u0647\u060c \u062f\u0647\u200c\u0647\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc (\u0645\u062b\u0644 \u0686\u0631\u062e\u0634 \u06f3\u06f6\u06f0 \u062f\u0631\u062c\u0647 \u0633\u0631 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631) \u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"60\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146946\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-300x169.webp\" alt=\"\u0646\u0645\u0627\u06cc\u0634 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc React \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 Rive \u062f\u0631 \u0648\u0628\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-4.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<div class=\"code-block ng-tns-c1976435164-98 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQsAE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-98\">\n<div class=\"animated-opacity ng-tns-c1976435164-98\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-98 ng-star-inserted\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-path-to-node=\"65,0\">\u0622\u0645\u0627\u062f\u0647\u200c\u0627\u06cc \u0648\u0627\u0631\u062f \u062f\u0646\u06cc\u0627\u06cc \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 Rive \u0634\u0648\u06cc\u061f<br data-start=\"608\" data-end=\"611\" \/>\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u062f\u0648\u0631\u0647 \u00ab<a class=\"woocommerce-LoopProduct-link woocommerce-loop-product__link\" href=\"https:\/\/motionguru.ir\/rive\/\">\u062f\u0648\u0631\u0647 \u0631\u0627\u06cc\u0648 \u0627\u06cc\u0646\u062a\u0631\u06a9\u062a\u06cc\u0648 \u0645\u0648\u0634\u0646<\/a>\u00bb \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646 \u0648 \u0645\u0647\u0627\u0631\u062a \u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631.<\/p>\n<h2 data-path-to-node=\"67\">\u0622\u0645\u0648\u0632\u0634 \u0628\u062e\u0634 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647: \u0633\u0627\u062e\u062a \u0641\u0631\u0645 \u0648\u0631\u0648\u062f (Login Form) \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634\u06cc<\/h2>\n<p data-path-to-node=\"68\">\u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0639\u0645\u0642 \u0642\u062f\u0631\u062a Rive\u060c \u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0645\u062d\u0628\u0648\u0628 <b data-path-to-node=\"68\" data-index-in-node=\"38\">\u00ab\u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0646\u06af\u0647\u0628\u0627\u0646 \u0641\u0631\u0645 \u0648\u0631\u0648\u062f\u00bb<\/b> \u0631\u0627 \u0628\u0627 \u0647\u0645 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648:<\/p>\n<ol start=\"1\" data-path-to-node=\"69\">\n<li>\n<p data-path-to-node=\"69,0,0\">\u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u0627\u06cc\u0645\u06cc\u0644 \u062a\u0627\u06cc\u067e \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0686\u0634\u0645\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0628\u0627 \u0637\u0648\u0644 \u0645\u062a\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"69,1,0\">\u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f\u060c \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u062f\u0633\u062a\u200c\u0647\u0627\u06cc\u0634 \u0631\u0627 \u0631\u0648\u06cc \u0686\u0634\u0645\u200c\u0647\u0627\u06cc\u0634 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f!<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"69,2,0\">\u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u0631\u0648\u062f \u0645\u0648\u0641\u0642\u060c \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0634\u0627\u062f \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u062e\u0637\u0627\u060c \u0633\u0631\u0634 \u0631\u0627 \u062a\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<\/li>\n<\/ol>\n<div class=\"code-block ng-tns-c1976435164-99 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQsQE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-99\">\n<div class=\"animated-opacity ng-tns-c1976435164-99\">\n<pre class=\"ng-tns-c1976435164-99\"><code class=\"code-container formatted ng-tns-c1976435164-99 no-decoration-radius\" role=\"text\" data-test-id=\"code-content\">       [ \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0627\u06cc\u067e \u0627\u06cc\u0645\u06cc\u0644 ] \u2500\u2500\u2500&gt; Input: numLook (0 to 100) \u2500\u2500\u2500&gt; \u0686\u0631\u062e\u0634 \u0686\u0634\u0645\u200c\u0647\u0627\r\n       [ \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u067e\u0633\u0648\u0631\u062f ]    \u2500\u2500\u2500&gt; Input: isCovering (True)   \u2500\u2500\u2500&gt; \u067e\u0648\u0634\u0627\u0646\u062f\u0646 \u0686\u0634\u0645\u200c\u0647\u0627\r\n       [ \u0646\u062a\u06cc\u062c\u0647: \u0648\u0631\u0648\u062f \u0645\u0648\u0641\u0642\u06cc\u062a\u200c\u0622\u0645\u06cc\u0632 ]  \u2500\u2500\u2500&gt; Trigger: trgSuccess       \u2500\u2500\u2500&gt; \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0644\u0628\u062e\u0646\u062f \u0648 \u067e\u0631\u06cc\u062f\u0646\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"71\"><span style=\"color: #008000;\">\u0645\u0631\u062d\u0644\u0647 \u06f1: \u0633\u0627\u062e\u062a \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 (Inputs) \u062f\u0631 State Machine<\/span><\/h3>\n<p data-path-to-node=\"72\">\u06cc\u06a9 State Machine \u0628\u0647 \u0646\u0627\u0645 <code data-path-to-node=\"72\" data-index-in-node=\"24\">LoginState<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul data-path-to-node=\"73\">\n<li>\n<p data-path-to-node=\"73,0,0\"><code data-path-to-node=\"73,0,0\" data-index-in-node=\"0\">numLook<\/code> \u0627\u0632 \u0646\u0648\u0639 <b data-path-to-node=\"73,0,0\" data-index-in-node=\"15\">Number<\/b> (\u0628\u06cc\u0646 \u06f0 \u062a\u0627 \u06f1\u06f0\u06f0 \u0628\u0631\u0627\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0686\u0634\u0645\u200c\u0647\u0627)<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"73,1,0\"><code data-path-to-node=\"73,1,0\" data-index-in-node=\"0\">isCovering<\/code> \u0627\u0632 \u0646\u0648\u0639 <b data-path-to-node=\"73,1,0\" data-index-in-node=\"18\">Boolean<\/b> (\u0628\u0631\u0627\u06cc \u06a9\u0627\u0648\u0631 \u06a9\u0631\u062f\u0646 \u0686\u0634\u0645\u200c\u0647\u0627)<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"73,2,0\"><code data-path-to-node=\"73,2,0\" data-index-in-node=\"0\">trgSuccess<\/code> \u0648 <code data-path-to-node=\"73,2,0\" data-index-in-node=\"13\">trgFail<\/code> \u0627\u0632 \u0646\u0648\u0639 <b data-path-to-node=\"73,2,0\" data-index-in-node=\"28\">Trigger<\/b><\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"74\"><span style=\"color: #008000;\">\u0645\u0631\u062d\u0644\u0647 \u06f2: \u0627\u062a\u0635\u0627\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0628\u0627 \u0644\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 (Animation Layers)<\/span><\/h3>\n<p data-path-to-node=\"75\">Rive \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0646\u062f \u0644\u0627\u06cc\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0645\u0632\u0645\u0627\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<ul data-path-to-node=\"76\">\n<li>\n<p data-path-to-node=\"76,0,0\"><b data-path-to-node=\"76,0,0\" data-index-in-node=\"0\">Base Layer:<\/b> \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0646\u0634\u0633\u062a\u0646\u060c \u067e\u0644\u06a9 \u0632\u062f\u0646 \u062a\u0635\u0627\u062f\u0641\u06cc (Idle).<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"76,1,0\"><b data-path-to-node=\"76,1,0\" data-index-in-node=\"0\">Look Layer:<\/b> \u06cc\u06a9 1D Blend State \u0645\u062a\u0635\u0644 \u0628\u0647 <code data-path-to-node=\"76,1,0\" data-index-in-node=\"38\">numLook<\/code> \u06a9\u0647 \u0627\u0632 \u062d\u0627\u0644\u062a &#8220;\u0646\u06af\u0627\u0647 \u0628\u0647 \u0686\u067e&#8221; \u062a\u0627 &#8220;\u0646\u06af\u0627\u0647 \u0628\u0647 \u0631\u0627\u0633\u062a&#8221; \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"76,2,0\"><b data-path-to-node=\"76,2,0\" data-index-in-node=\"0\">Hands Layer:<\/b> \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0632 \u062d\u0627\u0644\u062a \u0622\u0632\u0627\u062f \u0628\u0647 \u062d\u0627\u0644\u062a &#8220;\u062f\u0633\u062a \u0631\u0648\u06cc \u0686\u0634\u0645&#8221; \u0648\u0642\u062a\u06cc <code data-path-to-node=\"76,2,0\" data-index-in-node=\"60\">isCovering == true<\/code> \u0628\u0627\u0634\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"77\"><span style=\"color: #008000;\">\u0645\u0631\u062d\u0644\u0647 \u06f3: \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0648 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0641\u0631\u0645 React<\/span><\/h3>\n<div class=\"code-block ng-tns-c1976435164-100 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQsgE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-100\">\n<div class=\"animated-opacity ng-tns-c1976435164-100\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-100 ng-star-inserted\">\n<p><span class=\"ng-tns-c1976435164-100\">JavaScript<\/span><\/p>\n<div class=\"buttons ng-tns-c1976435164-100 ng-star-inserted\"><\/div>\n<\/div>\n<pre class=\"ng-tns-c1976435164-100\"><code class=\"code-container formatted ng-tns-c1976435164-100\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-keyword\">import<\/span> { useRive, useStateMachineInput } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@rive-app\/react-canvas'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> LoginForm = <span class=\"hljs-function\">() =&gt;<\/span> {\r\n    <span class=\"hljs-keyword\">const<\/span> { rive, RiveComponent } = useRive({\r\n        <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">'animated_character.riv'<\/span>,\r\n        <span class=\"hljs-attr\">stateMachines<\/span>: <span class=\"hljs-string\">'LoginState'<\/span>,\r\n        <span class=\"hljs-attr\">autoplay<\/span>: <span class=\"hljs-literal\">true<\/span>,\r\n    });\r\n\r\n    <span class=\"hljs-comment\">\/\/ \u062f\u0631\u06cc\u0627\u0641\u062a \u0631\u0641\u0631\u0646\u0633 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc Rive<\/span>\r\n    <span class=\"hljs-keyword\">const<\/span> numLookInput = useStateMachineInput(rive, <span class=\"hljs-string\">'LoginState'<\/span>, <span class=\"hljs-string\">'numLook'<\/span>);\r\n    <span class=\"hljs-keyword\">const<\/span> isCoveringInput = useStateMachineInput(rive, <span class=\"hljs-string\">'LoginState'<\/span>, <span class=\"hljs-string\">'isCovering'<\/span>);\r\n    <span class=\"hljs-keyword\">const<\/span> triggerSuccess = useStateMachineInput(rive, <span class=\"hljs-string\">'LoginState'<\/span>, <span class=\"hljs-string\">'trgSuccess'<\/span>);\r\n\r\n    <span class=\"hljs-keyword\">const<\/span> handleEmailChange = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\r\n        <span class=\"hljs-keyword\">if<\/span> (numLookInput) {\r\n            <span class=\"hljs-comment\">\/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0637\u0648\u0644 \u0645\u062a\u0646 \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u0639\u062f\u062f\u06cc \u0628\u06cc\u0646 \u06f0 \u062a\u0627 \u06f1\u06f0\u06f0<\/span>\r\n            numLookInput.value = <span class=\"hljs-built_in\">Math<\/span>.min(e.target.value.length * <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-number\">100<\/span>);\r\n        }\r\n    };\r\n\r\n    <span class=\"hljs-keyword\">return<\/span> (\r\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"login-card\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"rive-container\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">RiveComponent<\/span> \/&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> \r\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"email\"<\/span> \r\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleEmailChange}<\/span>\r\n                <span class=\"hljs-attr\">onFocus<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> isCoveringInput &amp;&amp; (isCoveringInput.value = false)}\r\n            \/&gt;\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> \r\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"password\"<\/span> \r\n                <span class=\"hljs-attr\">onFocus<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> isCoveringInput &amp;&amp; (isCoveringInput.value = true)}\r\n            \/&gt;\r\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n    );\r\n};\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"80\"><\/h3>\n<h3 data-path-to-node=\"80\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146947\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-300x169.webp\" alt=\"\u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc Rive \u0648 \u06af\u0631\u0627\u0641 State Machine\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-5.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<div class=\"code-block ng-tns-c1976435164-101 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQswE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-101\">\n<div class=\"animated-opacity ng-tns-c1976435164-101\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-101 ng-star-inserted\">\n<div class=\"buttons ng-tns-c1976435164-101 ng-star-inserted\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-path-to-node=\"84\">\u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u0648 \u0631\u0641\u0639 \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u062f\u0631 Rive (Troubleshooting)<\/h2>\n<p data-path-to-node=\"85\">\u06a9\u0627\u0631 \u0628\u0627 Rive \u0628\u0627 \u0648\u062c\u0648\u062f \u0633\u0627\u062f\u06af\u06cc\u060c \u06af\u0627\u0647\u06cc \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647\u200c\u0627\u06cc \u067e\u06cc\u0634 \u0631\u0648\u06cc \u0637\u0631\u0627\u062d\u0627\u0646 \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062c\u062f\u0648\u0644 \u0648 \u0646\u06a9\u0627\u062a \u0632\u06cc\u0631\u060c \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0631\u0641\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<table data-path-to-node=\"86\">\n<thead>\n<tr>\n<td><strong>\u0645\u0634\u06a9\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647<\/strong><\/td>\n<td><strong>\u0639\u0644\u062a \u0641\u0646\u06cc<\/strong><\/td>\n<td><strong>\u0631\u0627\u0647\u06a9\u0627\u0631 \u0633\u0631\u06cc\u0639 \u0648 \u0639\u0645\u0644\u06cc<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span data-path-to-node=\"86,1,0,0\"><b data-path-to-node=\"86,1,0,0\" data-index-in-node=\"0\">\u062a\u0627\u0631 \u0634\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u0647\u0627\u06cc \u06f4K \/ Retina<\/b><\/span><\/td>\n<td><span data-path-to-node=\"86,1,1,0\">\u0639\u062f\u0645 \u062a\u0646\u0638\u06cc\u0645 \u0646\u0633\u0628\u062a \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0633\u062a\u06af\u0627\u0647 (DPI)<\/span><\/td>\n<td><span data-path-to-node=\"86,1,2,0\">\u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f <code data-path-to-node=\"86,1,2,0\" data-index-in-node=\"13\">resizeDrawingSurfaceToCanvas()<\/code> \u0647\u0646\u06af\u0627\u0645 \u0644\u0648\u062f<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"86,2,0,0\"><b data-path-to-node=\"86,2,0,0\" data-index-in-node=\"0\">\u0639\u0645\u0644 \u0646\u06a9\u0631\u062f\u0646 State Machine \u062f\u0631 \u06a9\u062f<\/b><\/span><\/td>\n<td><span data-path-to-node=\"86,2,1,0\">\u0639\u062f\u0645 \u062a\u0637\u0627\u0628\u0642 \u062f\u0642\u06cc\u0642 \u0646\u0627\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 (Case Sensitivity)<\/span><\/td>\n<td><span data-path-to-node=\"86,2,2,0\">\u0686\u06a9 \u06a9\u0631\u062f\u0646 \u062f\u0642\u06cc\u0642\u06cc \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0648 \u06a9\u0648\u0686\u06a9 \u0646\u0627\u0645 StateMachine \u0648 Input\u0647\u0627<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"86,3,0,0\"><b data-path-to-node=\"86,3,0,0\" data-index-in-node=\"0\">\u0627\u0641\u062a \u0634\u062f\u06cc\u062f \u0641\u0631\u06cc\u0645 (Lag) \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644<\/b><\/span><\/td>\n<td><span data-path-to-node=\"86,3,1,0\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0632 Clipping Paths \u06cc\u0627 Mesh\u0647\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646<\/span><\/td>\n<td><span data-path-to-node=\"86,3,2,0\">\u0633\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u06a9\u0627\u0647\u0634 \u062a\u0639\u062f\u0627\u062f \u0646\u0642\u0627\u0637 (Vertices) \u062f\u0631 Figma\/Rive<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"86,4,0,0\"><b data-path-to-node=\"86,4,0,0\" data-index-in-node=\"0\">\u06a9\u0646\u062f\u06cc \u062f\u0631 \u0644\u0648\u062f \u0627\u0648\u0644\u06cc\u0647 \u0635\u0641\u062d\u0647 \u0648\u0628<\/b><\/span><\/td>\n<td><span data-path-to-node=\"86,4,1,0\">\u0639\u062f\u0645 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0648 \u067e\u0627\u06a9\u200c\u0633\u0627\u0632\u06cc \u0644\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/span><\/td>\n<td><span data-path-to-node=\"86,4,2,0\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 Cleanup \u0648 \u062d\u0630\u0641 Artboard\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0642\u0628\u0644 \u0627\u0632 Export<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-path-to-node=\"87\"><span style=\"color: #008000;\">\u06f3 \u0646\u06a9\u062a\u0647 \u0637\u0644\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af \u0633\u0631\u06cc\u0639:<\/span><\/h3>\n<ol start=\"1\" data-path-to-node=\"88\">\n<li>\n<p data-path-to-node=\"88,0,0\"><b data-path-to-node=\"88,0,0\" data-index-in-node=\"0\">\u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u0633\u0648\u0644 \u0645\u0631\u0648\u0631\u06af\u0631:<\/b> \u0627\u06af\u0631 \u0641\u0627\u06cc\u0644 <code data-path-to-node=\"88,0,0\" data-index-in-node=\"29\">.riv<\/code> \u0644\u0648\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c CORS Policy \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"88,1,0\"><b data-path-to-node=\"88,1,0\" data-index-in-node=\"0\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Rive Inspector:<\/b> \u062f\u0631 \u0645\u062d\u06cc\u0637 Rive Editor \u0647\u0645\u0648\u0627\u0631\u0647 \u062a\u0633\u062a\u200c\u0647\u0627\u06cc Listeners \u0631\u0627 \u0631\u0648\u06cc Playhead \u0648\u0627\u0642\u0639\u06cc \u062a\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"88,2,0\"><b data-path-to-node=\"88,2,0\" data-index-in-node=\"0\">\u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0641\u0638\u0647 (Memory Leaks):<\/b> \u062f\u0631 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627\u06cc SPA \u0645\u0627\u0646\u0646\u062f React \u06cc\u0627 Vue\u060c \u0647\u0646\u06af\u0627\u0645 Unmount \u0634\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u062d\u062a\u0645\u0627\u064b \u0645\u062a\u062f <code data-path-to-node=\"88,2,0\" data-index-in-node=\"107\">.cleanup()<\/code> \u06cc\u0627 <code data-path-to-node=\"88,2,0\" data-index-in-node=\"121\">.destroy()<\/code> \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Rive \u0631\u0627 \u0635\u062f\u0627 \u0628\u0632\u0646\u06cc\u062f.<\/p>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3 data-path-to-node=\"90\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146948\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-300x169.webp\" alt=\"\u06af\u0631\u0627\u0641\u06cc\u06a9 \u0633\u0647\u200c\u0628\u0639\u062f\u06cc \u062f\u06cc\u0628\u0627\u06af \u0648 \u0631\u0641\u0639 \u062e\u0637\u0627\u0647\u0627\u06cc \u0641\u0646\u06cc \u062f\u0631 Rive\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-6.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<div class=\"code-block ng-tns-c1976435164-102 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQtgE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-102\">\n<div class=\"animated-opacity ng-tns-c1976435164-102\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-102 ng-star-inserted\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-path-to-node=\"94\">\u062c\u062f\u0648\u0644 \u0645\u0631\u062c\u0639 \u0633\u0631\u06cc\u0639 (Cheat Sheet): \u0645\u0642\u0627\u06cc\u0633\u0647 \u0648 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 Rive<\/h2>\n<p data-path-to-node=\"95\">\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u06a9\u0627\u0631 \u062f\u0631 Rive Editor \u0648 \u062a\u0635\u0645\u06cc\u0645\u200c\u06af\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc\u060c \u0627\u06cc\u0646 \u062c\u062f\u0648\u0644 \u0645\u0631\u062c\u0639 \u0631\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<h3 data-path-to-node=\"96\"><span style=\"color: #008000;\">\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 Rive Editor<\/span><\/h3>\n<table data-path-to-node=\"97\">\n<thead>\n<tr>\n<td><strong>\u06a9\u0644\u06cc\u062f \u0645\u06cc\u0627\u0646\u0628\u0631<\/strong><\/td>\n<td><strong>\u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 Rive Editor<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span data-path-to-node=\"97,1,0,0\"><b data-path-to-node=\"97,1,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,1,0,0\" data-index-in-node=\"0\">V<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,1,1,0\">\u0627\u0628\u0632\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 (Select Tool)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"97,2,0,0\"><b data-path-to-node=\"97,2,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,2,0,0\" data-index-in-node=\"0\">P<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,2,1,0\">\u0627\u0628\u0632\u0627\u0631 \u0631\u0633\u0645 \u0645\u0633\u06cc\u0631 \u0628\u0631\u062f\u0627\u0631\u06cc (Pen Tool)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"97,3,0,0\"><b data-path-to-node=\"97,3,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,3,0,0\" data-index-in-node=\"0\">B<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,3,1,0\">\u0633\u0627\u062e\u062a \u0627\u0633\u062a\u062e\u0648\u0627\u0646 \u062c\u062f\u06cc\u062f (Bone Tool)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"97,4,0,0\"><b data-path-to-node=\"97,4,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,4,0,0\" data-index-in-node=\"0\">K<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,4,1,0\">\u06a9\u0644\u06cc\u062f\u06af\u0630\u0627\u0631\u06cc \u062a\u0645\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628\u200c\u0634\u062f\u0647 \u062f\u0631 Timeline<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"97,5,0,0\"><b data-path-to-node=\"97,5,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,5,0,0\" data-index-in-node=\"0\">Shift + A<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,5,1,0\">\u0627\u06cc\u062c\u0627\u062f \u0622\u0631\u062a\u200c\u0628\u0648\u0631\u062f \u062c\u062f\u06cc\u062f (Artboard)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"97,6,0,0\"><b data-path-to-node=\"97,6,0,0\" data-index-in-node=\"0\"><code data-path-to-node=\"97,6,0,0\" data-index-in-node=\"0\">Space + Drag<\/code><\/b><\/span><\/td>\n<td><span data-path-to-node=\"97,6,1,0\">\u062c\u0627\u0628\u0647\u200c\u062c\u0627\u06cc\u06cc \u062f\u0631 \u0628\u0648\u0645 (Pan Canvas)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-path-to-node=\"98\"><span style=\"color: #008000;\">\u0645\u0642\u0627\u06cc\u0633\u0647 Rive \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 Lottie (After Effects)<\/span><\/h3>\n<table data-path-to-node=\"99\">\n<thead>\n<tr>\n<td><strong>\u0648\u06cc\u0698\u06af\u06cc<\/strong><\/td>\n<td><strong>Rive (\u0641\u0646\u0627\u0648\u0631\u06cc \u0646\u0633\u0644 \u062c\u062f\u06cc\u062f)<\/strong><\/td>\n<td><strong>Lottie (\u0641\u0646\u0627\u0648\u0631\u06cc \u0633\u0646\u062a\u06cc)<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span data-path-to-node=\"99,1,0,0\"><b data-path-to-node=\"99,1,0,0\" data-index-in-node=\"0\">\u062a\u0639\u0627\u0645\u0644\u200c\u067e\u0630\u06cc\u0631\u06cc (Interactivity)<\/b><\/span><\/td>\n<td><span data-path-to-node=\"99,1,1,0\">real-time \u062a\u0639\u0627\u0645\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627 State Machine<\/span><\/td>\n<td><span data-path-to-node=\"99,1,2,0\">\u0628\u0633\u06cc\u0627\u0631 \u0645\u062d\u062f\u0648\u062f (\u0641\u0642\u0637 Play \/ Pause \/ Seek)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"99,2,0,0\"><b data-path-to-node=\"99,2,0,0\" data-index-in-node=\"0\">\u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 (File Size)<\/b><\/span><\/td>\n<td><span data-path-to-node=\"99,2,1,0\">\u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u06a9\u0645 (\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u06f1\u06f0 \u062a\u0627 \u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0628\u0627\u06cc\u062a)<\/span><\/td>\n<td><span data-path-to-node=\"99,2,2,0\">\u0645\u062a\u0648\u0633\u0637 \u062a\u0627 \u0633\u0646\u06af\u06cc\u0646 (\u0628\u0647 \u062f\u0644\u06cc\u0644 JSON\u0647\u0627\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"99,3,0,0\"><b data-path-to-node=\"99,3,0,0\" data-index-in-node=\"0\">\u06a9\u0646\u062a\u0631\u0644 \u0628\u0627 \u06a9\u062f (Code Control)<\/b><\/span><\/td>\n<td><span data-path-to-node=\"99,3,1,0\">\u062f\u0633\u062a\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0627\u0633\u062a\u062e\u0648\u0627\u0646\u200c\u0647\u0627\u060c \u0645\u062a\u0648\u0646 \u0648 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627<\/span><\/td>\n<td><span data-path-to-node=\"99,3,2,0\">\u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0644\u0627\u06cc\u0647\u200c\u0647\u0627 \u06cc\u0627 \u0633\u0631\u0639\u062a \u067e\u062e\u0634<\/span><\/td>\n<\/tr>\n<tr>\n<td><span data-path-to-node=\"99,4,0,0\"><b data-path-to-node=\"99,4,0,0\" data-index-in-node=\"0\">\u0628\u0627\u0631 \u067e\u0631\u062f\u0627\u0632\u0634\u06cc (CPU\/GPU)<\/b><\/span><\/td>\n<td><span data-path-to-node=\"99,4,1,0\">\u0628\u0633\u06cc\u0627\u0631 \u0628\u0647\u06cc\u0646\u0647 \u0628\u0627 \u0645\u0648\u062a\u0648\u0631 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc C++<\/span><\/td>\n<td><span data-path-to-node=\"99,4,2,0\">\u0645\u0635\u0631\u0641 \u0628\u0627\u0644\u0627\u06cc CPU \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 data-path-to-node=\"101\">\u06f1\u06f0 \u0627\u0634\u062a\u0628\u0627\u0647 \u0628\u0632\u0631\u06af \u06a9\u0647 \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646\u0631\u0647\u0627\u06cc Rive \u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646 \u067e\u0631\u0647\u06cc\u0632 \u06a9\u0646\u0646\u062f!<\/h2>\n<p data-path-to-node=\"102\">\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u062e\u0631\u0648\u062c\u06cc \u0631\u0648\u0627\u0646\u060c \u0628\u0647\u06cc\u0646\u0647 \u0648 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0647\u0631\u06af\u0632 \u0627\u06cc\u0646 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627 \u0645\u0631\u062a\u06a9\u0628 \u0646\u0634\u0648\u06cc\u062f:<\/p>\n<ol start=\"1\" data-path-to-node=\"103\">\n<li>\n<p data-path-to-node=\"103,0,0\"><b data-path-to-node=\"103,0,0\" data-index-in-node=\"0\">\u0637\u0631\u0627\u062d\u06cc \u0628\u0627 \u062a\u0641\u06a9\u0631 After Effects:<\/b> Rive \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0628\u0627\u0632\u06cc \u0632\u0645\u0627\u0646\u200c\u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a\u060c \u0646\u0647 \u06cc\u06a9 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u062a\u062f\u0648\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648! \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062d\u0627\u0644\u062a\u200c\u0647\u0627 (States) \u0628\u0633\u0627\u0632\u06cc\u062f \u0646\u0647 \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646\u200c\u0647\u0627\u06cc \u062e\u0637\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,1,0\"><b data-path-to-node=\"103,1,0\" data-index-in-node=\"0\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u06cc\u06a9\u0633\u0644\u06cc (PNG\/JPEG):<\/b> \u062a\u0627 \u062c\u0627\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0632 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc (Vector) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0646\u0627\u0645\u062d\u062f\u0648\u062f \u0648 \u062d\u062c\u0645 \u0632\u06cc\u0631 \u06f1\u06f0\u06f0 \u06a9\u06cc\u0644\u0648\u0628\u0627\u06cc\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,2,0\"><b data-path-to-node=\"103,2,0\" data-index-in-node=\"0\">\u0639\u062f\u0645 \u0646\u0627\u0645\u200c\u06af\u0630\u0627\u0631\u06cc \u0635\u062d\u06cc\u062d \u0644\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627:<\/b> \u0646\u0627\u0645\u200c\u06af\u0630\u0627\u0631\u06cc \u0628\u06cc\u200c\u0646\u0638\u0645 \u0645\u062b\u0644 <code data-path-to-node=\"103,2,0\" data-index-in-node=\"60\">Shape 1<\/code> \u06cc\u0627 <code data-path-to-node=\"103,2,0\" data-index-in-node=\"71\">New Input<\/code> \u0631\u0648\u0646\u062f \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633 \u062a\u06cc\u0645 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0628\u0648\u0633 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f!<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,3,0\"><b data-path-to-node=\"103,3,0\" data-index-in-node=\"0\">\u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a\u062e\u0648\u0627\u0646\u200c\u0647\u0627 (Over-Rigging):<\/b> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0647\u200c\u0647\u0627 \u0627\u0633\u062a\u062e\u0648\u0627\u0646 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0648\u0627\u0642\u0639\u06cc\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u0631\u06cc\u0627\u0636\u06cc Rive Runtime \u0631\u0627 \u0633\u0646\u06af\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,4,0\"><b data-path-to-node=\"103,4,0\" data-index-in-node=\"0\">\u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 \u062d\u0627\u0644\u062a \u067e\u0627\u0633\u062e\u200c\u06af\u0648\u06cc\u06cc (Responsive Layout):<\/b> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f Layout Constraints \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0648 \u062f\u0633\u06a9\u062a\u0627\u067e \u0628\u0647 \u0632\u06cc\u0628\u0627\u06cc\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u062f\u0647\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,5,0\"><b data-path-to-node=\"103,5,0\" data-index-in-node=\"0\">\u0639\u062f\u0645 \u062a\u0633\u062a Listeners \u0642\u0628\u0644 \u0627\u0632 \u062f\u0627\u0646\u0644\u0648\u062f \u0641\u0627\u06cc\u0644:<\/b> \u0647\u0645\u06cc\u0634\u0647 \u0642\u0628\u0644 \u0627\u0632 \u062e\u0631\u0648\u062c\u06cc \u06af\u0631\u0641\u062a\u0646\u060c \u062f\u0631 \u062f\u0627\u062e\u0644 Rive Editor \u0631\u0641\u062a\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u0648 \u0647\u0627\u0648\u0631 \u0631\u0627 \u062a\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,6,0\"><b data-path-to-node=\"103,6,0\" data-index-in-node=\"0\">\u067e\u06cc\u0686\u06cc\u062f\u0647 \u06a9\u0631\u062f\u0646 \u0646\u0648\u062f\u0647\u0627\u06cc State Machine:<\/b> \u0627\u06af\u0631 \u06af\u0631\u0627\u0641 State Machine \u0634\u0645\u0627 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0641 \u0633\u0631\u062f\u0631\u06af\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0686\u0646\u062f <b data-path-to-node=\"103,6,0\" data-index-in-node=\"106\">Animation Layer<\/b> \u0645\u062c\u0632\u0627 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,7,0\"><b data-path-to-node=\"103,7,0\" data-index-in-node=\"0\">\u0628\u06cc\u200c\u062a\u0648\u062c\u0647\u06cc \u0628\u0647 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc Reduced Motion:<\/b> \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644 \u062e\u0648\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u062d\u0627\u0644\u062a \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,8,0\"><b data-path-to-node=\"103,8,0\" data-index-in-node=\"0\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0627\u0635\u062d\u06cc\u062d \u0627\u0632 Clipping Mask\u0647\u0627:<\/b> \u0645\u0627\u0633\u06a9\u200c\u0647\u0627\u06cc \u0645\u062a\u0639\u062f\u062f \u0648 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0641\u0634\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0628\u0647 Canvas \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"103,9,0\"><b data-path-to-node=\"103,9,0\" data-index-in-node=\"0\">\u062d\u0630\u0641 \u0646\u06a9\u0631\u062f\u0646 \u0644\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0627\u06cc\u062f\u0647\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 Artboard:<\/b> \u062a\u0645\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u0645\u062e\u0641\u06cc\u200c\u0634\u062f\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0647\u0646\u06af\u0627\u0645 \u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 <code data-path-to-node=\"103,9,0\" data-index-in-node=\"103\">.riv<\/code> \u0631\u0627 \u0628\u0627\u0644\u0627 \u0645\u06cc\u200c\u0628\u0631\u0646\u062f.<\/p>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<div class=\"code-block ng-tns-c1976435164-103 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQuwE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-103\">\n<div class=\"animated-opacity ng-tns-c1976435164-103\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-103 ng-star-inserted\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146949\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-300x169.webp\" alt=\"\u062a\u0635\u0648\u06cc\u0631 \u0645\u0641\u0647\u0648\u0645\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u0634\u0646 \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0648 \u067e\u0631\u0647\u06cc\u0632 \u0627\u0632 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a Rive\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-7.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-path-to-node=\"109\"><\/h2>\n<h2 data-path-to-node=\"109\">\u062a\u0631\u0641\u0646\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0645\u06a9\u0645\u0644 (Pro Tips)<\/h2>\n<h3 data-path-to-node=\"110\"><span style=\"color: #008000;\">\u06f1. \u062e\u0637\u200c\u0644\u0648\u0644\u0647\u200c \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0632 Figma \u0628\u0647 Rive (Figma to Rive Pipeline)<\/span><\/h3>\n<p data-path-to-node=\"111\">\u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0633\u0645\u06cc Rive \u0628\u0631\u0627\u06cc \u0641\u06cc\u06af\u0645\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0644\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0645\u062a\u0646\u06cc\u060c \u0628\u0631\u062f\u0627\u0631\u0647\u0627 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u06af\u0631\u0648\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0634\u062f\u0647 \u0631\u0627 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u0648 \u0628\u062f\u0648\u0646 \u0628\u0647\u0645\u200c\u0631\u06cc\u062e\u062a\u06af\u06cc\u00a0 \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3 data-path-to-node=\"112\"><span style=\"color: #008000;\">\u06f2. \u062a\u06a9\u0646\u06cc\u06a9 Dark Mode \u067e\u0648\u06cc\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627<\/span><\/h3>\n<p data-path-to-node=\"113\">\u0628\u0647 \u062c\u0627\u06cc \u0633\u0627\u062e\u062a \u062f\u0648 \u0641\u0627\u06cc\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u062c\u0632\u0627 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0634\u0628 \u0648 \u0631\u0648\u0632\u060c \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc Boolean \u0628\u0647 \u0646\u0627\u0645 <code data-path-to-node=\"113\" data-index-in-node=\"77\">isDarkMode<\/code> \u062f\u0631 State Machine \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0646 \u062f\u0631 \u0648\u0628\u060c \u0631\u0646\u06af \u0644\u0627\u06cc\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u06a9\u0646\u06cc\u062f!<\/p>\n<h3 data-path-to-node=\"114\"><span style=\"color: #008000;\">\u06f3. \u062a\u0631\u06a9\u06cc\u0628 Rive \u0628\u0627 Tailwind CSS \u0648 React<\/span><\/h3>\n<p data-path-to-node=\"115\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Rive Canvas \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc Responsive \u062f\u0631 Tailwind \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"code-block ng-tns-c1976435164-104 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQvAE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-104\">\n<div class=\"animated-opacity ng-tns-c1976435164-104\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-104 ng-star-inserted\">\n<p><span class=\"ng-tns-c1976435164-104\">HTML<\/span><\/p>\n<div class=\"buttons ng-tns-c1976435164-104 ng-star-inserted\"><\/div>\n<\/div>\n<pre class=\"ng-tns-c1976435164-104\"><code class=\"code-container formatted ng-tns-c1976435164-104\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full max-w-md h-64 md:h-96 aspect-square\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">RiveComponent<\/span> \/&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"118\"><\/h3>\n<div class=\"code-block ng-tns-c1976435164-105 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"0\" data-ved=\"0CAAQhtANahgKEwjspMSZpuyVAxUAAAAAHQAAAAAQvQE\">\n<div class=\"formatted-code-block-internal-container ng-tns-c1976435164-105\">\n<div class=\"animated-opacity ng-tns-c1976435164-105\">\n<div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1976435164-105 ng-star-inserted\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146950\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-300x169.webp\" alt=\"\u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc Figma\u060c Rive\u060c React \u0648 Flutter\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-8.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<div class=\"buttons ng-tns-c1976435164-105 ng-star-inserted\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-path-to-node=\"122\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644 (FAQ)<\/h2>\n<h3 data-path-to-node=\"123\"><span style=\"color: #008000;\">\u06f1. Rive \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06cc\u0627 Lottie\u061f \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/span><\/h3>\n<p data-path-to-node=\"124\">\u0627\u06af\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0634\u0645\u0627 <b data-path-to-node=\"124\" data-index-in-node=\"16\">\u062e\u0637\u06cc \u0648 \u063a\u06cc\u0631\u062a\u0639\u0627\u0645\u0644\u06cc<\/b> \u0627\u0633\u062a (\u0645\u062b\u0644 \u06cc\u06a9 \u0622\u06cc\u06a9\u0648\u0646 \u062a\u06cc\u06a9 \u0633\u0628\u0632 \u0633\u0627\u062f\u0647 \u06cc\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 Lottie \u0644\u0648\u062f\u06cc\u0646\u06af)\u060c Lottie \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a. \u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u0647 <b data-path-to-node=\"124\" data-index-in-node=\"125\">\u062a\u0639\u0627\u0645\u0644 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u060c \u06a9\u0646\u062a\u0631\u0644 \u0628\u0627 \u06a9\u062f\u060c \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u06cc\u0627 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u067e\u0627\u06cc\u06cc\u0646<\/b> \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u060c Rive \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0634\u06a9\u06cc \u0628\u0631\u0646\u062f\u0647 \u0645\u0637\u0644\u0642 \u0627\u0633\u062a.<\/p>\n<h3 data-path-to-node=\"125\"><span style=\"color: #008000;\">\u06f2. \u0622\u06cc\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 Rive \u062d\u062a\u0645\u0627\u064b \u0628\u0627\u06cc\u062f \u062f\u0627\u0646\u0634 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645\u061f<\/span><\/h3>\n<p data-path-to-node=\"126\">\u062e\u06cc\u0631! \u0637\u0631\u0627\u062d\u0627\u0646 UI\/UX \u0648 \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646\u0631\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062a\u0645\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u060c \u0631\u06cc\u06af\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u0648 \u0645\u0646\u0637\u0642 \u062a\u0639\u0627\u0645\u0644\u06cc (State Machine) \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644 \u062f\u0631 <b data-path-to-node=\"126\" data-index-in-node=\"123\">Rive Editor \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u062e\u0637 \u06a9\u062f<\/b> \u0628\u0633\u0627\u0632\u0646\u062f. \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u062a\u0646\u0647\u0627 \u0641\u0627\u06cc\u0644 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u062f \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<h3 data-path-to-node=\"127\"><span style=\"color: #008000;\">\u06f3. Rive \u0631\u0648\u06cc \u06a9\u062f\u0627\u0645 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627 \u0648 \u067e\u0644\u062a\u0641\u0631\u0645\u200c\u0647\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f\u061f<\/span><\/h3>\n<p data-path-to-node=\"128\">Rive \u062f\u0627\u0631\u0627\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0631\u0633\u0645\u06cc (Runtimes) \u0628\u0631\u0627\u06cc <b data-path-to-node=\"128\" data-index-in-node=\"45\">React\u060c Vue\u060c Angular\u060c WebGL\/Canvas (Vanilla JS)\u060c Flutter\u060c iOS (Swift)\u060c Android (Kotlin)\u060c React Native\u060c C++ \u0648 \u062d\u062a\u06cc Unity \/ Unreal Engine<\/b> \u0627\u0633\u062a!<\/p>\n<h3 data-path-to-node=\"129\"><span style=\"color: #008000;\">\u06f4. \u062a\u0627\u062b\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Rive \u0631\u0648\u06cc \u0633\u0631\u0639\u062a \u0633\u0627\u06cc\u062a \u0648 \u0633\u0626\u0648 (SEO) \u0686\u06cc\u0633\u062a\u061f<\/span><\/h3>\n<p data-path-to-node=\"130\">\u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc <code data-path-to-node=\"130\" data-index-in-node=\"23\">.riv<\/code> \u062d\u062c\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0646\u0627\u0686\u06cc\u0632\u06cc \u062f\u0627\u0631\u0646\u062f (\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0632\u06cc\u0631 \u06f5\u06f0 \u06a9\u06cc\u0644\u0648\u0628\u0627\u06cc\u062a) \u0648 \u0631\u0646\u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u0631\u0648\u06cc \u0628\u0648\u0645 Canvas \u062a\u0648\u0633\u0637 GPU \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0647\u06cc\u0686 \u0644\u0648\u062f \u0627\u0636\u0627\u0641\u06cc \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0627\u0631\u062f \u0646\u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627\u0639\u062b <b data-path-to-node=\"130\" data-index-in-node=\"170\">\u0627\u0631\u062a\u0642\u0627\u06cc \u0634\u0627\u062e\u0635\u200c\u0647\u0627\u06cc Core Web Vitals \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0626\u0648<\/b> \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<h2 data-path-to-node=\"141\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-146951\" src=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-300x169.webp\" alt=\"\u0622\u06cc\u0646\u062f\u0647 \u0645\u0648\u0634\u0646 \u062f\u06cc\u0632\u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646\" width=\"728\" height=\"410\" srcset=\"https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-300x169.webp 300w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-1024x576.webp 1024w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-768x432.webp 768w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-1536x864.webp 1536w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9-390x220.webp 390w, https:\/\/motionguru.ir\/blog\/wp-content\/uploads\/2026\/07\/image-9.webp 1672w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h2>\n<p>&nbsp;<\/p>\n<h3 data-path-to-node=\"134\">\ud83d\udccc \u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u0627\u0642\u062f\u0627\u0645 \u0633\u0631\u06cc\u0639 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639:<\/h3>\n<ol start=\"1\" data-path-to-node=\"135\">\n<li>\n<p data-path-to-node=\"135,0,0\">\u0647\u0645\u06cc\u0646 \u0627\u0645\u0631\u0648\u0632 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0631 <code data-path-to-node=\"135,0,0\" data-index-in-node=\"29\">editor.rive.app<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"135,1,0\">\u06cc\u06a9 \u0622\u06cc\u06a9\u0648\u0646 \u0633\u0627\u062f\u0647 (\u0645\u062b\u0644 \u062f\u06a9\u0645\u0647 \u0644\u0627\u06cc\u06a9 \u06cc\u0627 \u0645\u0646\u0648\u06cc \u0647\u0645\u0628\u0631\u06af\u0631\u06cc) \u0631\u0627 \u0627\u0632 Figma \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"135,2,0\">\u06cc\u06a9 State Machine \u0633\u0627\u062f\u0647 \u0628\u0627 \u06f2 \u062d\u0627\u0644\u062a <code data-path-to-node=\"135,2,0\" data-index-in-node=\"32\">Hover<\/code> \u0648 <code data-path-to-node=\"135,2,0\" data-index-in-node=\"40\">Click<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"135,3,0\">\u062e\u0631\u0648\u062c\u06cc <code data-path-to-node=\"135,3,0\" data-index-in-node=\"6\">.riv<\/code> \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0633\u0646\u062f \u0633\u0627\u062f\u0647 HTML\/JS \u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<\/ol>\n<h2 data-path-to-node=\"132\">\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0642\u062f\u0645 \u0628\u0639\u062f\u06cc<\/h2>\n<p data-path-to-node=\"133\">Rive \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0633\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a\u061b \u0628\u0644\u06a9\u0647 <b data-path-to-node=\"133\" data-index-in-node=\"47\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u062f\u0631 \u0648\u0628 \u0648 \u0645\u0648\u0628\u0627\u06cc\u0644<\/b> \u0627\u0633\u062a. \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0642\u062f\u0631\u062a \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0648 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0632\u0646\u062f\u0647\u060c \u062c\u0630\u0627\u0628 \u0648 \u0628\u0647\u200c\u06cc\u0627\u062f\u0645\u0627\u0646\u062f\u0646\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0686\u0631\u0627 Rive \u0622\u06cc\u0646\u062f\u0647 \u0645\u0648\u0634\u0646\u200c\u062f\u06cc\u0632\u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u062a\u0635\u0627\u062d\u0628 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a\u061f \u062f\u0631 \u0639\u0635\u0631 \u0648\u0628 \u06f3 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0645\u062e\u0627\u0637\u0628 \u062f\u06cc\u06af\u0631 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062e\u0637\u06cc \u0648 \u0628\u06cc\u200c\u0631\u0648\u062d \u062e\u0634\u0646\u0648\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u062f. \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646 MP4 \u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06af\u06cc\u0641 (GIF) \u0628\u0627 \u062d\u062c\u0645\u200c\u0647\u0627\u06cc \u0639\u062c\u06cc\u0628 \u0648 \u06a9\u06cc\u0641\u06cc\u062a \u067e\u0627\u06cc\u06cc\u0646\u060c \u0633\u0627\u0644\u200c\u0647\u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0628\u0648\u0633 \u0637\u0631\u0627\u062d\u0627\u0646 UI\/UX \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u0628\u0648\u062f\u0647\u200c\u0627\u0646\u062f. \u062d\u062a\u06cc Lottie \u06a9\u0647 \u0632\u0645\u0627\u0646\u06cc \u067e\u0627\u062f\u0634\u0627\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc &hellip;<\/p>\n","protected":false},"author":12,"featured_media":146942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"footnotes":""},"categories":[319],"tags":[],"class_list":["post-146941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous-training"],"acf":[],"_links":{"self":[{"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/posts\/146941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/comments?post=146941"}],"version-history":[{"count":6,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/posts\/146941\/revisions"}],"predecessor-version":[{"id":147443,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/posts\/146941\/revisions\/147443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/media\/146942"}],"wp:attachment":[{"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/media?parent=146941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/categories?post=146941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/motionguru.ir\/blog\/wp-json\/wp\/v2\/tags?post=146941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}