Flare动画

Flare制作部分

在https://www.2dimensions.com 上创建自己的flare，拖动调整关键帧，形成动画。
菱形代表关键帧。
动画制作成功后，左下侧面板Untitled，改成自定义的动画名称比如anime。

export动画，选择Binary，打开Duration from Last KeyFrame。
下载生成的flr文件。

Flutter代码部分

在根目录下创建flrs文件夹，作为flr动画的存放路径

1
2
3

flare_flutter: ^1.5.3
  assets:
    - flrs/

import 'package:flare_flutter/flare_actor.dart';
class _FlareTestPageState extends State<FlareTestPage> {
  //默认的动画名，不存在
  String _currentAnimation = 'default';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: 'Flare动画'),
      body: Center(
        child: GestureDetector(
          onTap: (){
            //点击切换至anime动画（制作时重命名的），开始播放
            if(_currentAnimation == 'default'){
              setState(() {
                _currentAnimation = 'anime';
              });
            }
          },
          child: FlareActor(
            'flrs/my_anime.flr',
            alignment: Alignment.center,
            fit: BoxFit.contain,
            animation: _currentAnimation,
            callback: (action){
              //播放完成后，重置为idel默认动画。
              if(action == 'anime'){
                setState(() {
                  _currentAnimation = 'default';
                });
              }
            },
          ),
        ),
      ),
    );
  }
}

Flare制作部分

Flutter代码部分

Tags