用户登录

动画里需要的这个范围值也可以使用 Tween 来设置 .. Tween 就是 in between 的简写形式 ... 指的就是两个值之间 .. 用一下 Tween 来创建动画需要的范围值 .. 里面先添加一个 begin 设置一下开始的值 .. 32.0 ... 再用一个 end .. 设置一下结束的值 .. 100.0 ..

要在动画里使用这个 Tween 我们可以接着用一个 animate 方法,它会返回一个 Animation .. 需要给它提供一个 Parent .. 这里这个 Parent 就是之前创建的这个 AnimationController .. 名字是 animationDemoController ..

在类里面添加一个 Animation .. 名字是 animation .. 然后设置一下 animation 的值,让它等于用了 animate 这个方法返回的 Animation ..

这样在使用动画里的值的时候 .. 现在我们可以用一下 animation 里的 value ..

现在可以注释掉在 animationDemoController 里设置的这些值 ..

执行一下 hot restart ..

到模拟器上再试一下 .. 按一下这个心形小图标 .. 会运行动画 .. 结束以后再按一下它 .. 会倒着运行这个动画 .. 现在动画里用的这个范围值是我们用 Tween 生成的 ..

ColorTween

这个 Tween 设置的范围值可以是不同类型的 .. 比如可以是颜色 .. 在类里面, 再添加一个 Animation .. 名字是 animationColor ..

然后在 initState 里面设置一下 animationColor 的值 .. 它的值用一个 ColorTween,它的 begin 还有 end 是两个颜色 .. begin 是 Colors.red ,红色 .. end 是 Colors.red[900] .. 深一些的红色 .. 用一下 animate 方法返回一个 Animation .. 它的 parent 是 animationDemoController ..

找个地方再用一下这个动画颜色的值 ..

在这个 IconButton 里面给它添加一个 color 属性设置一下小图标的颜色 .. 这个颜色的值应该是 animationColor.value ..

修改一下动画的持续时间 .. 长度设置成 1000 毫秒 .. 然后执行一下 hot restart .. 小图标的颜色现在是 ColorTween 里的 begin 设置的颜色 ..

按一下小图标 .. 运行动画 .. 现在除了小图标的尺寸有变化 .. 它的颜色也会发生变化 .. 动画结束的时候,小图标的颜色会是 ColorTween 里的 end 属性设置的值 ...

Tween:设置动画范围值(数字、颜色)《 Flutter 移动应用:动画 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点