افکت و انیمیشن در 2ed js

طراحی افکت و انیمیشن در تد جی اس
طراحی افکت و انیمیشن در تد جی اس


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

اما گفتم باز هم غنیمته که یک نمونه کد از قسمت انیمیشن پروژه بزارم.

لینک داکیومنت افکت و انیمیشن در Tedjs

درصورتی که یک نگاهی به لینک بالا انداخته باشید متوجه نحوه کار سیستم خواهید شد ، ولی این جا هم توضیحی درباب نحوه کار میدم و یک افکت طراحی میکنیم

تابع animGraph در کتابخانه به عنوان یک کلاس طراحی شده. یعنی می بایست که یک نمونه یا شی از اون ساخته بشه.

new tedApi.animGraph( /* ... */ )

این تابع لیستی از نقاط رو به صورت طول و ارتفاع دریافت می کنه و از اون یک چندین معادله درجه دوم می سازه که در ادامه هم دیگه اجرا می شن و یک تابع برای فراخوانی دریافت می کنه برای هر x,y یک بار اجرا میشه و در حین روند ، برای پردازش اجرا میشه.

مثال

var anim = new tedApi.animGraph([
    // [ length , height ]
    [10,100],
    [100,-20]
], function( x , y , precentage ){
    /* ... */
})

خوب. اجازه بدید ابتدا یک افکت برای طراحی انتخاب کنیم و در حین طراحی باقی قسمت ها رو بررسی کنیم.

یک انیمیشن ساده به اسم ضربان که با یک چرخش هم ترکیب شده باشه.

برای ایجاد این افکت فقط به توابع point و precent تابع animGraph نیاز داریم.

ابتدا خود انیمیشن رو تعریف می کنیم:

var anim = new tedApi.animGraph([
    [5,5],
    [5,5],
    [5,5],    
    [5,5],    
    [200,1]
],function(x,y,prec){});

4 نقطه ابتدایی ([5,5,]) برای ایجاد ضربان هستند و نقطه آخر یک فضای استراحت برای ایجاد چرخش .

خوب. حالا ضربان رو ایجاد می کنیم. (فرض کنید متغیر hr ، عنصر مورد نظر برای اعمال افکت است)

anim.point([1,2,3,4],function(x,y,prec,current){  
    if(current == 1 || current == 3){     
        tedApi.css(hr,{       
            "transform":"scale(1.2)",       
            "-webkit-transform":"scale(1.2)"
         });  
    }
    else{
        tedApi.css(hr,{
            "transform":"scale(1)",
            "-webkit-transform":"scale(1)"
        });  
     }
});

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

اما یک توضیح کوتاه درباره تابع point.

در صورتی که به خاطر بیارید ، در تابع animGraph، آرگومان ابتدایی ، آرایه ای از نقاط بود. هر نقطه یک point نام داره . در اینجا 4 عدد point داریم. که در این تابع point گفتیم که می خوایم پردازش بر روی point های اول ، دوم ، سوم و چهارم انجام بشه. یعنی نقاط افکت ضربان.آرگومان current ، شماره point جاری رو برمیگردونه.

خوب حالا کافیه فقط افکت چرخش رو هم به تابع اضافه کنیم.

anim.precent(0,function(x,y,prec){});

anim.precent(50,function(x,y,prec){
    var deg = tedApi.scaleNumber(    
        {min:50,max:90},    
        {min:0,max:360},
        prec  
    );  
    
    deg = tedApi.floatPoint(deg,2);  
    
    tedApi.css(hr,{
        "transform":"rotateY("+deg+"deg)",        
        "-webkit-transform":"rotateY("+deg+"deg)"
     });
});

anim.precent(90,function(x,y,prec){});

این تابع هم تقریبا شمایلی مانند point داره. اما به جای کار بر روی نقاط ، بر روی درصد تکمیل انیمیشن بررسی انجام میده. در این کد گفتیم از درصد تکمیل فرایند 0 تا 50 کاری نکن. از 50 تا 90 چرخش انجام بده و از 90 به بعد هم فرایندی رو اجرا نکن.

تابع tedApi.scaleNumber عدد مورد نظر رو از یک بازه به عددی در بازه دیگه ای تبدیل می کنه

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

anim.start(true);

مقدار true ارسال شده به تابع ، به معنی تکرار انیمیشن تا زمان توقف هست. تا زمانی که با تابع end یا stop انیمیشن متوقف بشه.

می تونید نمونه کد به صورت زنده در CodePen ببینید و تغییر بدید. ;)

ان شا الله به مرور نمونه های دیگه ای هم میزارم.