flutter如何实现svg动画播放

在Flutter中如何实现SVG动画的播放？我尝试使用flutter_svg插件加载静态SVG文件，但不知道怎样让它动起来。是否有支持SVG动画的库或方法？比如实现路径动画、填充动画等效果。需要注意哪些性能问题？求具体实现方案或示例代码。

2 回复

使用Flutter实现SVG动画播放，可通过flutter_svg库加载SVG，再结合动画控制器（AnimationController）控制属性变化，如颜色、路径或变换，实现动态效果。

更多关于flutter如何实现svg动画播放的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现SVG动画播放，可以使用 flutter_svg 库结合动画控制器。以下是具体步骤和示例代码：

步骤：

  1. 添加依赖：在 pubspec.yaml 中添加 flutter_svg 库。
  2. 导入SVG文件：将SVG文件放到 assets 文件夹，并在 pubspec.yaml 中声明。
  3. 使用动画控制器：通过 AnimationController 控制动画播放。

示例代码：

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

class SvgAnimationScreen extends StatefulWidget {
  @override
  _SvgAnimationScreenState createState() => _SvgAnimationScreenState();
}

class _SvgAnimationScreenState extends State<SvgAnimationScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(); // 循环播放
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * 3.14159, // 旋转动画示例
              child: SvgPicture.asset(
                'assets/your_icon.svg',
                width: 100,
                height: 100,
              ),
            );
          },
        ),
      ),
    );
  }
}

说明：

  • 动画类型：示例为旋转动画，可通过 Transform 实现缩放、平移等效果。
  • 控制播放：使用 _controller.repeat() 循环播放，或用 _controller.forward() 播放一次。
  • 性能优化：对复杂SVG建议优化路径或使用 flutter_svg 的缓存功能。

如需更复杂动画（如路径变形），可结合 flutter_svg 的 DrawableRoot 与自定义绘制。

回到顶部