Flutter七种动画
2022-08-12 本文已影响0人
woniu
翻转的动画效果第三方，很有用： flip_card: ^0.6.0
动画原理说明重要重要重要！！！！！！！！！！！！
一、AnimatedSize
[图片上传失败...(image-a886eb-1660831811967)]
图片会在1s内自动展开
image.png
二、AnimatedPositioned
位置改变动画
image.png
从底部向上移动
image.png
三、AnimatedDefaultTextStyle
改变文本动画
image.png
点击动画，他会改变style
image.png
四、AnimatedContainer
image.png
动画开始之前
image.png
动画开始之后
image.png
五、AnimatedAlign
Align移动位置的动效
image.png
从左移到中间：
image.png
六、自定义动画AnimatedBuilder
动画需要填写controller，所以我们需要创建动画的controller，不要忘了在dispose中销毁controller。
image.png
使用mixin的功能，因为vsync的需要。
image.png
七、AnimatedOpacity
透明度动画：
image.png
动画渐渐变得透明：
image.png
