Pacote de Animações para Desenvolvimento Cross-Platform

O repositório flutter_animations oferece implementações práticas de efeitos visuais para aplicações Flutter, com suporte específico ao ecossistema OpenHarmony. Esta biblioteca demonstra técnicas desde transições elementares até comportamentos complexos de física simulada.

Configuração do Ambiente

Adicione a dependência ao pubspec.yaml utilizando o repositório OpenHarmony:

dependencies:
  flutter_animations:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/flutter_samples/animations"

Exemplos Práticos de Animação

Transições de Propriedades com AnimatedContainer

Este componente automatiza transições quando valores numéricos ou cores são modificados:

import 'package:flutter/material.dart';
import 'dart:math';

class TransicaoElementar extends StatefulWidget {
  const TransicaoElementar({super.key});

  @override
  State<TransicaoElementar> createState() => _EstadoTransicao();
}

class _EstadoTransicao extends State<TransicaoElementar> {
  double raioBorda = 0;
  double margemExterna = 0;
  Color corFundo = Colors.deepPurple;

  void atualizarElemento() {
    setState(() {
      corFundo = Color.fromRGBO(
        Random().nextInt(256),
        Random().nextInt(256),
        Random().nextInt(256),
        1.0
      );
      raioBorda = Random().nextDouble() * 100;
      margemExterna = Random().nextDouble() * 80;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Transição Automática')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 150,
              height: 150,
              child: AnimatedContainer(
                margin: EdgeInsets.all(margemExterna),
                decoration: BoxDecoration(
                  color: corFundo,
                  borderRadius: BorderRadius.circular(raioBorda),
                ),
                duration: const Duration(milliseconds: 500),
              ),
            ),
            ElevatedButton(
              onPressed: atualizarElemento,
              child: const Text('Reconfigurar'),
            ),
          ],
        ),
      ),
    );
  }
}

Controle Preciso com AnimatedBuilder

Para animações personalizadas com controle temporal detalhado:

import 'package:flutter/material.dart';

class ConstrutorAnimado extends StatefulWidget {
  const ConstrutorAnimado({super.key});

  @override
  State<ConstrutorAnimado> createState() => _EstadoConstrutor();
}

class _EstadoConstrutor extends State<ConstrutorAnimado> 
    with TickerProviderStateMixin {
  late AnimationController controlador;
  late Animation<Color?> animacaoCores;

  @override
  void initState() {
    super.initState();
    controlador = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    animacaoCores = ColorTween(
      begin: Colors.blue,
      end: Colors.green
    ).animate(controlador);
  }

  @override
  void dispose() {
    controlador.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Controle Temporal')),
      body: Center(
        child: AnimatedBuilder(
          animation: animacaoCores,
          builder: (context, childWidget) {
            return ElevatedButton(
              style: ButtonStyle(
                backgroundColor: 
                  MaterialStateProperty.all(animacaoCores.value),
              ),
              onPressed: () => 
                controlador.isCompleted 
                  ? controlador.reverse() 
                  : controlador.forward(),
              child: childWidget,
            );
          },
          child: const Text('Alternar Estado', 
            style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

Transições entre Telas com Hero

Animação fluida para elementos compartilhados entre rotas:

import 'package:flutter/material.dart';

class TelaInicial extends StatelessWidget {
  const TelaInicial({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Transição Hero')),
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => const TelaDetalhe()),
          ),
          child: Hero(
            tag: 'elemento_compartilhado',
            child: Container(
              width: 60,
              height: 60,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.grey,
              ),
              child: const Icon(Icons.star, color: Colors.amber),
            ),
          ),
        ),
      ),
    );
  }
}

class TelaDetalhe extends StatelessWidget {
  const TelaDetalhe({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'elemento_compartilhado',
          child: Container(
            width: 200,
            height: 200,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
            ),
            child: const Icon(Icons.star, size: 100, color: Colors.amber),
          ),
        ),
      ),
    );
  }
}

Integração com OpenHarmony

Configure o ponto de entrada na classe principal:

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GerenciadorPlugins } from '../plugins/GerenciadorPlugins';

export default class MainAbility extends FlutterAbility {
  configureFlutterEngine(engine: FlutterEngine) {
    super.configureFlutterEngine(engine);
    GerenciadorPlugins.registrar(engine);
  }
}

Otimizações para Plataforma

• Execute operações intensivas em isolates separados para não bloquear a thread principal
• Utilize RepaintBoundary para limitar áreas de renderização em animações complexas
• Implemente descarte automático de controladores de animação com dispose()
• Teste performance com flutter build profile para identificar gargalos