انتقالات نمای CSS: ارتقای انیمیشن‌های پیمایش صفحه برای مخاطبان جهانی

در چشم‌انداز پویای توسعه وب، ایجاد تجربیات کاربری جذاب و شهودی از اهمیت بالایی برخوردار است. یکی از تأثیرگذارترین راه‌ها برای دستیابی به این هدف، استفاده از انیمیشن‌های پیمایش صفحه روان و معنادار است. به طور سنتی، دستیابی به انتقالات پیچیده بین صفحات یا نماهای مختلف در یک وب‌سایت اغلب نیازمند راه‌حل‌های پیچیده جاوا اسکریپت بود که مکرراً منجر به تنگناهای عملکردی و تجربه نه‌چندان ایده‌آل برای توسعه‌دهندگان می‌شد. با این حال، ظهور انتقالات نمای CSS قرار است نحوه رویکرد ما به این انیمیشن‌ها را متحول کند و روشی قدرتمند، اعلانی و با عملکرد بالا برای ساخت سفرهای یکپارچه برای کاربران در سراسر جهان ارائه دهد.

درک قدرت انتقالات نمای CSS

انتقالات نمای CSS یک API پیشگامانه است که به توسعه‌دهندگان اجازه می‌دهد تغییرات بین حالت‌های مختلف DOM را، به ویژه برای پیمایش صفحه، متحرک‌سازی کنند. مفهوم اصلی این است که یک مکانیزم داخلی برای ایجاد انتقالات بصری جذاب بدون نیاز به دستکاری گسترده جاوا اسکریپت فراهم شود. این API از توانایی مرورگر برای ثبت وضعیت فعلی یک صفحه، اعمال تغییرات و سپس متحرک‌سازی روان تفاوت‌های بین دو حالت استفاده می‌کند.

به آن به عنوان یک موتور انیمیشن داخلی برای ساختار وب‌سایت خود فکر کنید. به جای پنهان کردن، نمایش دادن، محو کردن یا جابجایی دستی عناصر، شما تغییرات مورد نظر را اعلام می‌کنید و مرورگر انیمیشن را مدیریت می‌کند. این نه تنها توسعه را ساده می‌کند، بلکه سطح جدیدی از ظرافت بصری و تعامل را باز می‌کند که می‌تواند به طور قابل توجهی تعامل و رضایت کاربر را بهبود بخشد، به خصوص برای مخاطبان جهانی که ممکن است سطوح مختلفی از آشنایی با رابط‌های وب داشته باشند.

مزایای کلیدی برای طراحی وب جهانی

• تجربه کاربری بهبود یافته: انتقالات روان، کاربران را در وب‌سایت راهنمایی می‌کنند، پیوستگی بصری ایجاد کرده و بار شناختی را کاهش می‌دهند. این امر برای مخاطبان متنوع و بین‌المللی که ممکن است برای اولین بار با سایت شما روبرو شوند، حیاتی است.
• عملکرد بهبود یافته: با واگذاری منطق انیمیشن به موتور رندرینگ مرورگر، انتقالات نمای CSS ذاتاً عملکرد بهتری نسبت به بسیاری از راه‌حل‌های مبتنی بر جاوا اسکریپت دارند. این به معنای انیمیشن‌های سریع‌تر و روان‌تر در طیف وسیع‌تری از دستگاه‌ها و شرایط شبکه است، که یک عامل حیاتی برای کاربران در مناطق مختلف با سرعت‌های اینترنت متفاوت است.
• توسعه ساده‌شده: ماهیت اعلانی انتقالات نمای CSS به معنای کد کمتر و پیچیدگی کمتر است. توسعه‌دهندگان می‌توانند به جای جزئیات پیچیده زمان‌بندی انیمیشن و مدیریت وضعیت، بر روی طراحی و عملکرد تمرکز کنند.
• ملاحظات دسترسی‌پذیری: این API با در نظر گرفتن دسترسی‌پذیری طراحی شده است و به کاربران اجازه می‌دهد در صورت تمایل، انیمیشن‌ها را غیرفعال کنند و به ترجیحات کاربر برای کاهش حرکت احترام می‌گذارد.
• روایت بصری: انیمیشن‌ها می‌توانند داستانی را روایت کنند، کاربران را از طریق محتوا هدایت کرده و اطلاعات کلیدی را برجسته سازند. این یک زبان جهانی است که از موانع فرهنگی فراتر می‌رود.

نحوه کارکرد انتقالات نمای CSS: یک نگاه عمیق‌تر

API انتقالات نمای CSS بر اساس یک اصل ساده اما قدرتمند عمل می‌کند: گرفتن عکس‌های فوری از DOM قبل و بعد از یک تغییر، و سپس متحرک‌سازی تفاوت‌های بین این عکس‌ها. این فرآیند معمولاً شامل مراحل زیر است:

1. شروع یک انتقال: یک انتقال با پیمایش به یک صفحه جدید یا به‌روزرسانی بخش قابل توجهی از DOM آغاز می‌شود.
2. ثبت نمای فعلی: قبل از اعمال هرگونه تغییر، مرورگر یک عکس فوری از سند فعلی می‌گیرد. این عکس فوری به عنوان یک شبه‌عنصر (::view-transition-old(root)) که کل ویوپورت را می‌پوشاند، رندر می‌شود.
3. اعمال تغییرات: سپس مرورگر تغییرات جدید DOM را اعمال می‌کند.
4. ثبت نمای جدید: پس از رندر شدن محتوای جدید، مرورگر یک عکس فوری از سند به‌روز شده می‌گیرد. این عکس فوری به عنوان یک شبه‌عنصر دیگر (::view-transition-new(root)) که ویوپورت را می‌پوشاند، رندر می‌شود.
5. متحرک‌سازی انتقال: سپس مرورگر به طور خودکار انتقال بین نماهای قدیم و جدید را متحرک‌سازی می‌کند. به طور پیش‌فرض، این ممکن است یک محو شدن ساده باشد، اما توسعه‌دهندگان می‌توانند این انیمیشن را به طور گسترده با استفاده از CSS سفارشی‌سازی کنند.

کلید سفارشی‌سازی در هدف قرار دادن شبه‌عناصری است که توسط این API ایجاد می‌شوند. اساسی‌ترین آن‌ها عبارتند از:

• ::view-transition-old(root): وضعیت DOM را قبل از انتقال نشان می‌دهد.
• ::view-new(root): وضعیت DOM را بعد از انتقال نشان می‌دهد.

با اعمال CSS به این شبه‌عناصر، می‌توانیم نحوه محو شدن نمای قدیم و ظاهر شدن نمای جدید را کنترل کنیم، یا حتی انیمیشن‌های پیچیده‌تری مانند لغزش، بزرگنمایی یا تقاطع محو (crossfades) ایجاد کنیم.

پیاده‌سازی انتقالات پایه پیمایش صفحه

بیایید یک مثال عملی از پیاده‌سازی یک انتقال محو ساده برای پیمایش صفحه را بررسی کنیم. این مثال یک معماری برنامه تک‌صفحه‌ای (SPA) را فرض می‌کند که در آن پیمایش بین نماها در سمت کلاینت با استفاده از جاوا اسکریپت انجام می‌شود. برای برنامه‌های چند صفحه‌ای سنتی، مرورگر بارگذاری اولیه را انجام می‌دهد و انتقالات نما می‌توانند پس از اتمام بارگذاری اولیه اعمال شوند.

مرحله ۱: فعال‌سازی انتقالات نما

در اکثر فریم‌ورک‌ها و مرورگرهای مدرنی که از انتقالات نما پشتیبانی می‌کنند، فعال‌سازی آن‌ها ممکن است شامل یک پیکربندی ساده یا یک فراخوانی خاص جاوا اسکریپت برای شروع یک بلوک انتقال باشد.

برای انتقالات مبتنی بر جاوا اسکریپت، معمولاً از تابعی مانند document.startViewTransition() استفاده می‌کنید.

            function navigateTo(url) {
  document.startViewTransition(() => {
    // Your navigation logic here (e.g., updating the DOM, changing URL)
    history.pushState(null, null, url);
    // Render new content based on the URL
    renderContentForUrl(url);
  });
}

            

              
                Copy
              
            
          

مرحله ۲: استایل‌دهی به انتقال

حالا، بیایید انتقال را برای ایجاد یک افکت محو شدن استایل‌دهی کنیم. ما شبه‌عناصر را هدف قرار می‌دهیم. انتقال پیش‌فرض اغلب یک محو شدن است، اما می‌توانیم آن را سفارشی کنیم.

            
/* Default fade transition for all view transitions */
::view-transition-old(root) {
  animation-name: fade-out;
  animation-duration: 0.4s;
}

::view-transition-new(root) {
  animation-name: fade-in;
  animation-duration: 0.4s;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

در این CSS:

• ::view-transition-old(root) برای محو شدن استایل‌دهی شده است.
• ::view-transition-new(root) برای ظاهر شدن استایل‌دهی شده است.
• ما از انیمیشن‌های keyframe سفارشی برای کنترل دقیق‌تر بر روی افکت محو شدن استفاده می‌کنیم.

این تنظیمات پایه یک تقاطع محو روان بین صفحات را فراهم می‌کند که به طور قابل توجهی عملکرد درک شده و تجربه کاربری را بهبود می‌بخشد. برای مخاطبان جهانی، چنین نشانه‌های بصری به طور جهانی درک و قدردانی می‌شوند.

انتقالات پیشرفته و انتقالات نمای بین سندی

قدرت انتقالات نمای CSS فراتر از افکت‌های محو ساده است. این API از انیمیشن‌های پیچیده‌تر پشتیبانی می‌کند و حتی می‌تواند انتقالات بین اسناد کاملاً متفاوت را مدیریت کند، که به ویژه برای وب‌سایت‌های چند صفحه‌ای سنتی مفید است.

انتقالات روان صفحه برای برنامه‌های چند صفحه‌ای (MPAs)

برای وب‌سایت‌های سنتی که با رندر سمت سرور ساخته شده‌اند، جایی که هر درخواست پیمایش یک سند HTML جدید را بارگذاری می‌کند، این API انتقالات نمای بین سندی را ارائه می‌دهد. این به شما امکان می‌دهد انتقال بین صفحه قدیمی و صفحه تازه بارگذاری شده را متحرک‌سازی کنید.

مکانیزم مشابه است: مرورگر صفحه قدیمی را ثبت می‌کند، صفحه جدید را بارگذاری می‌کند و سپس می‌توانید از CSS برای متحرک‌سازی انتقال استفاده کنید. تفاوت اصلی این است که نیازی به فراخوانی صریح document.startViewTransition() ندارید. در عوض، از هدر HTTP View-Transitions-API برای اعلام قصد خود استفاده می‌کنید.

در سمت کلاینت، شما به رویدادهای transitionstart و transitionend عنصر <html> گوش می‌دهید تا فرآیند را مدیریت کنید.

            // On the new page load
dif (document.createDocumentTransition) {
  document.addEventListener('transitionstart', () => {
    // Styles to hide the new page while the old one animates out
    document.documentElement.style.setProperty('--view-transition-new-is-ready', 'none');
  });

  document.addEventListener('transitionend', () => {
    // Remove the old page snapshot once the transition is complete
    const oldPage = document.querySelector('::view-transition-old(root)');
    if (oldPage) {
      oldPage.remove();
    }
  });

  // Start the transition
  document.createDocumentTransition() {
    // Apply styles to the old page to start its exit animation
    document.documentElement.style.setProperty('--view-transition-old-is-ready', 'block');
    // Indicate that the new page is ready to be shown after the animation
    document.documentElement.style.setProperty('--view-transition-new-is-ready', 'block');
  }
}

            

              
                Copy
              
            
          

و CSS مربوطه:

            
/* For MPA transitions */
::view-transition-old(root) {
  /* This pseudo-element is only visible when transition is active */
  display: var(--view-transition-old-is-ready, none);
  animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) fade-out-mpa;
}

::view-transition-new(root) {
  display: var(--view-transition-new-is-ready, none);
  animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) fade-in-mpa;
}

@keyframes fade-out-mpa {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in-mpa {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the new page initially until the animation starts */
:root {
  --view-transition-new-is-ready: none;
}

            

              
                Copy
              
            
          

انتقالات عناصر مشترک

یکی از جذاب‌ترین ویژگی‌های انتقالات نمای CSS، توانایی متحرک‌سازی عناصر مشترک در نماهای مختلف است. این بدان معناست که اگر یک عنصر، مانند تصویر محصول یا آواتار کاربر، در هر دو صفحه مبدا و مقصد وجود داشته باشد، می‌تواند به طور روان از موقعیت قدیمی خود به موقعیت جدیدش متحرک‌سازی شود.

این کار با دادن view-transition-name یکسان به عنصر مشابه در حالت‌های مختلف DOM انجام می‌شود.

مثال: از صفحه لیست محصولات به صفحه جزئیات محصول

یک صفحه لیست محصولات را تصور کنید که هر محصول یک تصویر دارد. وقتی کاربر روی یک محصول کلیک می‌کند، می‌خواهیم به صفحه جزئیات محصول منتقل شویم، در حالی که تصویر محصول به طور روان از آیتم لیست به تصویر بزرگتر در صفحه جزئیات متحرک‌سازی می‌شود.

HTML (صفحه لیست):

            

  
    
  
  
Product 1


            

              
                Copy
              
            
          

HTML (صفحه جزئیات):

            

  
  
Product 1
  
Detailed description...


            

              
                Copy
              
            
          

CSS:

            
/* On the listing page, the image is small */
.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* On the detail page, the image is larger */
.product-detail .product-image {
  width: 400px;
  height: 400px;
}

/* For shared element transitions */
/* The browser will automatically animate the change in properties like size and position */

/* If you want to customize the shared element transition */
/* You can target specific view-transition-names */
::view-transition-group(product-image-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The browser intelligently handles the animation for shared elements. */
/* It detects the change in size and position and interpolates between them. */

            

              
                Copy
              
            
          

هنگام پیمایش از لیست به صفحه جزئیات برای محصول ۱:

1. مرورگر تشخیص می‌دهد که .product-image با view-transition-name="product-image-1" در هر دو حالت وجود دارد.
2. یک ::view-transition-group(product-image-1) و درون آن، دو شبه‌عنصر ایجاد می‌کند: ::view-transition-old(product-image-1) و ::view-transition-new(product-image-1).
3. مرورگر به طور خودکار تصویر را از کادر مرزی قدیمی به کادر مرزی جدیدش متحرک‌سازی می‌کند.
4. شما می‌توانید مدت زمان و تابع زمان‌بندی انیمیشن را برای این انتقال عنصر مشترک خاص سفارشی‌سازی کنید.

این قابلیت برای ایجاد تجربیات روان و شبیه به اپلیکیشن که با کاربران از زمینه‌های فرهنگی مختلف به خوبی ارتباط برقرار می‌کند، فوق‌العاده قدرتمند است، زیرا انسجام بصری آن شهودی است.

سفارشی‌سازی و بهبود انتقالات

جادوی واقعی انتقالات نمای CSS در توانایی سفارشی‌سازی انیمیشن‌ها فراتر از محو شدن‌های ساده نهفته است. ما می‌توانیم افکت‌های انتقال منحصر به فرد و برندسازی شده‌ای ایجاد کنیم که یک وب‌سایت را متمایز می‌کند.

اعمال انیمیشن‌های مختلف به نماها

شما می‌توانید انیمیشن‌های متمایزی برای ورود و خروج از صفحات ایجاد کنید، یا حتی انیمیشن‌های مختلفی را بر اساس جهت پیمایش اعمال کنید.

مثال: لغزش به داخل از راست، لغزش به بیرون به چپ

            
/* For moving from left to right */
::view-transition-old(root) {
  animation: slide-out-left 0.5s ease-out forwards;
}
::view-transition-new(root) {
  animation: slide-in-right 0.5s ease-out forwards;
}

/* For moving from right to left */
/* You might need JavaScript to determine direction and apply different CSS */
/* Or have separate transition names */

@keyframes slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

            

              
                Copy
              
            
          

برای پیاده‌سازی قابل اعتماد انیمیشن‌های جهت‌دار، به خصوص در SPA‌ها، شما معمولاً اطلاعاتی در مورد جهت پیمایش (مثلاً 'forward' یا 'backward') را به callback تابع startViewTransition ارسال می‌کنید و سپس از آن اطلاعات برای اعمال شرطی کلاس‌های CSS یا نام‌های انیمیشن استفاده می‌کنید.

ترکیب انتقالات

شما همچنین می‌توانید انواع مختلف انیمیشن‌ها را ترکیب کنید. به عنوان مثال، یک عنصر مشترک ممکن است به داخل بلغزد، در حالی که محتوای پس‌زمینه محو می‌شود.

بیایید به مثال عنصر مشترک برگردیم. فرض کنید می‌خواهیم محتوای پس‌زمینه محو شود در حالی که تصویر مشترک می‌لغزد و مقیاس می‌یابد.

HTML (صفحه جزئیات):

            

  

    
  
  

    
Product 1
    
Detailed description...
  


            

              
                Copy
              
            
          

CSS:

            
/* Transition for the wrapper of the image */
::view-transition-group(product-image-wrapper-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition for the image itself (if needed beyond wrapper) */
::view-transition-old(product-image-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition for the product info block */
::view-transition-old(product-info-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}

::view-transition-new(product-info-1) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(50px);
}

/* To ensure background content fades out cleanly */
/* We can target the default root transition */
::view-transition-old(root) {
  animation-name: fade-out-background;
  animation-duration: 0.5s;
}
::view-transition-new(root) {
  animation-name: fade-in-background;
  animation-duration: 0.5s;
}

@keyframes fade-out-background {
  from { opacity: 1; }
  to { opacity: 0.5; } /* Fade out slightly */
}

@keyframes fade-in-background {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

این رویکرد امکان انیمیشن‌های پیچیده‌ای را فراهم می‌کند که در آن بخش‌های مختلف صفحه به روش‌های منحصر به فردی منتقل می‌شوند و تجربه‌ای بسیار صیقلی و جذاب ایجاد می‌کنند. برای کاربران بین‌المللی، یک انیمیشن خوب اجرا شده می‌تواند یک وب‌سایت را حرفه‌ای‌تر و قابل اعتمادتر جلوه دهد، صرف نظر از زمینه فرهنگی آن‌ها.

ملاحظات برای مخاطبان جهانی

هنگام پیاده‌سازی انتقالات نمای CSS، ضروری است که مخاطبان جهانی را در نظر داشته باشید. این به معنای در نظر گرفتن عواملی است که ممکن است بر درک کاربر و دسترسی‌پذیری در مناطق و جمعیت‌های مختلف تأثیر بگذارد.

عملکرد و شرایط شبکه

در حالی که انتقالات نما عملکرد بالایی دارند، پیچیدگی انیمیشن‌ها و مقدار داده منتقل شده هنوز هم اهمیت دارد. اطمینان حاصل کنید که دارایی‌های شما (تصاویر، فونت‌ها) بهینه شده و به طور کارآمد ارائه می‌شوند، به ویژه برای کاربران در مناطقی با اتصالات اینترنت کندتر. استفاده از فرمت‌های تصویر مدرن مانند WebP را در نظر بگیرید.

دسترسی‌پذیری و ترجیحات کاربر

همیشه به ترجیحات کاربر برای کاهش حرکت احترام بگذارید. مدیا کوئری `prefers-reduced-motion` بهترین دوست شما در این زمینه است.

            
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
    transition: none;
  }
  /* Also disable animations for shared elements */
  ::view-transition-group(*), 
  ::view-transition-old(*), 
  ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}

            

              
                Copy
              
            
          

این تضمین می‌کند که کاربرانی که به حرکت حساس هستند، همچنان می‌توانند سایت شما را بدون ناراحتی پیمایش کنند. این یک بهترین عمل جهانی است که برای فراگیری حیاتی است.

ظرافت‌های فرهنگی در انیمیشن

در حالی که انیمیشن‌های پایه مانند محو شدن یا لغزش به طور کلی در سطح جهانی به خوبی درک می‌شوند، انیمیشن‌های بسیار خاص یا سریع ممکن است توسط فرهنگ‌های مختلف به طور متفاوتی درک شوند. هدف خود را بر انیمیشن‌های واضح، روان و هدفمند قرار دهید. از افکت‌های بیش از حد پر زرق و برق یا گیج‌کننده خودداری کنید.

به عنوان مثال، در برخی فرهنگ‌ها، چشمک زدن سریع یا حرکات تند ممکن است با رابط‌های کاربری با کیفیت پایین‌تر یا کمتر حرفه‌ای مرتبط باشد. پایبندی به الگوهای تثبیت شده انتقالات روان به طور کلی ایمن‌تر و از نظر جهانی جذاب‌تر است.

سازگاری فریم‌ورک و مرورگر

انتقالات نمای CSS یک فناوری نسبتاً جدید است. اطمینان حاصل کنید که سازگاری مرورگر را بررسی می‌کنید، به ویژه برای مرورگرهای قدیمی‌تر که ممکن است از این API پشتیبانی نکنند. فریم‌ورک‌هایی مانند React، Vue و Svelte اغلب الگوها یا کتابخانه‌های خاصی برای ادغام موثر با انتقالات نما دارند. برای مخاطبان جهانی، دسترسی به طیف وسیعی از مرورگرها کلیدی است.

همیشه جایگزین‌های مناسبی (graceful fallbacks) ارائه دهید. اگر انتقالات نما پشتیبانی نمی‌شوند، وب‌سایت شما باید همچنان بدون آن‌ها کاربردی و قابل پیمایش باشد.

نتیجه‌گیری: ساخت سفرهای روان‌تر با انتقالات نمای CSS

انتقالات نمای CSS یک افزودنی قدرتمند به جعبه ابزار توسعه‌دهندگان فرانت‌اند است. آن‌ها روشی اعلانی، با عملکرد بالا و زیبا برای پیاده‌سازی انیمیشن‌های پیچیده پیمایش صفحه ارائه می‌دهند. با بهره‌گیری از انتقالات عناصر مشترک و انیمیشن‌های سفارشی، می‌توانید تجربیات کاربری فوق‌العاده روان و جذابی ایجاد کنید.

برای مخاطبان جهانی، مزایای آن حتی بیشتر است. پیمایش روان و شهودی از موانع زبانی و فرهنگی فراتر می‌رود و وب‌سایت شما را حرفه‌ای‌تر، در دسترس‌تر و لذت‌بخش‌تر برای استفاده می‌کند. چه در حال ساخت یک برنامه تک‌صفحه‌ای باشید یا یک وب‌سایت چند صفحه‌ای سنتی، انتقالات نمای CSS ابزارهایی را برای ساخت سفرهای دیجیتالی واقعاً به یاد ماندنی فراهم می‌کند.

همانطور که این فناوری به بلوغ خود ادامه می‌دهد و پذیرش گسترده‌تری پیدا می‌کند، پذیرش زودهنگام آن به شما امکان می‌دهد در خط مقدم طراحی وب مدرن باقی بمانید و تجربیات کاربری استثنایی را ارائه دهید که با کاربران در سراسر جهان طنین‌انداز می‌شود. از امروز شروع به آزمایش این قابلیت‌ها کنید و سطح بعدی انیمیشن وب را برای کاربران جهانی خود باز کنید.