في js لدينا الطريقة ()document.getAnimations والتي سترجع مصفوفة من الانميشن الذي سبق تعريفه والتي لا تزال فعالة -لم تنتهي- في css، وكل انميشن عبارة عن obj غرض يحوي اسم الانميشن والزمن الحالي: timeline - animationName وغيرها من الخصائص التي يمكنك الاستفادة منها.
كل ما عليك أن تحدد الانميشن عن طريق:
const myAnim = document.getAnimations().find(
animation => animation.animationName === "yourAnimationName" // اسم الانميشن الذي لديك
)
هذا سيرجع لك غرض هو الانميشن الذي تريده، وحتى تأتي بالزمن الحالي:
myAnim.currentTime
احسب الزمن الذي سيكون منتصف الانميشن وقسم الزمن الحالي عليه، مثلا أنا أريد بعد ثلاث ثوان أن تتنفذ وظيفة معينة ولتكن myfunction فكتبت:
const myFunction = () => {
console.log("START");
}
const interval = setInterval(() => {
const time = document.getAnimations().find(
animation => animation.animationName === "myAnimation")
.currentTime
if(Math.floor(time / 3100 - 1) === 0) { // يتحقق عندما يصبح زمن بداية البرنامج ثلاث ثوانٍ أول مرة
myFunction(); // أنفذ الوظيفة التي أريدها
clearInterval(interval); // أنهي الحدث لأني لن أحتاجه بعد التنفيذ
}
}, 1000)
إذا كان الانميشن الخاص بك لا يبدأ مع بداية البرنامج فبإمكانك أن تأتي بزمن بداية الانميشن عن طريق
const startAt = myAnim.startTime
تطرحه من الtimeLine فيصبح معك كم مضى من الوقت على بداية الانميشن، وهكذا يمكنك التحكم بأي أنميشن.
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.