illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

vivus : کتابخانه ای برای زندگی بخشیدن به کدهای SVG

4 1241 ۲۷ فروردین ۹۴

در این مطلب میخوام یک ابزار زیبا بنام vivus رو خدمت شما معرفی کنم و اونو آموزش بدم.

vivus

با استفاده از این ابزار میتونین کاری کنید که کدها و مسیرهای SVG بصورت انیمیشنی اجرا و نمایان بشن و باعث میشن که کدهای svg بصورت زیبایی نشون داده بشن. این کتابخانه میاد و مسیرهای ( Path ) رو یکی یکی بصورت انیمیشنی در میاره. حالا سه حالت پیش میاد :

  • delayed : این حالت به معنای آن هست که در ابتدا مسیر اولی رسم میشه و بعد از مدتی کوتاه مسیر بعد و بعد از مدتی کوتاه مسیر بعد و ... بصورت زیر :
    delayed
  • async : در این حالت همه مسیر ها با هم شروع به رسم شدن میکنن و با هم نیز به پایان میرسن :
    async
  • oneByOne : در این حالت یک مسیر بطور کلی رسم میشه و بعد از اتمام اون به مسیر بعدی میره :
    onebyone

میبینید که یک شکل که با استفاده از SVG ساخته شده وجود داره و هر زمان که روی هر دکمه کلیک میکنید ، افکت مربوط به اون نمایش داده میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به vivus.js و pathformer.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

میبینید که در بالا فایل pathformer رو وارد کردیم. اگر کدهای SVG شما همگی از path باشن ، مشکلی وجود نداره. اما زمانی که از circle و rect و line و ... استفاده کنید ، این کتابخونه تا حدی میتونه کدهاتون رو انیمیشنی کنه و خیلی خوب نیس. پیشنهاد میکنم که از کدهایی که فقط path دارن استفاده کنید.

من از کد svg زیر استفاده میکنم برای این مثال :

میبینید که برای svg مورد نظر id = sample_svg قرار دادم.

برای اینکه به دکمه هایی که در بالا قرار دادیم در javascript دسترسی داشته باشیم ، باید کدهای زیر رو قرار بدیم :

حالا من میخوام زمانی که روی این دکمه ها کلیک شد ، انیمیشن اجرا بشه ، بنابراین :

حالا باید سه متغیر با نامهای دلخواه در هر کدام قرار بدیم و درون هر کدام با استفاده از عملگر new یک نمونه از شئ Vivus رو قرار بدیم. بصورت زیر :

میبینید که المنت با id = sample_svg رو در ابتدا انتخاب کرده و بعد از اون هم یک {} قرار داده که میتونین ویژگی های مورد نظرتون رو در اون قرار بدین. دو ویژگی خیلی مهم هست :

  • type : نوع انیمیشن رو مشخص میکنید که سه نوع داره : delayed و async و oneByOne
  • duration : با استفاده از این میتونین مدت زمان رسم شدن هر مسیر رو مشخص کنید

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام و خسته نباشید . بخوایم با لود صفحه اجرا بشه بجای کلیک چیکار باید کنیم ؟

    با تشکر زیاد 😆

  • ‏‏
    hamed_z2001(۴ خرداد ۱۳۹۵)

    سلام
    اگه یک مسیری با svg درست بشه و بخواید با اسکرول بالا و پایین بشه یعنی اسکرول به پایین بود ادامه مسیر رسم بشه و اگه به بالا بود مسیر کمتر بشه …. چی کار باید کرد؟

    • ‏‏
      محمد اسفندیاری(۴ خرداد ۱۳۹۵)

      برای انجام دادن کاری که میخاید میتونین از ابزار زیر استفاده کنید و کارتون راحتتره:
      https://github.com/lmgonzalves/segment
      اسکرول مرورگر هم رویدادهایی دارید که میتونین با استفاده از Javascript در زمان ایجاد هر رویداد کار مد نظرتون رو انجام بدین
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram