Easing¶
Easing functions provided with shifty are supported.
A few basic easing options:
'linear'
'easeIn'
'easeOut'
'easeInOut'
You can also provide an custom easing function.
Custom animations¶
See example in demo page.
Customizing animations is possible with the help of from
, to
and step
parameters.
Tweening engine changes defined values over time and calls step function for each animation's frame.
Note
There's a big difference between passing the from
and to
parameters in initialization
of progress bar compared to passing in .animate()
call. Here's example code and illustrations to explain the difference:
Pass in initialization
var bar = new ProgressBar.Line('#container', {
from: { color: '#000 '},
to: { color: '#888 '},
step: function(state, bar, attachment) {
bar.path.setAttribute('stroke', state.color);
}
});
Pass in .animate()
call
var bar = new ProgressBar.Line('#container', {
step: function(state, bar, attachment) {
bar.path.setAttribute('stroke', state.color);
}
});
var opts = {
from: { color: '#000 '},
to: { color: '#888'}
};
bar.animate(0.5, opts);
from
parameter¶
Object containing values which should be tweened.
These values represent the starting values of the animation. Default: {}
.
For example
{
// Start from thin gray line
width: 0.1,
color: '#eee'
}
Thanks to shifty, you can tween values in formats like translateX(45px)
, rgb(0,255,0)
and #fff
.
See all supported string formats from shifty's documentation
Easing defined as option for animation applies to all of the specified values.
to
parameter¶
Object containing values which should be tweened. These represent the final values after animation is done. Default: {}
.
For example
{
// Finish to thick black line
width: 1,
color: '#000'
}
Signature must match from
step
parameter¶
Function called for each animation step. Tweened values, a reference to the path or shape, and an attachment are passed as parameters. Attachment can be reference to any object you need to modify within step function. Default: function() {}
.
Warning
This function is called multiple times per second. To make sure animations run smoothly, keep it minimal.
For example
function(state, shape, attachment) {
shape.path.setAttribute('stroke-width', state.width);
shape.path.setAttribute('stroke', state.color);
attachment.text.innerHTML = shape.value() * 100;
}