Hyperactive animation layers
npm install hyperactThis is a work in progress, still poorly defined in many areas.
Documentation does not mean implementation.
Beware changes like renaming, with semver violations, for just a little while longer.
``javascript
import { activate } from "hyperact";
const view = {
animationForKey: (key, value, previous, presentation) => 1.0,
display: function() { console.log("x:%s;",this.x); },
x: 0
};
activate(view);
view.x = 1;
`
- magic Fractal lissajous curves in WebGL
- rocketship Moved to Hyperstyle
- transaction Moved to Hyperstyle
- rococo Canvas drawing example
- bohr The not quite Bohr model of the atom
- tags Hello world using script tags
- basic Hello world using ES6 import
#### activate(receiver, delegate, layer, descriptions)
Provides with methods and property accessors for animation management.
Parameters
- receiver {object} Required. The object that receives methods and property accessors. Existing properties are automatically registered to animate.delegate {object}
- Optional. The object that implements also optional delegate methods. Default is receiver. layer {object}
- Optional. The object upon which property value change triggers implicit animation. Default is receiver. descriptions {object}
- Optional. Declarative alternative to implementing animationForKey.
Returns
{object} The same receiver with animation management methods and property accessors.
Discussion
Currently, behavior is undefined if there are any naming collisions.
This includes calling activate on the same object more than once.
The provided receiver methods are
registerAnimatableProperty,needsDisplay
,addAnimation
,removeAnimation
,animationNamed
,allAnimations
, andremoveAllAnimations
.layer
The provided receiver property accessors are
,model
,presentation
, andprevious
.animationForKey
The optional delegate methods are
,display
,input
, andoutput
.
, the first argument to the activate function.
####
registerAnimatableProperty(property, default)
Enables implicit animation on property value change of the receiver’s layer.Parameters
-
Required. The name of the animatable property.
- default {object|number} Optional. The description or duration used to implicitly animate on registered property value change. Returns
{undefined}Discussion
The default animation may be changed by calling again, but there is currently no way to deregister.
####
Schedules a call of the delegate method at the next animation frame.Returns
{undefined}
####
Adds an animation to the receiver.Parameters
-
Required. An animation description. Duration is also allowed but not expected to be useful.
- name {string} Optional. If provided, becomes the argument needed for animationNamed and removeAnimation. Returns
{undefined}Discussion
If not undefined, any previous animation with the same name would get replaced.
####
Parameters
-
Required. The name argument that was passed to addAnimation. Returns
{undefined}
####
Parameters
-
Required. The name argument that was passed to addAnimation. Returns
{object} A description of the animation.
####
allAnimationsReturns
An array descriptions of active animations.
####
removeAllAnimations
Removes all animations from the receiver, including those not accessible for lack of a name.Returns
Receiver Property Accessors
The following property accessors are added to the , the first argument to the activate function.
####
get layerReturns
The object upon which changes to property values can be made to trigger implicit animation.
####
set layer
Perform a merge of properties like React’s but synchronous.
Properties are automatically registered to animate,
no call to registerAnimatableProperty is needed,
unless to specify a default animation.
Delegate animationForKey calls are triggered on value change of respective properties.Returns
{undefined}Discussion
Currently there is no way to deregister properties.
####
Returns
A copy of the layer reflecting specified values.
####
get presentationReturns
A copy of the layer reflecting animated values.
####
get previousReturns
A copy of the layer reflecting previous values.
Delegate methods
The following methods, when implemented on the delegate object passed as the second argument to the activate function,
allow additional configuration.
####
display
Optional.
This will be called at every animation frame of a with running animations.
Properties will reflect current animated values.
An implementation should apply those values here to produce animated results.Returns
{undefined} Expects nothing. A return value is ignored.Discussion
Currently, neither
activate nor registerAnimatableProperty result in a call to display but this may change in the future.
####
animationForKey(key, value, previous, presentation)
Optional. If this method is implemented, the delegate will be asked to return an animation to run in response to every value change of registered properties.Parameters
-
The property that changed.
- value {any} The new value.
- previous {any} The previous value.
- presentation {any} The current animated value. Returns
{object|number|null|undefined} Expects an animation description or duration to animate.
Returning undefined is equivalent to returning the default animation registered by registerAnimatableProperty.
Returning null will result in no animation, regardless if a default is registered.
####
input
Optional. A value transformer. If this method is implemented, it must return a value.Parameters
-
The affected property.
- value {any} The value to be transformed. Returns
{any} Expects the transformed value.
####
output
Optional. A value transformer. If this method is implemented, it must return a value.Parameters
-
The affected property.
- value {any} The value to be transformed. Returns
{any} Expects the transformed value.
Animation Descriptions
Currently there are no exposed animation classes but this might change.
A number or object literal is returned by animationForKey,
or passed to addAnimation and registerAnimatableProperty.
$3
This is the primary animation class for interpolating between property values.Parameters
-
property {string}
- Type specific
- to {any} Type specific
- type {object} Must implement zero, add, subtract and interpolate. Default is HyperNumber.
- duration {number} In seconds!
- easing {function} currently callback function only, need cubic bezier and presets. Defaults to linear
- delay {number} In seconds
- blend {string} "relative" (the default) or "absolute" but will probably be changed to absolute {boolean} defaulting to false.
- additive {boolean} The default is true!
- speed {number} Not finished.
- iterations {number} Default is 1.
- autoreverse {boolean} When iterations > 1. Easing also reversed.
- fillMode {string} Not finished, behavior is not fully realized, thus unreliable
- index {number} For a custom compositing order.
- finished {number} Not finished. Should be finished {boolean} or better yet private.
- startTime {number} Set automatically when added.
- onend {function} Fires regardless of fillMode. Should be renamed.
- naming {string} Not finished. "default", "exact", "increment", "nil" but might just be replaced with a "key" property
- remove {boolean} If the animation is removed on completion.
$3
Has the same properties of Basic Animation, without from or to.Parameters
-
keyframes {array{any}} An array of property values.
- offsets {array{number}} An optional array of timing offsets between 0 and 1.
$3
This provides a way to run in parallel multiple properties of the same object.Parameters
-
group {array{Animation}} An array of animations to run at the same time.$3
This provides a way to run in sequence multiple properties of the same object.Parameters
-
chain {array{Animation}}` An array of animations to run one after another.
The API design is heavily influenced by Core Animation.
Files in the source/style directory are
highly modified derivative works of web-animations-js-legacy,
which is released under the same license.
Apache-2.0