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.