Understanding Linear Interpolation

[reetou]

Issue

Issue name

• Cannot get what happens in linear interpolation

Issue description

• I want to understand some of your code to create animation engine for my work project to make it more efficient (our web game eats too much CPU with tween.js so we decided to make our own small library). What I am interested in for now is bouncing. As I saw, you count elapsed time for every tick depending on duration, current time at tick and start time. Can you please explain what happens in lines 14-26 of src/Interpolation.js?

Related

This issue is related to

• [ ] LICENSE
• [ ] README
• [ ] ABOUT COPYRIGHT VIOLATION (be careful before checking this...!)
• [ ] package.json
• [ ] demos/examples
• [ ] core.ts
• [ ] Tween.ts
• [ ] lite.ts
• [ ] Easing.ts
• [x] Interpolation.ts
• [ ] Timeline.js

[dalisoft]

Hi! Glad to see you here!

At tween.js level, Linear interpolation uses only math number interpolation, but i’l changed to non-math level, so it caches values at core tween, then, calculates values between start and end with elapsed (0...1), which generates by tween.update(time), if it is not a number, it is just moves indexes of values smootly. I now cant describe it very good, so, i recommend you copy this part of code and use as your own. I hope this makes your job easier. Very interestingly, i am when make this lib, checked performance in devices that 5-old and worked well, i recommend you split render and calculation and separate functions and then call first calculation and then render, this way makes rendering much effecient and faster. And please, make sure, use 1 requestAnimationFrame and inside it call multiple renders. This improves performance more than 40%.

[reetou]

Alright, thank you.