Flutter Flare 动画无法正常工作

Posted

技术标签:

【中文标题】Flutter Flare 动画无法正常工作【英文标题】:Flutter Flare animation not working properly 【发布时间】:2019-07-29 03:49:01 【问题描述】:

我正在尝试让 Flare 动画在 Flutter 中工作。 为此,我尝试了这个: https://github.com/tarek360/Boring-Star-Animation

实际上,该代码工作非常好。 但是,我想将动画更改为: https://www.2dimensions.com/a/innocent/files/flare/status_success

现在,代码运行并显示动画,但仍然存在。 (即没有动画,只显示照片) 我得到以下错误:

E/flutter ( 7462): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method '*' was called on null.
E/flutter ( 7462): Receiver: null
E/flutter ( 7462): Tried calling: *(0.0)
E/flutter ( 7462): #0      Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
E/flutter ( 7462): #1      KeyFrameStrokeEnd.setValue (package:flare_dart/animation/keyframe.dart:1161:33)
E/flutter ( 7462): #2      KeyFrameNumeric.apply (package:flare_dart/animation/keyframe.dart:138:5)
E/flutter ( 7462): #3      PropertyAnimation.apply (package:flare_dart/animation/actor_animation.dart:199:21)
E/flutter ( 7462): #4      ComponentAnimation.apply (package:flare_dart/animation/actor_animation.dart:248:27)
E/flutter ( 7462): #5      ActorAnimation.apply (package:flare_dart/animation/actor_animation.dart:403:26)
E/flutter ( 7462): #6      FlareActorRenderObject._updateAnimation (package:flare_flutter/flare_actor.dart:468:19)
E/flutter ( 7462): #7      FlareActorRenderObject.filename=.<anonymous closure> (package:flare_flutter/flare_actor.dart:245:11)
E/flutter ( 7462): #8      _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter ( 7462): #9      _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter ( 7462): #10     _FutureListener.handleValue (dart:async/future_impl.dart:126:18)
E/flutter ( 7462): #11     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:639:45)
E/flutter ( 7462): #12     Future._propagateToListeners (dart:async/future_impl.dart:668:32)
E/flutter ( 7462): #13     Future._complete (dart:async/future_impl.dart:473:7)
E/flutter ( 7462): #14     _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
E/flutter ( 7462): #15     _AsyncAwaitCompleter.complete.<anonymous closure> (dart:async/runtime/libasync_patch.dart:33:20)
E/flutter ( 7462): #16     _rootRun (dart:async/zone.dart:1120:38)
E/flutter ( 7462): #17     _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter ( 7462): #18     _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter ( 7462): #19     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter ( 7462): #20     _rootRun (dart:async/zone.dart:1124:13)
E/flutter ( 7462): #21     _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter ( 7462): #22     _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter ( 7462): #23     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter ( 7462): #24     _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
E/flutter ( 7462): #25     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
E/flutter ( 7462): 

我非常确定我没有打错文件名和动画名称。

下面是我的 main.dart 文件:

import 'package:flutter/material.dart';
import "package:flare_flutter/flare_actor.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'The Boring Star',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return new FlareActor("animations/status_success.flr",
        alignment: Alignment.center,
        fit: BoxFit.contain,
        animation: "success_arrow");
  

-----编辑------ 我不知道为什么,但是下面的动画效果很好 https://www.2dimensions.com/a/pollux/files/flare/smiley-switch

因此,得出的结论是我的动画存在一些问题: https://www.2dimensions.com/a/innocent/files/flare/status_success

谁能帮我解决这个问题?

【问题讨论】:

你现在有最新版本的flare_flutter吗^1.3.0我遇到了问题 是的,我用的是最新的flare_flutter 1.3.0,你是怎么解决的? 我有一个 NoSuchMethodError 并且可以通过更新版本来修复它,但如果你已经有这个可能是另一个问题 @FoxyError --- 2dimensions.com/a/pollux/files/flare/smiley-switch --- 正在工作。所以,只有我的动画有一些问题.. :( 你是不是也是这样导出的 【参考方案1】:

动画的名字不是success_arrow,只是success

FlareActor("animations/status_success.flr",
        alignment: Alignment.center,
        fit: BoxFit.contain,
        animation: "success");

【讨论】:

【参考方案2】:

将动画的名称更改为与您的 Web 项目中的动画相同的名称。

【讨论】:

【参考方案3】:

如果动画名称未更改,则animation: 将是"Untitled"

【讨论】:

以上是关于Flutter Flare 动画无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 动画,Flare VS GIF

Flutter(Flare) 最有趣用户交互动画没有之一

Flutter 专题51 图解动画小插曲之 Flare 动画 #yyds干货盘点#

Flare Flutter 动画问题

Flare Flutter 动画

Flutter 动画无法正常工作