نحوه کار با ابزارک انیمیشن Lottie

دوره تخصصی UI باالمنتور

نحوه کار با ابزارک انیمیشن Lottie

نویسنده : امیرمحمد معلمی
4 دیدگاه
آخرین بروزرسانی : 18 شهریور, 1400

با استفاده از ابزارک Lottie می توانید عناصر متحرک (انیمیشن) با فرمت JSON طراحی شده اند را به سادگی به نمایش در بیاورید. استفاده از از انیمیشن ها در طراحی صفحات می توانید روند تعاملی وب سایت شما را با کاربران افزایش دهد. این ابزارک در نسخه 2.10.0 افزونه المنتور پرو به داشبود ابزارک ها اضافه شده است

انیمیشن های آماده با فرمت JSON را می توانید از وب سایت های گوناگون دریافت کنید. اما یکی از بهترین و معروف ترین آنها وب سایت LottieFile می باشد. فقط کافیست در این وب سایت ثبت نام کرده و انیمیشن های مورد پسند خود را دریافت کنید.

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

جزئیات ابزارک Lottie

Lottie

Source: انتخاب منبع فراخانی فایل انیمیشن

  • Media File: بارگزاری فایل های JSON از طریق هاست 
  • External URL: نمایش انیمیشن از طریق لینک خارجی

نکته امنیتی: لطفا در بازگذاری پرونده های JSON از منابع ناشناخته مراقبت کنید. پرونده های JSON ممکن است شامل محتوای مخرب باشد. اطمینان حاصل کنید که پرونده های خود را از منابع قابل اعتماد بارگذاری نمایید.

Alignment: ترازبندی انیمیشن

Caption: انتخاب عنوان برای انیمیشن

Link: ایجاد لینک سفارشی برای هدایت کاربران به یک صفحه  پس از کلیک بر روی انیمیشن

Settings

Trigger: در اینجا انتخاب می کنید که انیمیشن با چه عملی اجرا شود.

Viewport: موقعیت نمایش انمیشین، این گزینه فقط در صورتی قابل استفاده است که حالت Viewport و یا Scroll در بخش Trigger انتخاب شده باشد.

Loop: برای اینکه انیمیشن به مدت نامحدود اجرا شود باید این دکمه را فعال کنید

Number of Times: تعداد دفعات تکرار یک انیمیشن – برای استفاده از این گزینه باید حالت Loop فعال باشد.

Play Speed: افزایش سرعت و یا کاهش سرعت انیمیشن

Reverse Animation: برای اجرای معکوس انیمیشن می توانید این حالت را فعال کنید

Start Point : نقطه شروع اجرای انیمیشن

end point: نقطه پایان اتمام انیمیشن

Renderer: نحوه اجرای انیمیشن به صورت SVG و یا Canvas

Lazy Load: برای بارگیری صحیح و به موقع انیمیشن می توان این گزینه را فعال کرد.