精选文章 Flutter Animation动画开发之——Curve动画曲线

Flutter Animation动画开发之——Curve动画曲线

作者:野猿新一 时间: 2019-11-05 03:44:48
野猿新一 2019-11-05 03:44:48

简介

Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程

今天我们在该动画的基础上添加动画曲线,默认情况下动画是线性的,可以理解为变化是匀速的,设置动画曲线可以设置动画的变化速率,可以是加速的,也可以是减速的,或者是先加速后减速的,等等

动画曲线用的是CurvedAnimation类,用法如下,

  • parent参数传入一个Animation对象,比如AnimationController
  • curve传入传入的就是动画曲线的具体实现,Curves类中已经帮我们默认实现了很多常用的动画曲线,比如减速运动Curves.decelerate
CurvedAnimation animation=CurvedAnimation(parent: controller, curve: Curves.linear);

 下面表格列出一些常见的曲线,其他还有许多预定义的曲线,可以自行去了解

Curves曲线动画过程
linear匀速的
decelerate匀减速
ease开始加速,后面减速
easeIn开始慢,后面快
easeOut开始快,后面慢
easeInOut开始慢,然后加速,最后再减速

示例

下面贴出一个完整的domo,演示一个绿色方块宽高从100变化成500的动画过程,变化的曲线为easeInOut,也就是先加速后减速的过程

class AnimationRoute extends StatefulWidget {
  @override
  AnimationRouteState createState() => AnimationRouteState();
}

class AnimationRouteState extends State with SingleTickerProviderStateMixin {

  Animation animation;
  AnimationController controller;

  initState() {
    super.initState();
    // Controller设置动画时长
    // vsync设置一个TickerProvider,当前State 混合了SingleTickerProviderStateMixin就是一个TickerProvider
    controller = AnimationController(
        duration: Duration(seconds: 5),
        vsync: this //
    );
    // 设置动画曲线,开始快慢,先加速后减速
    animation=CurvedAnimation(parent: controller, curve: Curves.easeInOut);
    // Tween设置动画的区间值,animate()方法传入一个Animation,AnimationController继承Animation
    animation = new Tween(begin: 100.0, end: 500.0).animate(animation)
      // addListener监听动画每一帧的回调,这个调用setState()刷新UI
      ..addListener(() {
        setState(()=>{});
      });
    //启动动画(正向执行)
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      // 这里显示一个方形区域,随着动画执行不断变大
      child: Container(
        color: Colors.green,
        width: animation.value,
        height: animation.value,
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    controller.dispose();
    super.dispose();
  }
}


自定义Curve

除了用预定义的Curve外,我们还可以自定义自己的Curve曲线,原理很简单,只需实现Curve,然后实现里面的gransformInternal方法,自己做一些变换

例如以下是最简单的Curve实现,未做任何变换,将t直接返回,这就是线性动画

class _Linear extends Curve {
  const _Linear._();

  @override
  double transformInternal(double t) => t;
}

 

 

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:亚马逊积极备战光棍节,工会拆台忙不停

下一篇:随机数srand()和sleep函数的结合使用

您可能感兴趣

  • css3之animation动画详解

    作者:老姚,《JS正则迷你书》的作者 https://juejin.im/post/5cdd178ee51d456e811d279b 今年我面试了很多同学,只要看到简历上写“熟练掌握CSS3”的,我都会问问动画相关知识。然而我发现:都 2019 年了,还有很多同学不会 CSS 动画。 我经常爱问的一个问题是,实现如下的效果: 即,一个小球从向右匀速移动 200px,然后移动回来,再移动过去,...

  • 【FinalIK】Full Body Biped IK

    Full Body Biped IK 解析: Final IK includes an extremely flexible and powerful high speed lightweight FBIK solver for biped characters. Final IK 是一个基于双足行走人物的非常强大并灵活,高效率的FBIK (FullBodyIK:全身反向动力学系统) Ful...

  • 前端知识点整理收集(不定时更新~)二

    目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支到本地 SEO优化 优化策略 SEO实战 TDK优化 页面内容优化 使用html5结构 唯一的H1...

  • 2017前端面试题总结

    1:为何选择前端这个方向和对前端的理解 为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。 理解: 首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户可以看到...

  • 【Unity 3D】学习笔记 - 粒子系统初探

    Particle System是Unity内用于制作特效的系统,相对比较复杂。粒子系统可以用来制作烟雾、蒸汽、火焰和其他雾化效果。 添加粒子系统 [GameObject -> Effect -> Particle System]添加一个粒子系统,重命名为test。 test初始显示效果如下: 查看Inspector视窗,test中的组件有Transform和Particle System。其...

  • CSS3动画:动画(animation)、过渡(transtion)、变形(transform)

    制作动画有两种方法:1、animation+@keyframes,2、通过transition animation+@keyframes 先看一个列子: @keyframes moveX { 50% { transform: translateX(200px); } 100% { background-color: rgb(92, 19, 228); } } ...

  • 前端深入之css篇丨2020年前,彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多 程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提...

  • Flutter 中文文档:动画效果介绍

    以轻松实现各种动画类型。许多 widgets 尤其是 Material widgets,在其设计规范定义中都自带标准动画效果,不过也支持定制效果。 通过下面的资源可以很好的学习 Flutter 动画框架。这些文档循序渐进地讲解如何编写动画代码。 阐释了 Flutter 动画包中的基本类(控制器,动画,曲线,监听器,构建器),这些可以帮助您使用不同的动画 APIs 完成补间动画。 使用 Flu...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。