Flutter 记录学习不一样的动画(一)

一、动画的分类

在flutter中主要分为两类

补间动画 :在补间动画中,定义了开始点和结束点、时间线以及转换时间和速度的曲线。然后由框架计算如何从开始点过度到结束点。

物理动画:在基于物理掉动画中,运动被模拟为与真实世界的行为相似。

二、动画中常见的核心类

a. Animation:用来监听动画的状态 和获取动画变化值。
b. Aniamtable:根据给出的开始值和结束值用来计算动画 真正的值
c. AnimationController:动画控制器,控制动画掉开始、暂停、结束等状态。继承Animation。需要传递一个vsync参数,存在vsync时防止屏幕外动画消耗不必要的资源。
d. Tween:变化值重载器,例如颜色变化值,数值变化值。继承Animatable
e. addListeners和addStatusListeners:前者主要用来监听动画值的变化,后者主要用来监听动画状态掉变化,比如暂停、开始、结束、完成。
f. CurvedAnimation:用于定义非线性曲线动画,比如加速、匀速、加速再减速等等,表示动画的运行方式。继承自Animation,相当于对动画值得包装,通过.value可以直接获得动画的插值后的值。
g.Curve:动画插值器(用来实现动画的值的变化,例如计算出动画的当前值,将它当做x值放入函数计算出y的值)自定义插值器就继承它

三、动画的使用

伪代码

 AnimationController _controller;
 Animation<double> _animation;
  
  @override
  void initState() {
    
    
    super.initState();
    _controller = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    );
    _animation =
        Tween(begin: 0 end: 100).animate(_animation);
    _controller.addListener((){
    
    
 			 setState(() {
    
     });
     }} ;
    _controller.forward();
  }


  @override
  Widget build(BuildContext context) {
    
    
    return  Container(
      width: _animation.value,
      color: Colors.red,
    );
  }

四、总结

这样写的动画,有一个很大的缺点,那就是需要通过setState来根据动画值来不断的刷新页面,
当页面比较复杂掉时候,搞不好的话就会导致性能问题,所以就需要把他抽出来。这就是后面要讲到的两个官方封装好的动画类,就是AnimatedWidget和AnimatedBuilder。

猜你喜欢

转载自blog.csdn.net/hjjdehao/article/details/125833334