یک انیمیشن ساده از یک توپ که روی یک بوم (canvas) افتاده و میپَرد بسازید، به طوری که توپ با برخورد به لبه پایین صفحه جهش کند.
10.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 01:02 0.0
با استفاده از HTML5 Canvas و JavaScript یک canvas ایجاد کنید، توپ را با drawArc رسم کنید و با استفاده از requestAnimationFrame موقعیت توپ را در هر فریم بهروز کنید؛ برای حرکت از متغیرهای position و velocity و یک شتاب گرانشی ساده استفاده کنید و هنگام برخورد با لبه پایین، سرعت عمودی را معکوس و با ضریب میرایی (damping) کمی کاهش دهید تا پرشها طبیعیتر شوند. هر فریم قبل از رسم دوباره صفحه را با clearRect پاک کرده و برای سرعت ثابت بین دستگاهها از timestamp و محاسبه delta time استفاده کنید؛ تنظیم اندازه canvas و در نظر گرفتن devicePixelRatio برای وضوح بهتر نیز توصیه میشود.
توسط پژوهشگر در 198 روز قبل ساعت 01:02 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای روان شدن انیمیشن بین دستگاهها از timestamp و deltaTime استفاده کنید تا حرکت مستقل از فریمریت باشد. توجه کنید که تنظیم canvas با devicePixelRatio و اجرای clearRect قبل از هر فریم وضوح و پاکسازی صحیح را تضمین میکند. برای جلوگیری از جهشهای ریز و بیپایان یک آستانه سرعت کوچک تعیین کنید و وقتی سرعت زیر آن است توپ را در زمین ثابت کنید. همچنین ضریب میرایی (damping) نزدیک به 0.7–0.9 و رسیدگی به visibilitychange برای توقف رندر زمانی که تب غیرفعال است، مفید است.
گزارش