كيفية تشغيل صورة React-gif وإيقافها مؤقتًا باستخدام ReactJS

مدونة او مذكرة

كيفية تشغيل صورة React-gif وإيقافها مؤقتًا باستخدام ReactJS

رد فعل لاعب gif

شاهد عرضًا حيًا هنا

على غرار واجهة مستخدم تبديل GIF في Facebook ، يعرض مكوّن React هذا معاينة للصورة الثابتة بشكل افتراضي ، ويتبادل في صورة GIF متحركة عند النقر عليه. يتم تحميل الصور مسبقًا بمجرد تركيب المكون ، أو عند تمرير مصدر جديد.



ملحوظة: على عكس واجهة مستخدم Facebook ، التي تستخدم عنصر فيديو HTML للحفاظ على تقدم التشغيل ، يستخدم هذا المكون صورة GIF الفعلية وستتم إعادة تعيينها عند كل نقرة.






تثبيت

npm install react-gif-player react react-dom

إذا كنت غير قادر على استخدام npm وتحتاج إلى نصوص جاهزة للإنتاج ، فتحقق من ذلك الإصدارات .



الاستخدام

بداية سريعة

ReactDOM.render( React.createElement(GifPlayer, { gif: '/img/cat.gif', still: '/img/cat.jpg'>React element refs :



// here's an example class MyGifWrapper extends React.Component { componentDidMount () { addEventListenerWhenGifFlowsOffscreen(this.pauseGif); } render () { return ( this.pauseGif = pause} /> ); } } 

لازلت مشوش؟ هنا jsfiddle مما يوضح كيفية استخدام pauseRef.






  • أي سمة أخرى متاحة في HTML img يمكن تمرير العلامة أيضًا (باستثناء src ، والتي سيتم استبدالها) ، على الرغم من تذكر إصدار React من تلك السمة قد تكون مختلفة عما تتوقع .

  • GifPlayer تتوقع واحدًا من gif أو كليهما و still الدعائم. إذا تم ترك أحدهما ، فسيتم استخدام الآخر كإجراء احتياطي.

    ومع ذلك ، إذا كان فقط gif يتم توفير prop ، سيتم استخراج الإطار الأول واستخدامه كمعاينة ثابتة بمجرد تحميل صورة GIF بالكامل.

    فقدت حسابي في ماين كرافت

    إنشاء إطار ثابت في وقت الإنشاء

    مساوئ عدم تقديم still prop ، على الرغم من أنه سيتم إنشاء احتياطي ، هو أن GIF الخاص بك يجب أن يتم تحميله بالكامل قبل ظهور الإطار الثابت بدلاً من GIF (من المحتمل أن يتحرك ببطء).

    تتمثل إحدى الطرق المبسطة لإنشاء إطار ثابت مسبقًا في دمج ملف وحدة إطارات gif ، التي تحتوي فقط على تبعيات JavaScript نقية ، في عملية البناء الخاصة بك.

    على سبيل المثال

    var gifFrames = require('gif-frames'); var fs = require('fs'); gifFrames({ url: 'src/image.gif', frames: 0 }).then(function (frameData) { frameData[0].getImageStream().pipe(fs.createWriteStream('build/still.jpg'>Gifsicle .

    styles

    Important: In order for the default styles to be used, dist/gifplayer.css must be included in your HTML.

    CSS styles can be overridden easily. To add a border around the image, try including this CSS after including the default styles:

    .gif_player img { border: 3px solid cornflowerblue; } 

    الاستخدام مع ساس

    إذا قمت بمعالجة أنماطك مسبقًا باستخدام Sass ، يمكنك الحصول على تحكم أكثر قوة عبر متغيرات Sass. توجد الإعدادات الافتراضية في الجزء العلوي من src / GifPlayer.scss :

    $gif_btn_bg_base_color: #000 !default; $gif_btn_bg_opacity: 0.5 !default; $gif_btn_bg_opacity_hover: 0.7 !default; // ...etc

    ال !default العلم يعني إعلان البدائل قبل سيؤدي تضمين الأنماط الافتراضية إلى تجاوزها.

    // Include var overrides before default styles import $gif_btn_bg_base_color: gold; $gif_btn_text_color: cornflowerblue; $gif_btn_font_family: serif; // Using webpack css/sass module import syntax @import '~react-gif-player/src/GifPlayer'; // include other overrides afterward .gif_player { margin: 1rem; img { border: 2px solid #222; } }

    تفاصيل التنزيل:

    مؤلف: بينويلي 4000

    الموقع الرسمي: https://github.com/benwiley4000/react-gif-player

    أفضل محرك قالب شبيبة

    #reactjs #javascript