[FREE] TextAnimator - Made it for fun

[Still_Learning]

🧩 TextAnimator

An extension for Kodular/MIT App Inventor 2.
Advanced Text Animator with dropdown menus for animation and interpolator types.

Specifications

---

Package: com.jsr.textanimator
Size: 32.92 KB
Minimum API Level: 1
Updated On: 2025-12-13T18:30:00Z
Built & documented using: FAST v5.3.2-premium
Specila Thanks: @JEWEL for his wounderful Extension building platform which bulds extension in no time. Multiple options are there for our skill level.
Extension : com.jsr.textanimator.aix (33.5 KB)
Used Library: No Lib is used in this extn, only helper java file for dropdown using this thread

TextAnimator Extension: A User Guide & Best Practices

This guide explains the core concepts and best practices for using the TextAnimator extension to create fluid, professional animations in your apps.

Core Concept: What vs. How

The extension offers two primary animation blocks. Understanding the difference is key to unlocking its full potential.

• AnimateText Block (The "What")
  • Usage: Use this for 90% of your animation needs. It's simple, direct, and powerful.
  • What it does: It controls WHAT animation is applied to your text (e.g., Fade In, Slide In, Bounce).
  • Benefit: Perfect for standard entrance effects and general-purpose animations. It's the quickest way to get started.
• AnimateTextWithInterpolator Block (The "What" AND "How")
  • Usage: Use this when you want to add a layer of polish and personality to your animations.
  • What it does: It controls WHAT animation is applied AND HOW it behaves over time. The "How" is defined by the interpolatorType.
  • Benefit: An interpolator changes the acceleration of an animation, making it feel more natural and dynamic. For example, a SlideInLeft animation with a Bounce interpolator will slide in and then bounce gently at the end, creating a much more engaging effect than a simple linear slide.

---

Feature Spotlight: The Animation Queue

The animation queue allows you to create a "playlist" of animations that will execute one after another automatically.

• How it Works:
  1. Use the QueueAnimation block to add multiple animations to a list. This does not start them.
  2. Use the ProcessNextQueuedAnimation block to start the first animation in the queue.
  3. When an animation finishes, the next one in the queue will automatically start.
• When to Use It:
  • Creating a complex introduction sequence when a screen opens.
  • Showing a series of messages or instructions without user interaction.
  • Combining different animation styles on the same text element.

---

Animation & Interpolator Cheat Sheet

Animation Types (animationType)

• For Entrance Effects: FadeIn, SlideInLeft/Right/Top/Bottom, Bounce, ScaleIn. These are perfect for making UI elements appear smoothly.
• For Drawing Attention: Pulse, Shake, Glitch, Rainbow, Wave. Use these to highlight an important notification, a button the user needs to press, or a score update.
• For Stylish Text Display: Typewriter (great for dialogue or story text), MarqueeLeft (for long, scrolling headlines).

Interpolator Types (interpolatorType) - The "Feeling"

• Linear: Robotic, constant speed. (Default)
• Decelerate: Starts fast, slows down for a smooth, gentle stop. (Feels calm and professional).
• Accelerate: Starts slow, speeds up. (Feels quick and responsive).
• Bounce: Bounces at the end. (Feels playful and fun).
• Anticipate: Moves back slightly before starting. (Feels like it's "winding up" for action).
• Overshoot: Goes past the end point and settles back. (Feels snappy and dynamic).

---

Best Practices & Pro-Tips

1. Use the AnimationCompleted Event: This is your most powerful tool for logic. The AnimationCompleted event block triggers after a non-repeating animation finishes. Use it to:

• Show a new element immediately after one has finished animating in.
• Enable a button only after a welcome message has finished typing out.
• Chain together a sequence of different actions.

2. Don't Overdo It: Animation is great, but too much can be distracting or slow down your app. Use it purposefully to guide the user's attention and provide feedback, not just for decoration.
3. Adjust Global Speed with AnimationSpeed: If you find all your animations are too slow or too fast, use the AnimationSpeed property. Setting it to 2.0 will make all animations twice as fast, while 0.5 will make them half as fast. This is much easier than changing the duration for every single block.
4. Initialize Once: Make sure you call the Initialize block only once, typically in the Screen.Initialize event. Calling it multiple times can cause errors.

Blocks

Sample block

Certain functions can be achieved using without extension but i was just trying to make them to do with little amount of blocks. I find no problme while compiling, and opening the apk. If any function is not working pls do not fail to mention here, i will try to give a quick fix if it is needed. holidays was over. Let we focus on leaning.

Still_Learning

[Still_Learning]

Version 2 is Released with an wounderful update!

Version 2: com.jsr.textanimator.aix (37.0 KB)

Catch Me Game

Basic Setup

1. Add an Arrangement component to your screen
2. Add the TextAnimator extension
3. Use the CatchGameInitialize block with your Arrangement component

Game Target Options

Text Target

When Button1.Click
    Call TextAnimator.CatchMeText(
        text: "Click Me!",
        fontSize: 16,
        textColor: &HFFFFFFFF  // White
    )

Circle Target

When Button1.Click
    Call TextAnimator.CatchGameByCircle(
        text: "JSR",
        fontSize: 14,
        textColor: &HFFFFFFFF,  // White
        bgColor: &HFF2196F3,   // Blue
        size: 60
    )

Image Target

When Button1.Click
    Call TextAnimator.CatchGameByImage(
        imgPath: "target.png",
        height: 50,
        width: 50,
        isRoundImage: true
    )

Game Control

Starting a Game

When Button1.Click
    Call TextAnimator.CatchGameStart(30)  // 30 seconds
    // Or use 0 for endless mode

Stopping a Game

When Button2.Click
    Call TextAnimator.CatchGameStop()

Setting Difficulty

When Button1.Click
    Call TextAnimator.CatchGameDifficulty(3)  // 1-5 scale

Game Progress Tracking

The GameProgress event provides real-time updates:

When TextAnimator.GameProgress(correctClicks, wrongClicks, duration, successRate, isGameOver)
    Set Label1.Text to "Correct: " + correctClicks
    Set Label2.Text to "Wrong: " + wrongClicks
    Set Label3.Text to "Time: " + duration/1000 + "s"
    Set Label4.Text to "Success Rate: " + successRate + "%"
    
    If isGameOver
        Show message "Game Over!"

Game Mode Examples

Single Click Mode

When TextAnimator.GameProgress(correctClicks, wrongClicks, duration, successRate, isGameOver)
    If correctClicks = 1
        Call TextAnimator.CatchGameStop()

Target Score Mode

When TextAnimator.GameProgress(correctClicks, wrongClicks, duration, successRate, isGameOver)
    If correctClicks >= 10
        Call TextAnimator.CatchGameStop()

Time Challenge Mode

When TextAnimator.GameProgress(correctClicks, wrongClicks, duration, successRate, isGameOver)
    If duration > 30000  // 30 seconds
        Call TextAnimator.CatchGameStop()

Accuracy Challenge Mode

When TextAnimator.GameProgress(correctClicks, wrongClicks, duration, successRate, isGameOver)
    If (correctClicks + wrongClicks) >= 20  // After 20 attempts
        If successRate < 50  // Less than 50% accuracy
            Show message "Try again!"
            Call TextAnimator.CatchGameStop()

Tips and Best Practices

1. Initialize First: Always initialize the game before configuring or starting it
2. GameProgress Event: Use this event to create custom game logic
3. Position Reset: The game target automatically returns to its initial position when the game ends
4. Infinite Animations: Remember to stop infinite animations when changing screens
5. Asset Management: For image targets, ensure your image files are properly uploaded to assets

I believe you will love this once you test it. No internet is Required.

In this video i have used three logics, Image, text and circle with difficulty level 2

Still_Learning