A tween library for Kaboom.
easingpackage.js | ||
LICENSE | ||
README.md | ||
tween.js | ||
tween_nokaboom.js |
KBTweenLib
A tween library for Kaboom that allows easy usage of tweens. It also comes with a package for eases, so you can use it with Kaboom's lerp()
function if you really wanted.
Dependencies
tween.js
- Requires Kaboom v2000 or later
- Requires a JavaScript version that supports ES6 functionality
- Recommends Visual Studio Code
- Recommends VS Code Intellisense for JSDocs
easingpackage.js
- Requires a JavaScript version that supports ES6 functionality
- Can be used with Kaboom, any version
Differences between tween.js
and tween_nokaboom.js
tween.js
- Smaller file size, but depends heavily on Kaboom functions
- Perfect for Kaboom games
- Uses
onUpdate()
,lerp()
, andtime()
tween_nokaboom.js
- Bigger file size, but not dependent on Kaboom at all
- Uses
performance.now()
, a very precise and lightweight time getter function - Do not use while making a Kaboom game, it would be pointless! Use for normal JS Canvas games instead.
- Uses
Window.requestAnimationFrame()
Documentation
tween()
- Creates a tween to animate properties of an object.
0
-object: string
- The object with the properties being animated.1
-prop[]: string
- The properties that will be animated.2
-time: Object
- The properties that define how to animate the object..from: number
- The initial value to animate from..to: number
- The new value to animate to..time?: number
- The time it takes to animate the object..type: number
- Defines how the animation works.
3
-config?: Object
- The properties that define how to style the animation..ease?: Function
- The ease and smoothness of the animation..onStart?: Function()
- What to run when the tween starts..onUpdate?: onUpdate()
- What to run every time the tween updates..onFinish?: onFinish()
- What to run when the tween ends.
return
-: Function()
- End the tween manually.0
-clean?: bool
- Whether the tween should end where it is (true) or end attime.to
(false).
onFinish
- What to run when the tween ends.
0
-time: Object
- The properties that defined how to animate this object.1
-config: Object
- The properties that defined how to style this animation.2
-loops?: number
- How many times the tween has looped.
onUpdate
- What to run every time the tween updates.
0
-frame: number
1
-second: number
2
-percent: number
3
-easePercent: number
4
-value: number
tweentypes
.NORMAL: number
.FOREVER: number
.CONTINUE: number
.PINGPONG: number
- private
__NOOP: Function
Example
tween.js
import { KBTween } from ".../tween.js";
import { easings } from ".../easingpackage.js";
var k = kaboom(); // Make Kaboom global but also a variable
var twnlib = KBTween(k); // Create new TweenLib instance, pass in Kaboom
// This fixes Intellisense on VSCode not picking up on how Kaboom imports plugins
// Otherwise, if your IDE is smart enough, you can just pass in the tween lib normally, using KBTween as a plugin
loadBean();
var bean = add([
sprite("bean"),
pos(64, 64),
color(255, 255, 255)
]);
twnlib.tween(bean.pos, [ "x" ], {
from: 0,
to: width() - 64,
time: 3.2,
type: tweentypes.PINGPONG
});
twnlib.tween(bean.pos, [ "y" ], {
from: 0,
to: height() - 64,
time: 2,
type: tweentypes.PINGPONG
});
twnlib.tween(bean.color, [ "g", "r" ], {
from: 255,
to: 0,
time: 0.25,
type: tweentypes.PINGPONG
});
tween_nokaboom.js
<p>Points: <span id="number">0</span></p>
<script type="module" src="...js"></script>
import { KBTween } from ".../tween_nokaboom.js";
import { easings } from ".../easingpackage.js";
var twnlib = KBTween();
twnlib.tween(document.getElementById("number"), ["innerHTML"], {
from: 0,
to: 1000,
time: 10,
type: twnlib.tweentypes.NORMAL
})