美文网首页flutterFlutter
Flutter 动画效果

Flutter 动画效果

作者: iwakevin | 来源:发表于2018-12-13 13:39 被阅读84次

在动画方面 Flutter 提供了 Animation 类提供使用。

动画

Flutter 中创建动画,请创建名为 controller 的 AnimationController 对象并指定持续时间。并且让 AnimationController 在给定的持续时间内线性生成范围从 0.0 到 1.0 的值。

class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
    Animation animation;
    AnimationController controller;

    initState() {
        super.initState();
        // 创建一个动画控制器
        this.controller = AnimationController(
            duration: const Duration(milliseconds: 3000),
            vsync: this
        );

        final CurvedAnimation curve = CurvedAnimation(
            parent: controller,
            curve: Curves.easeIn
        );

        // 变化的值
        animation = Tween(begin: 0.0, end: 1.0).animate(curve);
        controller.forward();
    }

    Widget build(BuildContext context) {
        return FadeTransition(          // 创建一个过渡的动画
            opacity: animation,         // 这是动画变化值
            child: Container(
                height: 300.0,
                width: 300.0,
                child: FlutterLogo(),
            ),
        );
    }

    dispose() {
        controller.dispose();
        super.dispose();
    }
}

Lottie 动画

在 Flutter 有一个第三方的插件:fluttie,它可以让你很简单的显示一些动画加载效果。并且动画效果可以在 lottiefiles里找得到。

先安装依赖:

dependencies:
  flutter_downloader: ^0.0.7

注意事项:

  • 还没有 iOS 的支持。
  • 由于 dart 代码和本机之间的延迟,控制多个动画可能有点滞后。渲染多个动画会降低应用的帧速率。
  • 动画小部件现在需要固定大小。
  • 不要重复使用动画,因为这可能会导致您的应用崩溃。相反,保存输出 loadAnimationFromAsset() 并在需要时构造新动画。

简单使用,首先在 lottiefiles 里下载一个动画的 json 文件,并添加到 assets 里。

import 'package:fluttie/fluttie.dart';

var eAnimation;

void main() async {
    // 先加载组件
    var instance = new Fluttie();
    var eComposition = await instance.loadAnimationFromAsset(
        'lib/animatd/print.json',
    );
    eAnimation = await instance.prepareAnimation(eComposition);

    // 加载完成后再启动应用
    runApp(new MyApp());
}

body: new Column(
    children: <Widget>[
        new FluttieAnimation(eAnimation),
    ],
),

相关文章

  • flutter常用控件用法收藏

    flutter圆角效果实现 outlineButton 头部折叠动画效果 flutter按钮shape设置 Flu...

  • Flutter动画相关

    Flutter 动画曲线Curves 效果一览

  • 深入理解Flutter动画原理

    基于Flutter 1.5,从源码视角来深入剖析flutter动画原理,相关源码目录见文末附录 一、概述 动画效果...

  • Flutter 动画效果

    在动画方面 Flutter 提供了 Animation 类提供使用。 动画 Flutter 中创建动画,请创建名为...

  • Flutter轮播图

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中...

  • Flutter 基础动画 Hero动画 交错动画

    Flutter动画学习效果直接贴代码 运行看吧,更改push入口查看不同动画效果。基础动画:颜色渐变、控件大小更改...

  • Flutter EasyLoading - 让全局Toast/L

    ✨flutter_easyloading: 一个简单易用的Flutter插件,包含23种loading动画效果、进...

  • flutter动画

    动画 效果图: flutter中,动画可以当成一个时间内对应值的变化刷新Widget来达到动画的效果类似Andro...

  • 【Flutter 实战】酷炫的开关动画效果

    此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。更多动画效果及Flutte...

  • FadeTransition

    Flutter有一的动画引擎很强大, 可以为应用添加任何的效果个动画,但是有些时候,有些效果和动画并不需要那么炫酷...

网友评论

    本文标题:Flutter 动画效果

    本文链接:https://www.haomeiwen.com/subject/hwgvhqtx.html