App复杂动画实现——Rive保姆级教程 | 京东云技术团队

这篇具有很好参考价值的文章主要介绍了App复杂动画实现——Rive保姆级教程 | 京东云技术团队。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:京东物流 沈明亮

在App开发过程中,如果想实现动画效果,可以粗略分为两种方式。一种是直接用代码编写,像平移、旋转等简单的动画效果,都可以这么干,如果稍微复杂点,就会对开发工程师的数学功底、图形图像学功底有很高的要求。

另一种方式,可以让UI同学配合,一次性出多张图片或者直接出一张GIF图,通过短时间内快速轮播图片的方式来实现复杂动画效果,这种方式真正实现起来还是有挺多问题的,比如缺少对动画过程的控制、图片尺寸的适配等等。那么,有没有更好的解决方案呢?

有的,Rive。

简介

Rive是专门为简化动画的实现而生的,设计师可以在其官网通过拖拉拽实现各种复杂动画效果,设计完毕后导出动画文件,工程师可以在App里直接导入此文件,配合相应的SDK即可实现。

其官网有详细的开发文档,同时也有自己的社区资源,我们可以直接从社区里下载别人设计好的动画效果进行学习。另外特别重要的是,Rive支持跨平台,同时支持Android、iOS、Flutter、JS、React、C++等等,本文以Flutter的实现为例介绍。

一个完整的例子

  1. 登陆Rive官网进行设计,并导出相应的动画文件,Rive的动画文件是以.riv结尾。

本文示例是从官网的社区里找的一个个人比较喜欢的动效。

  1. 依次运行下面的命令,引入rive sdk。

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

  1. 将导出的.riv文件放到资源目录下,并修改pubspec.yaml文件。

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

  1. 加载动画文件并展示的核心代码:

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

核心代码就这么多,对于代码中的标注详细说明下:

  • 标注1的地方,主要作用是获取状态机控制器,fromArtboard 方法有两个参数,第二个参数是状态机的名称,这个名称需要和UI同学协商好,一旦确定好名称就不允许设计同学再改了,对应于设计面板界面的左下角,如下图:

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

  • 标注2的地方,本例的动画是根据“数值”的变化而变化的,findInput的入参同样需要和UI同学协商好,一旦设计时把这个名字改了,代码里也别忘了进行相应的修改,也在设计面板的左下角,在状态机名称的右边,如下图:

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

完整的代码如下,大家可以按步骤自己操作体验下。

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

  @override
  State<RiveDemo> createState() => _RiveDemoState();
}

class _RiveDemoState extends State<RiveDemo> {
  /// 状态机控制器
  StateMachineController? controller;
  /// 控制输入数值
  SMIInput<double>? valueController;
  ///画板,配合Rive widget 使用,展示动画效果。
  Artboard? riveArtboard;
  Timer? timer;

  @override
  void initState() {
    super.initState();
    //加载
    rootBundle.load('asset/rives/rive_demo.riv').then((value) async {
      final file = RiveFile.import(value);
      final artboard = file.mainArtboard;
      //1
      controller = StateMachineController.fromArtboard(artboard, 'TreeMachine');
      if (controller != null) {
        setState(() {
          artboard.addController(controller!);
          //2
          valueController = controller!.findInput('input');
          valueController!.value = -4;
        });
      }

      riveArtboard = artboard;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rive Demo'),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: riveArtboard == null ? const CircularProgressIndicator() : Rive(artboard: riveArtboard!),
      ),
      floatingActionButton: SizedBox(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: () {
                startAnimation();
              },
              child: const Text('start'),
            ),
            TextButton(
              onPressed: () {
                stopAnimation();
              },
              child: const Text('stop'),
            ),
            TextButton(
              onPressed: () {
                resetAnimation();
              },
              child: const Text('reset'),
            ),
          ],
        ),
      ),
    );
  }

  /// 开始动画
  void startAnimation() {
    if (timer != null) {
      return;
    }
    timer = Timer.periodic(const Duration(milliseconds: 60), (timer) {
      valueController?.value += 0.5;
    });
  }

  /// 停止动画
  void stopAnimation() {
    timer?.cancel();
    timer = null;
  }

  /// 重置动画
  void resetAnimation() {
    stopAnimation();
    valueController?.value = 0;
  }
}

总结

像本例中的动画效果,如果用代码来编写,时间成本会很大很大,如果靠图片的堆积,实现起来也很麻烦,而且由于图片的数量增多,安装包的体积也会增加很多。但是用rive,实现起来却很方便,可能唯一的成本就是设计师同学的学习成本。

Rive不仅支持本地动画文件的加载,还可以将动画文件放到服务器上,利用RiveAnimation.network方法进行加载。更多的使用示例可以参考:
https://github.com/rive-app/rive-flutter/tree/master/example文章来源地址https://www.toymoban.com/news/detail-426133.html

到了这里,关于App复杂动画实现——Rive保姆级教程 | 京东云技术团队的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity中使用Mixamo为3D模型添加动画(保姆级教程)

    最近在做为Unity的3D人物添加动画,浅浅记录一下操作方法。 打开Unity Hub,点击New Project,然后按照下图步骤操作: 打开项目——GameObject——3D Object——Plane,这一步非必要,如果已有3D场景,可忽略这一步。 点此打开Mixamo 打开Mixamo后进入如下界面,这里有一些3D角色和动画可

    2024年02月07日
    浏览(56)
  • vue2+vant 简易实现京东app商城(附源码)

    利用 vue2 + vant 模仿京东app商城,实现 首页 、 商品分类页面 、 购物车 、 简易商品详情页 、 登录页 。 ①、创建vue2项目 mobile ②、安装路由模块,vant组件 ①、在 src 目录下创建 views 文件夹,存放页面组件 views 结构如图 ②、在 src 目录下创建 router 文件夹,新建 index.js 文件

    2024年02月11日
    浏览(32)
  • uniapp - 微信小程序端引入 Echarts 图表及使用详细教程,简单快速的解决方案(拒绝复杂的过程,附带详细的使用示例保姆级教程)

    现在各种平台的文章都太乱了,基本上实测无效。。。 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定。 下面是最后的运行结果,随便用的一个图表进行展示,图表更多用法详见文档!

    2024年02月10日
    浏览(48)
  • UNI-APP安卓本地打包详细教程(保姆级)

    uni-app 官方文档地址   原生开发者支持 1、Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区 2、最新版的HBuilderX 3、App离线SDK下载:最新android平台SDK下载 4、3.1.10版本起需要申请Appkey, 申请请参考 点击进入 Android Studio官网 或者 Android Studio中文社区 点击 Downl

    2024年04月23日
    浏览(68)
  • 记录--UNI-APP安卓本地打包详细教程(保姆级)

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 uni-app 官方文档地址 原生开发者支持 1、Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区 2、最新版的HBuilderX 3、App离线SDK下载:最新android平台SDK下载 4、3.1.10版本起需要申请Appkey,申请请参考

    2023年04月09日
    浏览(75)
  • 一种实现Spring动态数据源切换的方法 | 京东云技术团队

    不在现有查询代码逻辑上做任何改动,实现dao维度的数据源切换(即表维度) 节约bdp的集群资源。接入新的宽表时,通常uat验证后就会停止集群释放资源,在对应的查询服务器uat环境时需要查询的是生产库的表数据(uat库表因为bdp实时任务停止,没有数据落入),只进行服务

    2024年02月10日
    浏览(56)
  • 最新抖音Clickid和拼多多/京东/小程序-APP内下单转化回传对接程序实现-规避淘宝回传各种限制!

    在最近几个月时间里,抖音Clickid回传淘宝APP内下单的两种技术方案①淘宝联盟方案CID+RID技术方案;②淘宝小程序方案CID+小程序跳转。被淘宝官方日益严厉打压的情况下,具体表现为:联盟账号被限流更甚者封联盟账号,或上架的跳转小程序被警告及被下架,新上架的跳转小

    2024年02月12日
    浏览(37)
  • Deferred Components-实现Flutter运行时动态下发Dart代码 | 京东云技术团队

    Deferred Components,官方实现的Flutter代码动态下发的方案。本文主要介绍官方方案的实现细节,探索在国内环境下使用Deferred Components,并且实现了最小验证demo。读罢本文,你就可以实现Dart文件级别代码的动态下发。 Deferred Components是Flutter2.2推出的功能,依赖于Dart2.13新增的对

    2024年02月06日
    浏览(36)
  • h2database BTree 设计实现与查询优化思考 | 京东云技术团队

    h2database 是使用Java 编写的开源数据库,兼容ANSI-SQL89。既实现了常规基于 BTree 的存储引擎,又支持日志结构存储引擎。功能非常丰富(死锁检测机制、事务特性、MVCC、运维工具等),数据库学习非常好的案例。 本文理论结合实践,通过BTree 索引的设计和实现,更好的理解数

    2024年02月11日
    浏览(79)
  • SpringBoot整合第三方技术 -- SpringBoot快速入门保姆级教程(三)

    为了巩固所学的知识,作者尝试着开始发布一些学习笔记类的博客,方便日后回顾。当然,如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚,文章中如果有记录错误,欢迎读者朋友们批评指正。 (博客的参考源码可以在我主页的资源里找到,如果在学习的

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包