Flutter animations 在鸿蒙上的使用指南

最新推荐文章于 2025-12-21 10:06:02 发布

原创最新推荐文章于 2025-12-21 10:06:02 发布 · 304 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #harmonyos

1. 插件介绍

Flutter animations是一个展示各种Flutter动画技术的示例包，包含基础动画和复杂动画实现。该包为开发者提供了丰富的动画示例代码，帮助快速掌握Flutter动画系统的使用方法。

动画类型分类

基础动画：AnimatedContainer、AnimatedBuilder、Animation Controller、Tweens、Custom Tween等
复杂动画：Hero Animation、AnimatedList、AnimatedPositioned、AnimatedSwitcher、Carousel等
高级动画：物理动画(Spring Physics)、曲线动画(Curved Animation)、重复动画(Repeating Animation)等

2. 包的引入

在引用的项目中，pubspec.yaml中dependencies新增配置：

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

3. API 的调用

3.1 AnimatedContainer - 基础属性动画

AnimatedContainer是最易用的动画组件之一，当属性变化时会自动处理从旧值到新值的过渡动画。

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

class AnimatedContainerDemo extends StatefulWidget {
  const AnimatedContainerDemo({Key? key}) : super(key: key);

  @override
  State<AnimatedContainerDemo> createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  double borderRadius = 0;
  double margin = 0;
  Color color = Colors.deepPurple;

  void change() {
    setState(() {
      color = Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
      borderRadius = Random().nextDouble() * 64;
      margin = Random().nextDouble() * 64;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedContainer')),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              width: 128,
              height: 128,
              child: AnimatedContainer(
                margin: EdgeInsets.all(margin),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(borderRadius),
                ),
                duration: const Duration(milliseconds: 400),
              ),
            ),
            ElevatedButton(
              child: const Text('change'),
              onPressed: () => change(),
            ),
          ],
        ),
      ),
    );
  }
}

3.2 AnimatedBuilder - 高效动画构建

AnimatedBuilder专注于监听动画并在动画值变化时调用builder方法，适合包含部分动画和非动画元素的界面。

import 'package:flutter/material.dart';

class AnimatedBuilderDemo extends StatefulWidget {
  const AnimatedBuilderDemo({Key? key}) : super(key: key);

  @override
  State<AnimatedBuilderDemo> createState() => _AnimatedBuilderDemoState();
}

class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<Color?> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 800));
    animation = ColorTween(begin: Colors.deepPurple, end: Colors.deepOrange).animate(controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedBuilder')),
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            return ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: animation.value,
              ),
              child: child,
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                  default:
                    controller.forward();
                }
              },
            );
          },
          child: const Text('Change Color', style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

3.3 Hero Animation - 跨页面过渡动画

Hero Animation实现不同页面间共享元素的平滑过渡效果。

import 'package:flutter/material.dart';

class HeroAnimationDemo extends StatelessWidget {
  const HeroAnimationDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hero Animation')),
      body: GestureDetector(
        child: Hero(
          tag: 'hero-widget',
          child: Container(
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.grey.shade300,
            ),
            child: const FlutterLogo(),
          ),
        ),
        onTap: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const HeroDetailPage()),
        ),
      ),
    );
  }
}

class HeroDetailPage extends StatelessWidget {
  const HeroDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Hero(
          tag: 'hero-widget',
          child: Container(
            height: 150,
            width: 150,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
            ),
            child: const FlutterLogo(),
          ),
        ),
      ),
    );
  }
}

3.4 AnimatedList - 动态列表动画

AnimatedList提供了列表项添加和移除时的动画效果。

// 导入示例中的AnimatedList实现
import 'package:animations/src/misc/animated_list.dart';

4. 鸿蒙平台适配说明

4.1 入口配置

在鸿蒙项目中，通过EntryAbility.ets初始化Flutter引擎并注册插件：

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

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    GeneratedPluginRegistrant.registerWith(flutterEngine)
  }
}