【google教程】flutter隐式动画学习笔记

本文是google教程的学习笔记,视频在文章下方。

我们知道动画分为显示动画和隐式动画,隐式动画类型有以下几种

动画效果
动画效果
隐式动画类型

隐式动画默认是一个线性样式

线性变化
code4flutter注: 当新旧值变化时,其属性就在新旧值直接发生变化

代码如下

AnimateContainer{
    decoration:BoxDecoration(
      gradient:RadialGradient(
        colors:[Colors.purple, Colors.transprent],
        stops:[_biggers ? 0.2:0.5,1.0]
    ),
  )
}

诸如动​​画容器之类的小部件有两个,可用于控制的属性,您可以控制动画行为的方式,插值到新代码需要很长时间,通过设置duration属性的值来改变动画时长。

# 通过duration控制时长
AnimateContainer(
    width:_bigger?100:500
    child: Image.asset('assets/star.png')
    duration:Duration(seconds:5),
)

通过curve 控制曲线变化率,可以帮助您的动画更逼真。

# 通过curve控制动画类型,从默认线性曲线到三次曲线
AnimateContainer(
    width:_bigger?100:500
    child: Image.asset('assets/star.png')
    curve:Curves.easeInOutQuint
)
动画类型

几种线性变化的动画 https://api.flutter.dev/flutter/animation/Curves-class.html

下面演示两种动画效果

添加动画不会增加很多复杂性,不一定要放置这些动画小部件,进入statfulwiget设置state也可以通过streambuilder和featurebuilder触发

发表评论

电子邮件地址不会被公开。 必填项已用*标注