An oscillator is an optional interpolator that runs t from [easing(0), easing(1)]
and the usually outputs a value from [-1, 1] where usually
f(0) = 0 and f(1) = 0.
Its output will be generate v = valueStart + (value - valueStart) * oscillator(easing(t))
and then will be injected into a path as input.
An oscillator has the following usages:
A rotational movement, where the oscillator defines the rotation and
the easing the defines the speed.
Flashing elements, where an element changes its opacity or text-shadow,
and these values oscillate between [0, 1].
Uni-dimensional oscillators. Unlike oscillators, the oscillators have their value stored
in the Action Link, allowing to link the end value to the next animation.
An oscillator if it's used together with an easing will if it's in the same dimension
deform the wave and if it's in different dimensions the easing will define
the speed of oscillator.
The oscillators shares the namespace with , allowing any easing function
to operate also as a oscillator.
Since the main function of an oscillator is to return to its original position
at the end of the animation cycle, when an easing is used as an oscillator the
best is to use the following:
{ iterationCount: 2, direction: alternate }
One type of oscillators are pulsars.
Pulsars only have energy during a certain amount of time,
the rest of the time are motionless.
Core oscillators
WARNING! In BeamToIX 4.x these core oscillators will move core-oscillators plugin.
To prevent breaking changes include now the js script core-oscillators.js on the html file.
BeamToIX has the following core oscillators:
harmonic - it generates a sinusoidal function that repeats it self every
duration / cycles.
See
gallery/animate-oscillator
damped - it's a sinusoidal function that reduces its amplitude due friction in
every cycle.
To reduce the user's effort, BeamToIX uses cycles parameter to compute the friction.
pulsar - outside the range of [midpoint - spread, midpoint + spread]
it will return 0, and inside the range will generate a function depending of
the parameter type:
normal - a bell shape curve. this is the default type.
DevToIX
Description
An oscillator is an optional interpolator that runs
tfrom [easing(0), easing(1)] and the usually outputs a value from [-1, 1] where usually f(0) = 0 and f(1) = 0. Its output will be generatev = valueStart + (value - valueStart) * oscillator(easing(t))and then will be injected into a path as input.An oscillator has the following usages:
A rotational movement, where the oscillator defines the rotation and the easing the defines the speed.
Flashing elements, where an element changes its
opacityortext-shadow, and these values oscillate between [0, 1].Uni-dimensional oscillators. Unlike oscillators, the oscillators have their value stored in the Action Link, allowing to link the end value to the next animation.
An oscillator if it's used together with an easing will if it's in the same dimension deform the wave and if it's in different dimensions the easing will define the speed of oscillator.
The oscillators shares the namespace with , allowing any easing function to operate also as a oscillator. Since the main function of an oscillator is to return to its original position at the end of the animation cycle, when an easing is used as an oscillator the best is to use the following:
One type of oscillators are
pulsars. Pulsars only have energy during a certain amount of time, the rest of the time are motionless.Core oscillators
WARNING! In BeamToIX 4.x these core oscillators will move
core-oscillatorsplugin. To prevent breaking changes include now the js scriptcore-oscillators.json the html file.BeamToIX has the following core oscillators:
harmonic- it generates a sinusoidal function that repeats it self every duration / cycles.See
gallery/animate-oscillator
damped- it's a sinusoidal function that reduces its amplitude due friction in every cycle. To reduce the user's effort, BeamToIX uses cycles parameter to compute the friction.pulsar- outside the range of [midpoint - spread, midpoint + spread] it will return 0, and inside the range will generate a function depending of the parametertype:normal- a bell shape curve. this is the default type.sine- a sinusoidal function.random- a random value within [-1, 1].positive-random- a random value with [0, 1].gallery/animate-pulsar