الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

مكتبة جافا سكريبت سهلة الخفيفة وخفيفة الوزن.

ملخص

Anix هي مكتبة رسوم متحركة خفيفة الوزن وسهلة الاستخدام مع أداء ممتاز وتوافق جيد للمتصفحات الحديثة.

يستخدم سمة انتقال CSS الأصلية ، أفضل من أداء الرسوم المتحركة لمحاكاة JS. ويمكنك أيضًا تمكين تسارع الأجهزة معها.

Anix أقل من 3K (GZIP) فقط في الحجم. إنه يحقق نفس تأثير أي مكتبة ضخمة أخرى من الرسوم المتحركة.

عرض العرض التوضيحي ، يرجى النقر هنا.

تثبيت وتضمين

تثبيت واستيراد Anix. 

$ npm install anix --save-dev
...

import { AniX } from ' anix ' ;

استخدم إصدار UMD anix.umd.js. تحقق من مستودع UMD لمزيد من التفاصيل. 

 < script src =" ./js/anix.umd.ts " type =" text/javascript " > </ script >

استخدم jquery plugin anix.jq.js ، الذي يدعم بناء الجملة سلسلة. 

 < script src =" ./js/jquery.min.js " type =" text/javascript " > </ script >
< script src =" ./js/anix.jq.js " type =" text/javascript " > </ script >

الاستخدام

الاستخدام الأساسي. 

 AniX . to ( dom , 1 , {
  x : 300 ,
  y : 10 ,
  scale : 2 ,
  delay : 0.5 ,
  onComplete : function ( ) {
    alert ( 'over' ) ;
  } ,
} ) ;

// or
AniX . to ( dom , 1 , {
  width : '200px' ,
  'background-color' : '#ffcc00' ,
  ease : AniX . ease . easeOutBack ,
  onComplete : ( ) => {
    //STATE : COMPLETED!
    console . log ( 'STATE : COMPLETED!' ) ;
  } ,
} ) ;

jquery use-in use anix.jq.js 

 $ ( '.demo' )
  . css ( { left : '0px' } )
  . to ( 0.5 , {
    left : '500px' ,
    'background-color' : '#ffcc00' ,
  } ) ;

استخدم في React (v16+) 

 class MyComponent extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . myRef = React . createRef ( ) ;
    this . clickHandler = this . clickHandler . bind ( this ) ;
  }

  clickHandler ( e ) {
    const node = this . myRef . current ;
    // animation
    AniX . to ( node , 1 , {
      x : 300 ,
      y : 10 ,
      scale : 2 ,
    } ) ;
  }

  render ( ) {
    return (
      < div >
        < div ref = { this . myRef } / >
        < button onClick = { this . clickHandler } > < / button >
      < / div >
    ) ;
  }
}

لماذا؟

هناك الكثير من مكتبات الرسوم المتحركة لماذا تستخدم Anix؟

  • بادئ ذي بدء ، إنه صغير جدًا و 3 كيلو بايت (GZIP) مناسب جدًا للاستخدام على صفحة الهاتف المحمول (لأن هناك شرطًا للحجم).

  • ثانياً ، يستخدم Anix مباشرة خصائص الرسوم المتحركة CSS الأصلية ، وهو أداء مرتفع للغاية.

  • التوافق الجيد ، بعد الكثير من اختبارات الماكينة الحقيقية ، الأداء الجيد. يتضمن مجموعة متنوعة من أجهزة Android

الوثائق

الوثائق العامة يرجى زيارة https://adajuly.github.io/anix/

مستندات المكونات الإضافية jQuery هي كما يلي 

 //like AniX.to
$ ( . . ) . to ( time : number , args : { ease ?: string ; delay ?: number ; [ propName : string ] : any ; } )

//like AniX.fromTo
$ ( . . ) . fromTo ( time : number , fromArgs : Object , toArgs : Object )

//like AniX.kill
$ ( . . ) . kill ( complete ?: boolean )

//like AniX.get
$ ( . . ) . getTransform ( param : any )

//like AniX.ease
$ . ease . easeOut

اختبار وبناء

تثبيت وبناء كل المهام 

git clone [email protected]:adajuly/AniX.git
npm install
npm run all

بناء jQuery أو إصدار UMD 

npm run jq
npm run umd

يتم استخدام المثال التجريبي (صفحة المستند) 

 cd ./example
npm install
npm start
npm run build

ثم افتح http: // localhost: 3000/

استخدم حالات الاختبار

عرض ./test/test.html

آخر

هناك إصدارات أخرى هنا ، بالطبع ، ليست ضرورية. رد فعل الإصدار وإصدار Vue ...

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل