Animation Controller in Flitter

The Animation Controller is the core class for managing animations in Flitter. It provides precise control over animation timing, direction, and state, allowing you to create smooth and interactive animations.

Core Concepts

1. Animation Value: A double ranging from 0.0 to 1.0
2. Duration: The length of time for the animation to complete
3. Direction: Forward or reverse animation playback
4. State: Animation status (dismissed, forward, reverse, completed)

Basic Usage

Creating a simple animation controller:

import { AnimationController } from "@meursyphus/flitter";

const controller = new AnimationController({
  duration: 1000, // milliseconds
});

// Start the animation
controller.forward();

Animation States

Controlling Animation State

const controller = new AnimationController({ duration: 1000 });

// Forward animation
controller.forward();

// Reverse animation
controller.reverse();

// Stop animation
controller.stop();

// Reset to initial state
controller.reset();

Checking Animation Status

controller.addListener(() => {
  console.log({
    value: controller.value,
    isAnimating: controller.isAnimating,
    isDismissed: controller.isDismissed,
    isCompleted: controller.isCompleted,
  });
});

Advanced Features

Curved Animations

Using CurvedAnimation for non-linear animation:

import {
  AnimationController,
  CurvedAnimation,
  Curves,
} from "@meursyphus/flitter";

const controller = new AnimationController({
  duration: 1000,
});

const animation = new CurvedAnimation({
  parent: controller,
  curve: Curves.easeInOut,
});

// Use animation.value instead of controller.value

Repeating Animations

Creating looping animations:

controller.repeat({
  reverse: true, // Optional: ping-pong animation
});

Custom Starting Points

Starting animation from specific points:

controller.forward({ from: 0.5 }); // Start from middle
controller.reverse({ from: 1.0 }); // Start from end

Animation Patterns

Fading Widget

function FadingWidget({ child }) {
  const [controller] = useState(
    () => new AnimationController({ duration: 300 }),
  );

  return Container({
    opacity: controller.value,
    child,
  });
}

Size Animation

function ExpandingWidget({ child }) {
  const [controller] = useState(
    () => new AnimationController({ duration: 500 }),
  );

  const size = new Tween({
    begin: 100,
    end: 200,
  }).evaluate(controller);

  return Container({
    width: size,
    height: size,
    child,
  });
}

Combined Animations

function ComplexAnimation({ child }) {
  const [controller] = useState(
    () => new AnimationController({ duration: 1000 }),
  );

  const scaleAnimation = new CurvedAnimation({
    parent: controller,
    curve: Curves.easeOut,
  });

  const fadeAnimation = new CurvedAnimation({
    parent: controller,
    curve: Curves.linear,
  });

  return Container({
    scale: 1 + scaleAnimation.value,
    opacity: fadeAnimation.value,
    child,
  });
}

Best Practices

1. Resource Management:

   class AnimatedWidget extends StatefulWidget {
     dispose() {
       controller.dispose(); // Clean up when done
       super.dispose();
     }
   }
   

2. Performance Optimization:

   • Reuse animation controllers when possible
   • Dispose controllers when no longer needed
   • Use appropriate curves for smooth animations

3. State Management:

   • Keep animation logic separate from UI logic
   • Use state management for complex animations
   • Handle animation completion appropriately

4. Error Handling:

   • Check animation state before operations
   • Handle animation interruptions gracefully
   • Provide fallback states for animation failures

Common Patterns

Staggered Animations

function StaggeredAnimation() {
  const [controller1] = useState(
    () => new AnimationController({ duration: 500 }),
  );
  const [controller2] = useState(
    () => new AnimationController({ duration: 500 }),
  );

  controller1.addListener(() => {
    if (controller1.isCompleted) {
      controller2.forward();
    }
  });

  return Stack({
    children: [
      Container({ opacity: controller1.value }),
      Container({ opacity: controller2.value }),
    ],
  });
}

Interactive Animations

function InteractiveAnimation() {
  const [controller] = useState(
    () => new AnimationController({ duration: 300 }),
  );

  return GestureDetector({
    onPointerDown: () => controller.forward(),
    onPointerUp: () => controller.reverse(),
    child: Container({
      scale: 1 + controller.value * 0.2,
    }),
  });
}

Conclusion

The Animation Controller is a powerful tool for creating sophisticated animations in Flitter. By understanding its capabilities and following best practices, you can create smooth, performant, and engaging animations that enhance your user interface. Remember to manage resources properly, optimize performance, and consider the user experience when implementing animations.