// 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