The Keyframes class extends the luma.gl Keyframes class and adds additional features. In your application, extend from hubble.gl's Keyframes as shown in the CameraKeyFrames
example. Add features
to animate, such as latitude
. When designing your animation, keyframe values are required for each feature you define.
import {Keyframes} from '@hubble.gl/core';
// Keyframes is typically extended, and not directly used in animations.
class CameraKeyFrames extends Keyframes {
constructor(props) {
super({
...props,
features: ['latitude', 'longitude', 'zoom', 'pitch', 'bearing']
});
}
}
// It can be used directly too.
new Keyframes({features, timings, keyframes, easings = linear, interpolators = 'linear'})
Parameters:
features
(Array<string>
) - An array of features to animate.
timings
(Array<number>
) - "N" timestamps for beginning of keyframe.
keyframes
(Array<Object>
) - "N" camera objects to transition between.
feature
is a key in this object. The value defines the animation.easings
(Array<() => void
, Optional) - "N-1" easing functions between keyframes. Default: t => t
(linear)
interpolators
(Array<string>
, Optional) - "N-1" position curve function between keyframes. Default: 'linear'
set({timings, keyframes, easings = linear, interpolators = 'linear'})
Update keyframe values without re-registering a timeline. Same parameters as keyframe constructor.
get()
Returns:
Object
- { timings, keyframes, easings, interpolators }
.
getFrame()
Returns:
Object
- Each feature
key will be defined and the value will be the current interpolated value of the frame at the current internal time.
See luma.gl Keyframes for more information.