Learning should always be fun

Animation in Javascript with AIJAS

Animation in Javascript with AIJAS

Hello gud ppl! In this article we will see how to create complex  javascript animation in you browser with the help of AIJAS. AIJAS is a animation library that lets you to create javascript animations in similar ways as that of android. The library is very easy to get started with. See the readme file of the library here at github.

 

Before we begin…

 

Let us first clone the project with :

https://github.com/AbhijetPokhrel/AIJAS.git

 

You can also use npm as :

npm install aijas

 

If you are not using npm, add /dist/AIJAS.js on your script after the body tag . For those using npm make sure the bundled file is added after the body tag.

 

Creating animation from a mathematics equation

 

We will create an animation from the following simple harmonic motion equation.

x(t) = A*cos(w*t - phi)

Now lets say

A = 1.2,

w = 2*pi*f

f= 2

and phi = 100

Then our equation becomes 

x(t) = 1.2*cos(2*pi*2 - 100)

We will not see the basics of AIJS here. I will now dive into  the code.

 

Now lets create test.html as:

 

<!DOCTYPE html>

<html>

<head>
    <title>Animation in JAVASCRIPT Android Style</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #anim-object {
            padding: 20px;
            width: 100px;
            text-align: center;
            border-radius: 10%;
            border: 2px solid #303030
        }

        .centerXY {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>

    <div class="centerXY">

        <div>
            <button onclick="loadAnim(this)">click to animate</button>
        </div>

        <div class="anim-section">
            <div class="img-holder">

                <div id="anim-object" data-style-id="ball11">
                    hello
                </div>

            </div>

        </div>

    </div>
    <script src="dist/AIJAS.js"></script>
    <script type="text/javascript">

        window.onload = function () {

        }

        function loadAnim(elem) {
            console.log("load " + elem.value);

            var anim = ObjectAnimator.ofInt(document.getElementById("anim-object"),
                View.TRANSLATE_X, 100, 500);
            anim.setDuration(5000);
            anim.setInterpolar(new TestInterpolar());
            anim.setAnimationListener({
                onAnimationStart: function (data_set_id) {
                    console.log("animaitn start main Id : " + data_set_id);
                },
                onAnimationRepeat: function (data_set_id) {
                    console.log("animaitn repeat main Id : " + data_set_id);
                },
                onAnimationEnd: function (data_set_id) {
                    console.log("animaitn end main Id : " + data_set_id);
                }
            });
            anim.start();

        }

        class TestInterpolar {
            constructor() { }

            getInterpolar(t) {
                return 1.2 * Math.cos(2 * Math.PI * 2 * t - 100)
            }
        }
    </script>
</body>

</html>

 

Here we have created a interpolator named TestInterpolar. In every interpolator there must be a getInterpolar function. This getInterpolar function has t as an argument. The value of t will correspond to time as the animation progress. Here we have added the equation mentioned above, which will give the instantaneous value at a given time.

 

Under the loadAnim function we have initialized the ObjectAnimator which is the heart of every animation when working with AIJAS. Here we made animation in X-axis with TRANSLATE_X. You can change this to TRANSLATE_Y for Y-axis animation, ROTATE for rotation and so on. The last two arguments are the points that represents from and to points of animation relative to the initial position. Here we are translating from 100px to 500px. The animation is exactly symmetric to the initial position if you set 100 to 0.

Conclusion

 

Here we saw making simple javascript animation with mathematical functions. I hope you liked it.

Cheers!!

 

Feature Image credit :

Photo by Pankaj Patel on Unsplash