Animations গাইড ও নোট

Web Development - ব্যাবিলনজেএস (BabylonJS)

277

BabylonJS-এ অ্যানিমেশনগুলো খুবই শক্তিশালী এবং সহজে ব্যবহারযোগ্য, যা আপনাকে 3D অবজেক্টগুলোর গতি, আকার, অবস্থান বা অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে সহায়তা করে। আপনি অ্যানিমেশনকে বিভিন্ন ধাপে প্রয়োগ করতে পারেন, যেমন অবস্থান (position), ঘূর্ণন (rotation), স্কেল (scaling), অথবা আলোচনার জন্য বিভিন্ন প্রোপার্টি। এই গাইডে, আমরা BabylonJS-এ অ্যানিমেশন তৈরির পদ্ধতি দেখব।

১. অ্যানিমেশন কনসেপ্ট

BabylonJS-এ অ্যানিমেশন সাধারণত Animation ক্লাস ব্যবহার করে তৈরি হয়। এই ক্লাসের মাধ্যমে আপনি যেকোনো বৈশিষ্ট্য (যেমন অবস্থান, ঘূর্ণন, স্কেল) অ্যানিমেট করতে পারবেন।

অ্যানিমেশনের মৌলিক উপাদান

Animation: একটি অ্যানিমেশন অবজেক্ট, যা যেকোনো প্রোপার্টি পরিবর্তন করতে সাহায্য করে।
KeyFrames: অ্যানিমেশনের বিভিন্ন স্টেপ বা মাইলস্টোন, যেগুলোর মধ্যে পার্থক্য বা পরিবর্তন হবে।
Animation Range: অ্যানিমেশনটির সময়কাল বা সময়সীমা নির্ধারণ করে।

২. BabylonJS-এ অ্যানিমেশন তৈরি করা

এখানে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে একটি বক্সকে উঁচু-নিচু করা হয়েছে এবং তার ঘূর্ণনও দেয়া হয়েছে।

উদাহরণ: বক্সের অবস্থান এবং ঘূর্ণন অ্যানিমেট করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Animations</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // canvas এলিমেন্টটি পেতে
        var canvas = document.getElementById("renderCanvas");

        // BabylonJS ইঞ্জিন তৈরি করা
        var engine = new BABYLON.Engine(canvas, true);

        // নতুন দৃশ্য তৈরি করা
        var scene = new BABYLON.Scene(engine);

        // ক্যামেরা তৈরি করা
        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // আলোর উৎস তৈরি করা
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        // একটি বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        // বক্সের অবস্থান অ্যানিমেট করা
        var positionAnimation = new BABYLON.Animation("positionAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        
        // KeyFrames তৈরি করা
        var keyFrames = [];
        keyFrames.push({ frame: 0, value: 0 });
        keyFrames.push({ frame: 50, value: 5 });
        keyFrames.push({ frame: 100, value: 0 });
        
        // অ্যানিমেশন সেট করা
        positionAnimation.setKeys(keyFrames);
        
        // বক্সে অ্যানিমেশন অ্যাপ্লাই করা
        box.animations.push(positionAnimation);

        // বক্সের ঘূর্ণন অ্যানিমেট করা
        var rotationAnimation = new BABYLON.Animation("rotationAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        
        // Rotation KeyFrames তৈরি করা
        var rotationKeyFrames = [];
        rotationKeyFrames.push({ frame: 0, value: 0 });
        rotationKeyFrames.push({ frame: 50, value: Math.PI });
        rotationKeyFrames.push({ frame: 100, value: 2 * Math.PI });
        
        // ঘূর্ণন অ্যানিমেশন সেট করা
        rotationAnimation.setKeys(rotationKeyFrames);
        
        // বক্সে ঘূর্ণন অ্যানিমেশন অ্যাপ্লাই করা
        box.animations.push(rotationAnimation);

        // অ্যানিমেশনটি চালানো
        scene.beginAnimation(box, 0, 100, true);

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        // ব্রাউজারের আকার পরিবর্তন হলে, আউটপুট রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

Animation Object: BABYLON.Animation ক্লাসের মাধ্যমে দুটি অ্যানিমেশন তৈরি করা হয়েছে, একটি বক্সের position.y এর জন্য এবং অন্যটি rotation.y এর জন্য।
KeyFrames:
- Position Animation: প্রথম কিটফ্রেমে position.y 0, দ্বিতীয় কিটফ্রেমে 5 এবং তৃতীয় কিটফ্রেমে আবার 0।
- Rotation Animation: বক্সের ঘূর্ণন প্রথমে 0, তারপর 180 ডিগ্রি এবং পরে আবার 360 ডিগ্রি।
Animation Loop Mode: ANIMATIONLOOPMODE_CYCLE ব্যবহার করা হয়েছে, যা অ্যানিমেশনটি চক্রাকারভাবে চলতে থাকবে।
Scene.beginAnimation(): beginAnimation ফাংশনটি দিয়ে অ্যানিমেশন শুরু করা হয় এবং এটি 100 ফ্রেমের জন্য চলবে।

৩. অ্যানিমেশন টাইপস

BabylonJS-এ বিভিন্ন ধরনের অ্যানিমেশন প্রোপার্টি আছে, যেমন:

১. ANIMATIONTYPE_FLOAT

যেকোনো ফ্লোটিং ভ্যালু যেমন অবস্থান (position), স্কেল (scale) ইত্যাদি পরিবর্তন করতে ব্যবহৃত হয়।

২. ANIMATIONTYPE_VECTOR3

3D ভেক্টরের জন্য ব্যবহৃত হয়, যেমন position, scaling, rotation (Vector3)।

৩. ANIMATIONTYPE_COLOR3

রঙ পরিবর্তন করার জন্য ব্যবহৃত হয়।

৪. ANIMATIONTYPE_MATRIX

ম্যাট্রিক্স (যেমন ট্রান্সফর্মেশন) অ্যানিমেট করতে ব্যবহৃত হয়।

৪. অ্যানিমেশন রেঞ্জ এবং লুপিং

Range: অ্যানিমেশন এর একটি নির্দিষ্ট সময়সীমার মধ্যে চলতে পারে, যেমন scene.beginAnimation() এর মাধ্যমে স্টার্ট এবং এন্ড ফ্রেম নির্ধারণ করা হয়।
Looping: ANIMATIONLOOPMODE_CYCLE বা ANIMATIONLOOPMODE_CONSTANT লুপিং কন্ট্রোল করে। প্রথমটি অ্যানিমেশন চলাকালীন সময়ে চক্রাকারে চালাবে এবং দ্বিতীয়টি একবারই চালাবে।

৫. অ্যানিমেশন স্টাইল

BabylonJS-এ কিছু অ্যানিমেশন স্টাইল রয়েছে, যা অ্যানিমেশন চলার গতির জন্য ব্যবহৃত হয়। এইগুলো হল:

EaseInOutSine: স্লো শুরু এবং শেষ হয়, মাঝখানে দ্রুত।
EaseInBounce: শুরুতে ধীর, পরে দ্রুত এবং শেষের দিকে ধীর।
EaseOutQuad: শেষের দিকে ধীর।

এগুলি animation.setEase() এর মাধ্যমে প্রয়োগ করা যায়।

সারাংশ

BabylonJS-এ অ্যানিমেশনগুলি অবজেক্টের বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয় এবং বিভিন্ন ধাপে করা যায়, যেমন position, rotation, এবং scaling। আপনি BABYLON.Animation ক্লাস ব্যবহার করে সহজেই অ্যানিমেশন তৈরি করতে পারেন এবং অ্যানিমেশন চালানোর জন্য scene.beginAnimation() ব্যবহার করতে পারেন। বিভিন্ন ধরনের অ্যানিমেশন প্রোপার্টি, কিটফ্রেম, লুপিং এবং অ্যানিমেশন স্টাইলের সাহায্যে আপনাকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় 3D অভিজ্ঞতা তৈরি করতে সক্ষম করে।

Content added By

SATT Academy

Animation কি এবং BabylonJS এ এনিমেশন তৈরির পদ্ধতি

395

Animation হলো একটি প্রক্রিয়া যার মাধ্যমে একটি অবজেক্টের বৈশিষ্ট্য (যেমন পজিশন, স্কেল, রোটেশন) সময়ের সাথে পরিবর্তিত হয়, যাতে একটি গতিশীল এবং প্রাণবন্ত দৃশ্য তৈরি হয়। BabylonJS তে, এনিমেশন একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা 3D অবজেক্টগুলির গতিবিধি এবং বাস্তবসম্মত অভিজ্ঞতা সৃষ্টি করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমরা Animation কি এবং BabylonJS এ এনিমেশন তৈরির পদ্ধতি সম্পর্কে বিস্তারিত জানব।

Animation কি?

Animation হলো একটি গতি বা পরিবর্তনের প্রক্রিয়া যা একটি নির্দিষ্ট সময়ের মধ্যে একটি অবজেক্টের অবস্থা বা বৈশিষ্ট্য পরিবর্তিত হয়। উদাহরণস্বরূপ:

একটি 3D বক্সের ঘূর্ণন (rotation)।
একটি বস্তুর স্কেল পরিবর্তন (size scaling)।
একটি বস্তুর পজিশন পরিবর্তন (movement)।

এনিমেশন প্রক্রিয়াটি সাধারণত দুটি অংশে বিভক্ত:

Keyframes: এনিমেশনের নির্দিষ্ট সময়ের পয়েন্ট যেখানে একটি বৈশিষ্ট্য (যেমন পজিশন, রোটেশন) পরিবর্তিত হয়।
Tweening: keyframes এর মধ্যে পয়েন্টগুলোর মধ্যে গতি সৃষ্টির প্রক্রিয়া, যা স্লো এবং স্মুথ ট্রানজিশন তৈরি করে।

BabylonJS এ Animation তৈরির পদ্ধতি

BabylonJS এ এনিমেশন তৈরি করতে সাধারণত Animation ক্লাস ব্যবহৃত হয়। এটি বিভিন্ন ধরনের অবজেক্টের বৈশিষ্ট্য এনিমেট করতে সাহায্য করে। আসুন দেখি, কিভাবে আমরা একটি বেসিক এনিমেশন তৈরি করতে পারি।

১. BabylonJS তে Animation ক্লাস

BabylonJS এ Animation ক্লাসটি বিভিন্ন উপাদান (যেমন পজিশন, রোটেশন, স্কেল) এনিমেট করতে ব্যবহৃত হয়। এনিমেশন তৈরির জন্য আপনাকে প্রথমে একটি Animation অবজেক্ট তৈরি করতে হবে এবং তারপর তার frame rate, duration, property ইত্যাদি কনফিগার করতে হবে।

২. একটি সহজ এনিমেশন তৈরি করা

ধরা যাক, আমরা একটি বক্স তৈরি করেছি এবং আমরা তার পজিশন এনিমেট করতে চাই।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Animation Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // canvas এলিমেন্টটি পেতে
        var canvas = document.getElementById("renderCanvas");

        // BabylonJS এর ইঞ্জিন তৈরি করা
        var engine = new BABYLON.Engine(canvas, true);

        // Scene তৈরি করা
        var scene = new BABYLON.Scene(engine);

        // ক্যামেরা তৈরি করা
        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // আলোর উৎস তৈরি করা
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        // একটি বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        // Animation তৈরি করা (বক্সের পজিশন পরিবর্তন)
        var animation = new BABYLON.Animation("moveBox", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

        // Keyframe তৈরি করা (বক্সের x পজিশন পরিবর্তন)
        var keyFrames = []; 
        keyFrames.push({ frame: 0, value: 0 });
        keyFrames.push({ frame: 100, value: 5 });
        keyFrames.push({ frame: 200, value: 0 });

        // Keyframe গুলো Animation এ যোগ করা
        animation.setKeys(keyFrames);

        // Animation বক্সে যোগ করা
        box.animations.push(animation);

        // রেন্ডার লুপে Animation চালানো
        engine.runRenderLoop(function () {
            scene.render();
        });

        // ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });

        // Animation চালানো
        scene.beginAnimation(box, 0, 200, true);
    </script>
</body>
</html>

কোডের ব্যাখ্যা:

Scene, Camera, Light, and Box: প্রথমেই একটি 3D বক্স তৈরি করেছি, এবং সেটি দৃশ্যে যোগ করেছি।
Animation তৈরি করা:
- BABYLON.Animation ক্লাসের মাধ্যমে একটি এনিমেশন তৈরি করা হয়েছে।
- "position.x" এ এনিমেশনটি প্রয়োগ করা হয়েছে, যা বক্সের x-axis পজিশন পরিবর্তন করবে।
- এনিমেশনের frame rate 30 নির্ধারণ করা হয়েছে এবং loop mode হিসেবে ANIMATIONLOOPMODE_CYCLE ব্যবহার করা হয়েছে (এটি এনিমেশনকে লুপ করে পুনরায় চালাবে)।
Keyframes তৈরি করা:
- প্রথমে বক্সের x পজিশন 0 তে সেট করা হয়েছে (frame 0)।
- পরবর্তীতে, frame 100 তে x পজিশন 5 তে গিয়ে স্থির হয়েছে।
- তারপর, frame 200 তে আবার x পজিশন 0 তে ফিরে আসবে।
Animation বক্সে যোগ করা:
- box.animations.push(animation) দিয়ে এই এনিমেশনটি বক্সে যোগ করা হয়েছে।
beginAnimation:
- scene.beginAnimation(box, 0, 200, true) এই ফাংশন দিয়ে এনিমেশন শুরু করা হয়েছে, যা বক্সের x পজিশন পরিবর্তন করবে 0 থেকে 5 এবং আবার 0 তে ফিরে আসবে।

৩. Animation এর বিভিন্ন ধরনের প্রপার্টি

BabylonJS এ বিভিন্ন ধরনের এনিমেশন প্রপার্টি তৈরি করা যেতে পারে:

Position: 3D অবজেক্টের অবস্থান পরিবর্তন (x, y, z)।
Rotation: 3D অবজেক্টের রোটেশন পরিবর্তন (x, y, z এভ্যালু)।
Scaling: অবজেক্টের আকার পরিবর্তন (x, y, z আকারে)।
Material: অবজেক্টের রঙ, টেক্সচার ইত্যাদি পরিবর্তন।
Camera: ক্যামেরার পজিশন বা রোটেশন পরিবর্তন।

৪. Animation Types এবং Looping Mode

BabylonJS এ Animation এর কিছু গুরুত্বপূর্ণ টাইপ এবং লুপিং মোড রয়েছে:

ANIMATIONTYPE_FLOAT: এটি সাধারণত নম্বর (যেমন পজিশন বা স্কেল) এনিমেট করতে ব্যবহৃত হয়।
ANIMATIONTYPE_VECTOR3: এটি 3D ভেক্টর (যেমন পজিশন বা স্কেল) এনিমেট করতে ব্যবহৃত হয়।
ANIMATIONTYPE_COLOR3: এটি RGB রঙের জন্য এনিমেশন তৈরি করতে ব্যবহৃত হয়।

Loop Modes:

ANIMATIONLOOPMODE_CONSTANT: এনিমেশন একটি নির্দিষ্ট মানে পৌঁছানোর পর বন্ধ হয়ে যাবে।
ANIMATIONLOOPMODE_CYCLE: এনিমেশন সাইকেল অনুযায়ী চলতে থাকবে।
ANIMATIONLOOPMODE_RELATIVE: এনিমেশন শুরু হলে তা পূর্ববর্তী স্টেটে ফিরে যাবে এবং নতুন স্টেটের সাথে যুক্ত হবে।

সারাংশ

BabylonJS এ Animation একটি গুরুত্বপূর্ণ উপাদান যা অবজেক্টের বিভিন্ন বৈশিষ্ট্য সময়ের সাথে পরিবর্তন করার মাধ্যমে 3D দৃশ্যে গতিশীলতা এবং ইন্টারঅ্যাকশন যোগ করে। এনিমেশন তৈরির জন্য Animation ক্লাস, Keyframes, এবং Looping Modes ব্যবহার করা হয়। আপনি অবজেক্টের Position, Rotation, Scaling এবং Material এনিমেট করে 3D দৃশ্যকে আরো বাস্তবসম্মত ও আকর্ষণীয় করতে পারেন।

Content added By

SATT Academy

Keyframes ব্যবহার করে এনিমেশন তৈরি করা

317

BabylonJS-এ Keyframes ব্যবহার করে এনিমেশন তৈরি করা অনেক সহজ এবং শক্তিশালী একটি পদ্ধতি। Keyframes হল বিশেষ পয়েন্ট বা মোমেন্ট যেখানে আপনি অবজেক্টের অবস্থান, আকার, রঙ বা অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। এভাবে, আপনি অবজেক্টের সময়ের সাথে সাথে এনিমেটেড পরিবর্তন দেখতে পারবেন।

এই গাইডে, আমরা Keyframes ব্যবহার করে একটি সিম্পল এনিমেশন তৈরি করব, যেখানে একটি বক্সের আকার পরিবর্তন হবে এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে চলাচল করবে।

১. প্রজেক্ট ফোল্ডার তৈরি

প্রথমে, একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেখানে একটি index.html ফাইল তৈরি করুন।

২. HTML ফাইল তৈরি

নিচে একটি সিম্পল HTML কোড দেওয়া হলো যেখানে আমরা Keyframes ব্যবহার করে একটি বক্সের আকার পরিবর্তন এবং চলাচল করার এনিমেশন তৈরি করব:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS - Keyframe Animation</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // canvas এলিমেন্টটি পেতে
        var canvas = document.getElementById("renderCanvas");

        // BabylonJS ইঞ্জিন তৈরি করা
        var engine = new BABYLON.Engine(canvas, true);

        // BabylonJS দৃশ্য তৈরি করা
        var scene = new BABYLON.Scene(engine);

        // ক্যামেরা তৈরি করা
        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // আলোর উৎস তৈরি করা
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        // একটি বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.x = 0;

        // Keyframe এনিমেশন তৈরি করা
        var frame1 = {
            frame: 0,
            value: box.scaling.x // বক্সের আকার শুরু হবে 1
        };
        var frame2 = {
            frame: 20,
            value: 2 // বক্সের আকার হবে 2
        };
        var frame3 = {
            frame: 40,
            value: 1 // বক্সের আকার হবে 1
        };

        // বক্সের আকার পরিবর্তনের জন্য এনিমেশন
        var animation = new BABYLON.Animation("scaleAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        animation.setKeys([frame1, frame2, frame3]);

        // বক্সে এনিমেশন যুক্ত করা
        box.animations.push(animation);

        // বক্সের স্থান পরিবর্তন (মুভমেন্ট) এনিমেশন
        var moveAnimation = new BABYLON.Animation("moveAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        moveAnimation.setKeys([
            { frame: 0, value: 0 },
            { frame: 20, value: 5 },
            { frame: 40, value: 0 }
        ]);

        // বক্সে মুভমেন্ট এনিমেশন যুক্ত করা
        box.animations.push(moveAnimation);

        // এনিমেশন রানের জন্য
        scene.beginAnimation(box, 0, 40, true);

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        // ব্রাউজারের আকার পরিবর্তন হলে, BabylonJS আউটপুট রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোডের ব্যাখ্যা:

Canvas এবং Engine: index.html ফাইলে একটি <canvas> ট্যাগ ব্যবহার করা হয়েছে, যেখানে আমরা BabylonJS এর দৃশ্য রেন্ডার করব। তারপর BABYLON.Engine দিয়ে রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে।
Scene: একটি BABYLON.Scene তৈরি করা হয়েছে, যেখানে আমরা সব 3D অবজেক্ট এবং ক্যামেরা রাখব।
Camera: ArcRotateCamera ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে দৃশ্য ঘুরিয়ে দেখার সুবিধা দেবে।
Light: HemisphericLight ব্যবহার করা হয়েছে, যা পরিবেশে আলো ছড়াতে সাহায্য করবে।
Box: BABYLON.MeshBuilder.CreateBox দিয়ে একটি বক্স তৈরি করা হয়েছে এবং সেটি X-অ্যাক্সিসে কিছুটা সরে রাখা হয়েছে।

৩. Keyframe এনিমেশন

এখানে দুটি এনিমেশন তৈরি করা হয়েছে:

১. Scale (আকার পরিবর্তন):

Keyframes ব্যবহার করে বক্সের আকার পরিবর্তন করা হয়েছে।
- প্রথম Keyframe (frame: 0) এ বক্সের আকার 1 থাকবে।
- দ্বিতীয় Keyframe (frame: 20) এ বক্সের আকার 2 হবে।
- তৃতীয় Keyframe (frame: 40) এ বক্সের আকার আবার 1 হয়ে যাবে।

এটি বক্সের আকারকে সাইকেল আকারে পরিবর্তিত করবে।

২. Position (চলাচল):

Keyframes ব্যবহার করে বক্সের অবস্থান পরিবর্তন করা হয়েছে।
- প্রথম Keyframe (frame: 0) এ বক্সের অবস্থান 0 থাকবে।
- দ্বিতীয় Keyframe (frame: 20) এ বক্স X-অ্যাক্সিসে 5 জায়গায় চলে যাবে।
- তৃতীয় Keyframe (frame: 40) এ বক্স আবার 0 অবস্থানে ফিরে আসবে।

এটি বক্সকে নির্দিষ্ট গতিতে চলতে সাহায্য করবে।

৪. ব্রাউজারে প্রজেক্ট পরীক্ষা করা

এখন আপনি আপনার index.html ফাইলটি ওয়েব ব্রাউজারে খুললে, বক্সটি ধীরে ধীরে আকার পরিবর্তন করবে এবং X-অ্যাক্সিসে চলাচল করবে। আপনি মাউস দিয়ে দৃশ্যটি ঘুরিয়ে দেখতে পারবেন।

অতিরিক্ত টিপস

এনিমেশন টাইমিং: BABYLON.Animation এ speedRatio প্যারামিটার ব্যবহার করে আপনি এনিমেশনের গতি নিয়ন্ত্রণ করতে পারেন।
```
scene.beginAnimation(box, 0, 40, true, 1.5);  // এনিমেশন গতি 1.5x হবে
```
Looping: BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE বা BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ব্যবহার করে আপনি এনিমেশন লুপিং কনফিগার করতে পারেন।
- CYCLE: এনিমেশন লুপে চলবে (শুরু থেকে শেষ পর্যন্ত ফিরে আসবে)।
- REVERSE: এনিমেশন উল্টো দিকে চলবে।
- CONST: একবার সম্পূর্ণ হবে এবং বন্ধ হয়ে যাবে।

সারাংশ

এই গাইডে আমরা Keyframes ব্যবহার করে BabylonJS-এ একটি সিম্পল এনিমেশন তৈরি করেছি, যেখানে একটি বক্সের আকার পরিবর্তন এবং চলাচল হয়েছে। আপনি এই পদ্ধতি ব্যবহার করে আরও জটিল এনিমেশন তৈরি করতে পারবেন এবং 3D অবজেক্টের গতিবিধি ও পরিবর্তন নিয়ন্ত্রণ করতে সক্ষম হবেন।

Content added By

SATT Academy

Mesh, Camera এবং Light এর এনিমেশন

310

BabylonJS-এ এনিমেশন ব্যবহৃত হয় 3D অবজেক্ট, ক্যামেরা এবং আলোর গতিশীলতা এবং পরিবর্তনগুলো প্রদর্শন করতে। এটি 3D দৃশ্যের মধ্যে জীবন্ততা এবং আকর্ষণ সৃষ্টি করে। এই গাইডে আমরা দেখব কিভাবে Mesh (অবজেক্ট), Camera এবং Light এর এনিমেশন তৈরি করা যায়।

১. Mesh (অবজেক্ট) এর এনিমেশন

Mesh-এর এনিমেশন সাধারণত অবস্থান, স্কেল, রোটেশন বা অন্য যে কোনো বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয়। BabylonJS-এ Mesh-এর জন্য এনিমেশন তৈরি করতে Animation ক্লাস ব্যবহার করা হয়।

উদাহরণ: বক্সের রোটেশন এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// বক্সের রোটেশন এনিমেশন তৈরি করা
var rotateAnimation = new BABYLON.Animation("rotateAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// রোটেশন কিভাবে পরিবর্তিত হবে
var keys = [];
keys.push({ frame: 0, value: 0 });
keys.push({ frame: 100, value: Math.PI * 2 }); // এক রেভোলিউশন

rotateAnimation.setKeys(keys);

// এনিমেশন বক্সে অ্যাপ্লাই করা
box.animations.push(rotateAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(box, 0, 100, true);

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

BABYLON.Animation: একটি নতুন এনিমেশন তৈরি করা হয়েছে যা বক্সের রোটেশন পরিবর্তন করবে।
setKeys(): এনিমেশনের মূল পয়েন্টগুলো নির্ধারণ করা হয়েছে, যেমন প্রথমে 0 ডিগ্রি এবং পরবর্তীতে 360 ডিগ্রি (এক রেভোলিউশন)।
scene.beginAnimation(): এনিমেশন শুরু করতে এই ফাংশনটি ব্যবহার করা হয়েছে, এবং true মানে এনিমেশনটি লুপ হবে।

২. Camera (ক্যামেরা) এর এনিমেশন

ক্যামেরার এনিমেশন খুবই গুরুত্বপূর্ণ যখন আমরা দৃশ্যের মধ্যে ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি পরিবর্তন করতে চাই। ক্যামেরার এনিমেশন সাধারণত পজিশন, রোটেশন বা ফোকাস পয়েন্ট এর পরিবর্তন হতে পারে।

উদাহরণ: ক্যামেরা পজিশন এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// ক্যামেরার পজিশন এনিমেশন তৈরি করা
var cameraAnimation = new BABYLON.Animation("cameraAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// ক্যামেরা পজিশন কিভাবে পরিবর্তিত হবে
var cameraKeys = [];
cameraKeys.push({ frame: 0, value: 0 });
cameraKeys.push({ frame: 100, value: 5 }); // ক্যামেরা এক্স-অক্ষের উপর 5 ইউনিট সরবে

cameraAnimation.setKeys(cameraKeys);

// ক্যামেরায় এনিমেশন অ্যাপ্লাই করা
camera.animations.push(cameraAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(camera, 0, 100, true);

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

position.x: ক্যামেরার x অবস্থান পরিবর্তন করা হচ্ছে। এটি ক্যামেরার অবস্থানকে এক জায়গা থেকে অন্য জায়গায় সরিয়ে নেবে।
camera.animations.push(cameraAnimation): ক্যামেরায় এনিমেশন অ্যাপ্লাই করা হয়েছে।
scene.beginAnimation(camera): ক্যামেরার এনিমেশন শুরু করা হয়েছে।

৩. Light (আলো) এর এনিমেশন

এনিমেটেড আলোর উৎস ব্যবহার করে দৃশ্যের আলো এবং ছায়া পরিবর্তন করা যায়, যা দৃশ্যের আবহাওয়ার পরিবর্তন বা কোনো বিশেষ পরিস্থিতি তৈরি করতে সাহায্য করে।

উদাহরণ: পয়েন্ট লাইটের ইনটেনসিটি (শক্তি) এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// পয়েন্ট লাইট তৈরি করা
var pointLight = new BABYLON.PointLight("pointLight", BABYLON.Vector3.Zero(), scene);

// পয়েন্ট লাইটের ইনটেনসিটি এনিমেশন তৈরি করা
var lightAnimation = new BABYLON.Animation("lightAnimation", "intensity", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// লাইটের ইনটেনসিটি কিভাবে পরিবর্তিত হবে
var lightKeys = [];
lightKeys.push({ frame: 0, value: 1 });
lightKeys.push({ frame: 100, value: 3 }); // লাইটের শক্তি 1 থেকে 3 পর্যন্ত পরিবর্তিত হবে

lightAnimation.setKeys(lightKeys);

// লাইটে এনিমেশন অ্যাপ্লাই করা
pointLight.animations.push(lightAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(pointLight, 0, 100, true);

// দৃশ্যে এনিমেশন চালানো
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

intensity: আলোতে শক্তি বা ইনটেনসিটি পরিবর্তন করা হচ্ছে। এটি দৃশ্যে আলো কতটা উজ্জ্বল হবে তা নিয়ন্ত্রণ করে।
lightKeys.push(): ইনটেনসিটির কিভাবে পরিবর্তন হবে তা নির্ধারণ করা হয়েছে, যেখানে প্রথমে এটি 1 এবং পরে 3 হবে।
pointLight.animations.push(lightAnimation): পয়েন্ট লাইটে এনিমেশন অ্যাপ্লাই করা হয়েছে।

সারাংশ

BabylonJS-এ Mesh, Camera এবং Light এর এনিমেশন ব্যবহারের মাধ্যমে আপনি একটি 3D দৃশ্যের গতিশীলতা এবং আকর্ষণ বৃদ্ধি করতে পারেন। Mesh-এ রোটেশন, স্কেল বা পজিশন পরিবর্তন, ক্যামেরা পজিশন বা দৃষ্টিভঙ্গি পরিবর্তন এবং আলো শক্তির পরিবর্তন করা সহজ এবং কার্যকর। এই এনিমেশনগুলো ব্যবহার করে আপনি আরও জীবন্ত এবং ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করতে পারবেন।

Content added By

SATT Academy

Advanced Animation Techniques (Blending, Easing Functions)

315

BabylonJS-এ অ্যানিমেশন পরিচালনা করার জন্য বিভিন্ন উন্নত পদ্ধতি রয়েছে। এর মধ্যে Blending এবং Easing Functions দুটি অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী কৌশল। এই কৌশলগুলো ব্যবহার করে আপনি আরো বাস্তবসম্মত এবং আকর্ষণীয় অ্যানিমেশন তৈরি করতে পারবেন।

এই টিউটোরিয়ালে আমরা Blending এবং Easing Functions সম্পর্কে বিস্তারিতভাবে আলোচনা করব এবং কিভাবে এগুলো ব্যবহার করা যায়, সেটি দেখাবো।

১. Animation Blending

Animation Blending হলো একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করার প্রক্রিয়া। যখন এক অ্যানিমেশন শেষ হয় এবং পরবর্তী অ্যানিমেশন শুরু হয়, তখন blending এর মাধ্যমে সেগুলোর মধ্যে একটি মসৃণ সংমিশ্রণ (transition) তৈরি করা হয়। এটি বিশেষভাবে 3D চরিত্র বা অবজেক্টের জন্য গুরুত্বপূর্ণ, যেখানে চরিত্রের অবস্থান বা অ্যাকশন একটি অ্যানিমেশন থেকে অন্য অ্যানিমেশনে পরিবর্তিত হয়।

Blending এর পদ্ধতি

BabylonJS-এ AnimationGroup ব্যবহার করে একাধিক অ্যানিমেশন একসাথে blend করা যায়।

উদাহরণ: Animation Blending

ধরা যাক, আমরা একটি ক্যারেক্টার বা অবজেক্টকে ঘুরাতে চাই, এবং একই সাথে তার স্কেল বা আকারও পরিবর্তন করতে চাই। চলুন দেখি কিভাবে blending করা যায়:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Blending Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        // প্রথম অ্যানিমেশন: রোটেশন
        var rotationAnimation = new BABYLON.Animation("rotation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var keyFrames = [];
        keyFrames.push({ frame: 0, value: 0 });
        keyFrames.push({ frame: 100, value: Math.PI * 2 });
        rotationAnimation.setKeys(keyFrames);

        // দ্বিতীয় অ্যানিমেশন: স্কেল পরিবর্তন
        var scaleAnimation = new BABYLON.Animation("scale", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var scaleKeyFrames = [];
        scaleKeyFrames.push({ frame: 0, value: 1 });
        scaleKeyFrames.push({ frame: 100, value: 2 });
        scaleAnimation.setKeys(scaleKeyFrames);

        // AnimationGroup তৈরি করা
        var animationGroup = new BABYLON.AnimationGroup("group");
        animationGroup.addTargetedAnimation(rotationAnimation, box);
        animationGroup.addTargetedAnimation(scaleAnimation, box);

        // blending এর জন্য একটি প্যারামিটার সেট করা
        animationGroup.start(true, 1.0, 0, 100);  // blend time (transition time) 100 ফ্রেমের মধ্যে হবে

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

এখানে rotationAnimation এবং scaleAnimation দুটি আলাদা অ্যানিমেশন তৈরি করা হয়েছে, একটি বক্সের জন্য রোটেশন এবং অন্যটি স্কেল পরিবর্তন করার জন্য।
AnimationGroup ব্যবহার করে এই দুটি অ্যানিমেশন একসাথে blend করা হয়েছে। animationGroup.start(true, 1.0, 0, 100); এই লাইনের মাধ্যমে blending এর জন্য সময় নির্ধারণ করা হয়েছে, যেখানে 1.0 হলো blending স্পিড এবং 100 হলো অ্যানিমেশন সম্পূর্ণ হওয়ার সময়।

এই ধরনের blending আপনাকে একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করতে সাহায্য করবে।

২. Easing Functions

Easing Functions ব্যবহার করে অ্যানিমেশনকে আরো মসৃণ এবং প্রকৃত অনুভূতি দেওয়া যায়। সাধারণত, একটি সোজা লিনিয়ার অ্যানিমেশন থাকে, যা সরাসরি শুরু থেকে শেষ পর্যন্ত চলে। তবে easing functions আপনাকে অ্যানিমেশনকে শুরুর দিকে ধীরে, মাঝখানে দ্রুত এবং শেষে আবার ধীরে চলতে সাহায্য করে। এটি অ্যানিমেশনকে আরো প্রকৃত এবং জীবন্ত মনে হয়।

Easing Functions এর প্রকার:

LinearEase: সরল এবং সোজা অ্যানিমেশন।
EaseInBounce: শুরুতে ধীরে, পরবর্তীতে দ্রুত এবং শেষে বাউন্স।
EaseOutElastic: শেষের দিকে ইলাস্টিক মুভমেন্ট।
EaseInOutCubic: শুরু এবং শেষের দিকে ধীরে, মাঝখানে দ্রুত।

উদাহরণ: Easing Function ব্যবহার

এখানে আমরা EaseInOutCubic easing function ব্যবহার করবো:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easing Functions Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        // রোটেশন অ্যানিমেশন তৈরি করা
        var rotationAnimation = new BABYLON.Animation("rotation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var keyFrames = [];
        keyFrames.push({ frame: 0, value: 0 });
        keyFrames.push({ frame: 100, value: Math.PI * 2 });
        rotationAnimation.setKeys(keyFrames);

        // Easing Function যোগ করা
        rotationAnimation.setEasingFunction(new BABYLON.EaseInOutCubic());

        // অ্যানিমেশন চালু করা
        box.animations.push(rotationAnimation);
        scene.beginAnimation(box, 0, 100, true);

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

এখানে একটি রোটেশন অ্যানিমেশন তৈরি করা হয়েছে এবং তার মধ্যে EaseInOutCubic easing function যোগ করা হয়েছে। এর মাধ্যমে রোটেশনটি শুরুতে ধীরে, মাঝখানে দ্রুত এবং শেষে আবার ধীরে হবে।
setEasingFunction() মেথড ব্যবহার করে easing function সেট করা হয়েছে, যা অ্যানিমেশনকে আরো প্রকৃত অনুভূতি দেয়।

সারাংশ

Animation Blending: একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করতে ব্যবহৃত হয়। BabylonJS-এ AnimationGroup ব্যবহার করে একাধিক অ্যানিমেশনকে blend করা সম্ভব।
Easing Functions: অ্যানিমেশনকে আরও বাস্তবসম্মত করতে easing functions ব্যবহার করা হয়। এটি অ্যানিমেশনকে সহজ এবং সুন্দরভাবে শুরু ও শেষ করতে সাহায্য করে। BabylonJS-এ বিভিন্ন easing function যেমন EaseInOutCubic, LinearEase ইত্যাদি ব্যবহার করা যেতে পারে।

এই উন্নত অ্যানিমেশন কৌশলগুলো ব্যবহার করে আপনি আপনার প্রজেক্টে আরো আকর্ষণীয় এবং বাস্তবসম্মত অ্যানিমেশন তৈরি করতে পারবেন।

Content added By

SATT Academy

BabylonJS পরিচিতি BabylonJS সেটআপ এবং পরিবেশ তৈরি BabylonJS বেসিকস Mesh এবং Material Camera এবং Lighting

Animations গাইড ও নোট

১. অ্যানিমেশন কনসেপ্ট

অ্যানিমেশনের মৌলিক উপাদান

২. BabylonJS-এ অ্যানিমেশন তৈরি করা

উদাহরণ: বক্সের অবস্থান এবং ঘূর্ণন অ্যানিমেট করা

কোড ব্যাখ্যা:

৩. অ্যানিমেশন টাইপস

১. ANIMATIONTYPE_FLOAT

২. ANIMATIONTYPE_VECTOR3

৩. ANIMATIONTYPE_COLOR3

৪. ANIMATIONTYPE_MATRIX

৪. অ্যানিমেশন রেঞ্জ এবং লুপিং

৫. অ্যানিমেশন স্টাইল

সারাংশ

Animation কি এবং BabylonJS এ এনিমেশন তৈরির পদ্ধতি

Animation কি?

BabylonJS এ Animation তৈরির পদ্ধতি

১. BabylonJS তে Animation ক্লাস

২. একটি সহজ এনিমেশন তৈরি করা

কোডের ব্যাখ্যা:

৩. Animation এর বিভিন্ন ধরনের প্রপার্টি

৪. Animation Types এবং Looping Mode

সারাংশ

Keyframes ব্যবহার করে এনিমেশন তৈরি করা

১. প্রজেক্ট ফোল্ডার তৈরি

২. HTML ফাইল তৈরি

কোডের ব্যাখ্যা:

৩. Keyframe এনিমেশন

১. Scale (আকার পরিবর্তন):

২. Position (চলাচল):

৪. ব্রাউজারে প্রজেক্ট পরীক্ষা করা

অতিরিক্ত টিপস

সারাংশ

Mesh, Camera এবং Light এর এনিমেশন

১. Mesh (অবজেক্ট) এর এনিমেশন

উদাহরণ: বক্সের রোটেশন এনিমেশন

কোড ব্যাখ্যা:

২. Camera (ক্যামেরা) এর এনিমেশন

উদাহরণ: ক্যামেরা পজিশন এনিমেশন

কোড ব্যাখ্যা:

৩. Light (আলো) এর এনিমেশন

উদাহরণ: পয়েন্ট লাইটের ইনটেনসিটি (শক্তি) এনিমেশন

কোড ব্যাখ্যা:

সারাংশ

Advanced Animation Techniques (Blending, Easing Functions)

১. Animation Blending

Blending এর পদ্ধতি

উদাহরণ: Animation Blending

কোড ব্যাখ্যা:

২. Easing Functions

Easing Functions এর প্রকার:

উদাহরণ: Easing Function ব্যবহার

কোড ব্যাখ্যা:

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!