AIJAS
Animation in JAVASCRIPT Android Style
Easily create javscript animation from very few line of code. Experience animation coding as you do animation in android.
Installation
npm install aijas
How it works
Well the main logic is the library creates a set of css styles for animations and inseters into the style of div having id AIJAS_style. These style finally make the element animate. All the animation are possible by creating the keyframe based on the animation type you want to achieve.
Step 1: Import AIJAS
Add the AIJAS script
If you are using npm package import objects as
Step 2: Set animating element data-style-id
The data-style-id will help to uniquely identify the elements style while animating.
Step 3 : Set up animation object
The animation object is the one that will animate our element. Lets see the code below
var anim = ObjectAnimator; anim; animstart;
this code will animate our image which has an id anim-object by translating it in x-axis from 100 to 400px from its current location. First an object animator is created by calling ObjectAnimator.ofInt where we pass our target element as parameter. Then we set the duration of animation and finally we start our animation.
Diffrent type of animation supported
1 . Translate
The translate animation is used to do do horizontal and vertical animation
var anim = ObjectAnimator; anim; animstart;
For Y direction animation
var anim = ObjectAnimator; anim; animstart;
#### 2 . Rotate
The rotate animation rotates element base on the angle in degree
var anim = ObjectAnimator; anim; anim; animstart;
Here you can see something new called Interpolar. We will cover that below
3 . Fade
The fade animation can be done as
var anim = ObjectAnimator; anim; animstart;
#### 4. Scale
The scale animation animates the element by changin its size
var anim = ObjectAnimator; anim; anim; animstart;
#### 5 . Combined animation
With combined animation we can create the animation by using set of animations. This is obtained by the help of animator set object.
var tx = ObjectAnimator; tx; tx; var ty = ObjectAnimator; ty; ty; var rotate = ObjectAnimator; rotate; rotate; var final = ; // make a animation set final; // add animations to the animator set finalstart; // finally start animation
### Setting up animation listener
An animation listener listens for animation events. Its pretty straight forward. It can be used with object animator as well as animator set
anim;
### Interpolars
Well interpolars defines how your animation behaves. It defines the rate of change of key frame attributes. Some of the custom interpolars are :
- LinearInterpolar
- AccelerateDecelerateInterpolator
- CycleInterpolator
- AccelerateInterpolator
- OvershootInterpolar
- BounceInterpolator
You can also create you own interpolar function as :
{thisfactor=factor;} { return Math; }
Here you can see that the getInterpolar function return the accelerate value for time t. The getInterpolar function is called to get the position value with respect to time. You can define the position by your own calculations.
Here the simple example of linear interpolar. It does not have any fancy effects
{} { return t; }
Enjoy animating !!
Animation in JAVASCRIPT Android Style --Select Animation-- Translate_X Translate_Y Rotate Fade Scale Combin Anims
SEE index.html for reference To use in you project download AIJAS.js from /js directory
For android developers
The ValueAnimator cannot be used currently for animation
Enjoy!!