Understanding Componets And Props

Here are some core concepts one by one.

Anything that is draw on the screen by bilza.js is a Component.

Every Component has props (properties).These properties are like opacity, rotation,width,height,x,y etc etc.

The props that Components have are of 2 type. First type of props are called "Core Props" which each Component inherets from "BaseComponent" class. Second type of props are called "Component Props" which are individual to each component depending upon the purpose of that Component.

At any given time a Component represents the state of its props. For example if we set the color prop of a component to red it will display in red color

Every Prop (core prop or Component props) is a wrapper around a value (string,number,boolean). For example the "rotation" prop is a wrapper around a Number which represents the rotate angle of the component.

So any prop (core or component prop) will be one of the following Types

AniNumber (Animated Number)

This is a wrapper around a number. Props like rotation,opacity,fontSize etc are of type AniNumber

AniBoolean (Animated Boolean)

This is a wrapper around a boolean. Props like "visible", "showBackground" etc are of type AniBoolean

AniString (Animated String)

This is a wrapper around a string. Props like "content" etc are of type AniString

AniColor (Animated Color)

This is a wrapper around a color. Work in progress!!!!!

AniPerc (Animated Number)

This is a wrapper around a Percentage. Props like width and height are of type AniPerc

Each of these Props provide methods (like animate, goto, jumpBetween) using which we can animate them.

So to animate a Component we attach animations to its props.