Chaining
Chain animations
Sometimes we may need to chain multiple animations in a controlled way to achieve the desired effect. I2Djs provides a couple of chaining APIs, sequenceChain and parallelChain, to chain one or more animations sequentially / parallel respectively. Chaining APIs provides great control in implementing complex animations easily.
It even allows nested chaining - one chain within another.
Chaining methods are available as a part of I2D Object space.
Or It can be imported as below.
import {chain} from 'i2djs';
APIs
I2d.sequenceChain()
let ChainInstance = i2d.chain.sequenceChain()
sequenceChain is used to perform one or more animations in sequential order.
I2d.parallelChain()
let ChainInstance = i2d.chain.parallelChain()
parallelChain is used to perform one or more animations simultaneously.
ChainInstance APIs
#.add(); - Add anime executables to the chain instance. Anime executables can be obtained using - animateExe method.
Example:
chain.add(node.animateExe({
duration: 1000,
ease: 'easeInOutSin',
attr: {
x2: da.x,
y2: da.y
},
end: function (d) {
render(d);
}
}));
#.duration(Milliseconds); - Set chain duration in milliseconds. Entire chain will be completed in the specified duration. In the case of a sequential chain, the duration gets split among the animations. whereas in a parallel chain, all animations get the same duration.
#.loop(Number); - Number of times chain needs to be executed.
#.end(exec); - On end of the chain execution, exec function will be called.
#.direction(); - Direction in which the chain execution should take place. Default - First child to last, Reverse - Last child to first.
#.start(); - A method to invoke the chain execution.