What is jBone?
jBone is a JavaScript Bone Animation library for simplifying and enhancing CSS3 transformations.
It can be used in websites to bring life to the website.
jBone is a JavaScript library that allows you to build Bones and use Keyframe animation
to bring the content to life. It brings the power of a Skeletal Bone Animation System
to web content in a clear format.
Skeletal Bone Animation Systems have been around for years as a technique to bring
game worlds to life.
Browsers Supported
Example
jBone.addBone({ name: 'root', selectorId: 'helloWorldDemo', x: 170, y: -100, angle: 0, length: 0, thickness: 5 })
.addChildBone({ name: 'boneHello', length: 50, thickness: 5 })
.addContent({ name: 'idHello', type: 'span', content: 'Hello, ', pivot: jBone.Point(0, 30), offset: jBone.Point(0, 0.5) })
.addChildBone({ name: 'boneWorld', length: 50, thickness: 5 })
.addContent({ name: 'idWorld', type: 'span', content: 'world!', pivot: jBone.Point(0, 30), offset: jBone.Point(0, 0.5) });
jBone.addAnimation({ name: 'wave', frames: 3, duration: 5000, looped: true })
.at(0)
.reset()
.rotate('boneHello', 0)
.rotate('boneWorld', 0)
.at(1)
.rotate('boneHello', 30)
.rotate('boneWorld', 50)
.at(2)
.rotate('boneHello', 0)
.rotate('boneWorld', 0);
jBone.render();
Documentation (Work in Progress)
AnimationFrametop ↑
The AnimationFrame class stores information for performing FrameActions.
var animFrame = new AnimationFrame(frame, boneName, transform, frameActionList);
performAction(frameActionId, bone, deltaTime, parentMatrix)
Performs a FrameAction if not already run for a specific frameActionId.
grab(name, params)
Adds a FrameAction item to 'grab' a Bone or Content item.
release(name)
Adds a FrameAction item to 'release' a Bone or Content item.
addReset()
Adds a FrameAction item to 'reset' the current Animation scene.
addFunction(name, theFunction)
Adds a FrameAction item to call a JavaScript Function.
addContent(options)
Adds a FrameAction item to add Content.
removeContent(name)
Adds a FrameAction item to remove Content.
update(deltaTime, parentMatrix)
Updates the AnimationFrame by calling each of the FrameActions in the list.
interpolate(name, other, ratio)
Interpolates from the current AnimationFrame to another using the current Interpolation
method. Uses the interpolation method assigned to 'animation' or the default method
if none assigned.
AnimationSettop ↑
update
at
repeat
reset
addFunction
grab
release
addContent
removeContent
rotate
translate
scale
findCurrentKeyframeForBoneName
findFrameForBoneName
findCurrentAnimationFrameForBoneName
findFrameAfterForBoneName
resetCache
branch
addChildBone
addContent
removeContent
grab
release
findBone
update
render
resetCache
update
render
FrameActiontop ↑
performAction
resetObject
update
grab
release
Interpolationtop ↑
SetInterpolationMethod
Method
The jBone namespace encapsulates the entire jBone library and provides access to
several of the jBone internal structures such as Point and Transform.
Transform
Point
BorderWidth
onUpdate
addBone
addAnimation
findBone
findAnimation
findAnimationForBone
findCurrentAnimationFrameForBoneName
render
update
identity
inverse
translate
scale
skew
rotate
multiply
clone
transformPoint
cssTransform
Get
Release
Mark
interpolate
calculateLocalMatrix
calculateBoneMatrix
interpolate
