درس animation تحريك الصور

[هيلبرنت]

السلام عليكم ورحمه الله وبركاته
درس اليوم عن طريقة تحريك الصور
مثال الصورة اليوم هو تحريك شخص وجعله يمشي
نبدأ اولا بعمل وسم div بهذا الشكل

<div id="man">

</div>

الان ننتقل الى عمل ال css الخاص بنا
<style>
#man{
background: url(WalkingManSpriteSheet.png);
width: 281px;height: 346px;
-webkit-animation: walk-east 1.0s steps(8) infinite;
animation: walk-east 1.0s steps(8) infinite;
}
@-webkit-keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
</style>
شرح ال css
قمنا بتعريف id اسمه man وقمنا استدعاء الصورة
background: url(WalkingManSpriteSheet.png);


width: 281px;height: 346px;
قمنا بوضع طول وعرض للصورة
الصورة مألفة من 8 اجزاء وطول الصورة التي استخدمها هي 2252px نقوم بتقسيمها على 8 فيظهر لنا رقم 281px وهذا لظهور جزء واحد فقط من الصورة

animation: walk-east 1.0s steps(8) infinite;

الان عرفنا animation وجعلنا سرعته 1.0ثانية يمكن ان تغيرها عند الزيادة تصبح ابطأ وعند التقليل تصبح اسرع
steps هو عدد الاجزاء المكونة منها الصورة
infinite ممكن تغيرها لرقم وهنا لجعلها تتحرك دائما

@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}

الان نقوم بتعريف keyframe
ونحدد له البداية من 0 والنهاية في عرض الصورة كاملة وهنا استخدمت ( - ) لان اريد ان يمشي من اليسار الى اليمين

-webkit-animation
@-webkit-keyframes

هذه استخدمت من اجل ان يعمل الكود على google chrom