如何使用 AnimatedContainer 进行动画转换(例如缩放)
How to use an AnimatedContainer for animated transforms (ex. Scale)
我希望使用 transform property of an AnimatedContainer 为容器的比例设置动画;但是,比例没有过渡,而是直接从头跳到尾。
代码片段:
var container = new AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 50.0,
height: 50.0,
// selected is a bool that will be toggled
transform: selected ? new Matrix4.identity() : new Matrix4.identity().scaled(0.2,0.2),
decoration: new BoxDecoration(
shape: BoxShape.circle,
backgroundColor: Colors.blue[500],
),
child: new Center(
child: new Icon(
Icons.check,
color: Colors.white,
),
)
);
对正在发生的事情有任何见解吗?
恐怕 transform
是我们不设置动画的属性之一(child
是另一个)。如果要为比例设置动画,可以使用 ScaleTransition。
缩放转换:https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html
矩阵 lerp 的错误:https://github.com/flutter/flutter/issues/443
您可以使用 Animated Builder 制作动画,下面的代码将在 4 秒内从字体大小 20-35 缩放文本让我将其分成几个步骤以使您更好地理解
1.you 需要从 TickerProviderStateMixin 实现你的 class。
2.You 需要一个 AnimationController 和一个 Animation 变量;
3.wrap 你的 widget 在一个 AnimatedBuilder 中(注意 AnimatedBuilder 必须 return 一个 Widget 至少一个容器)并且添加一个控制器到动画中作为
animation: _controller,
and builder returnAnimatedWidget
4.In init 方法使用 vsync 和动画持续时间初始化控制器。
并且带有 Tweenit 的动画采用开始和结束值,这些值定义要动画化的 Widget 的初始值和最终值
对我来说,在这种情况下,它是文本小部件,因此开始和结束值将对应于 fontSize.which 接收变量值 animation.value
5.Finally你想要怎样的动画效果由控制器中的animate和Curve effect指定
这是一个工作示例
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<SplashScreen>
with TickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF005CA9),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Container(
child: Text(
'Hello World',
style: TextStyle(
color: Colors.white,
fontSize: _animation.value,
),
),
);
},
),
));
}
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 4));
_animation = Tween<double>(
begin: 20,
end: 35,
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.ease,
),
);
_controller.forward();
}
}
上面的代码产生以下输出
AnimatedContainer 支持对它的变换值进行动画处理,如下所示:
/// scale to 95%, centerred
final width = 200.0;
final height = 300.0;
bool shouldScaleDown = true;// change value when needed
AnimatedContainer(
color: Colors.blueAccent,
width: width,
height: height,
duration: Duration(milliseconds: 100),
transform: (shouldScaleDown
? (Matrix4.identity()
..translate(0.025 * width, 0.025 * height)// translate towards right and down
..scale(0.95, 0.95))// scale with to 95% anchorred at topleft of the AnimatedContainer
: Matrix4.identity()),
child: Container(),
);
我希望使用 transform property of an AnimatedContainer 为容器的比例设置动画;但是,比例没有过渡,而是直接从头跳到尾。
代码片段:
var container = new AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 50.0,
height: 50.0,
// selected is a bool that will be toggled
transform: selected ? new Matrix4.identity() : new Matrix4.identity().scaled(0.2,0.2),
decoration: new BoxDecoration(
shape: BoxShape.circle,
backgroundColor: Colors.blue[500],
),
child: new Center(
child: new Icon(
Icons.check,
color: Colors.white,
),
)
);
对正在发生的事情有任何见解吗?
恐怕 transform
是我们不设置动画的属性之一(child
是另一个)。如果要为比例设置动画,可以使用 ScaleTransition。
缩放转换:https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html
矩阵 lerp 的错误:https://github.com/flutter/flutter/issues/443
您可以使用 Animated Builder 制作动画,下面的代码将在 4 秒内从字体大小 20-35 缩放文本让我将其分成几个步骤以使您更好地理解
1.you 需要从 TickerProviderStateMixin 实现你的 class。
2.You 需要一个 AnimationController 和一个 Animation 变量;
3.wrap 你的 widget 在一个 AnimatedBuilder 中(注意 AnimatedBuilder 必须 return 一个 Widget 至少一个容器)并且添加一个控制器到动画中作为
animation: _controller,
and builder returnAnimatedWidget
4.In init 方法使用 vsync 和动画持续时间初始化控制器。 并且带有 Tweenit 的动画采用开始和结束值,这些值定义要动画化的 Widget 的初始值和最终值
对我来说,在这种情况下,它是文本小部件,因此开始和结束值将对应于 fontSize.which 接收变量值 animation.value
5.Finally你想要怎样的动画效果由控制器中的animate和Curve effect指定
这是一个工作示例
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<SplashScreen>
with TickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF005CA9),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Container(
child: Text(
'Hello World',
style: TextStyle(
color: Colors.white,
fontSize: _animation.value,
),
),
);
},
),
));
}
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 4));
_animation = Tween<double>(
begin: 20,
end: 35,
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.ease,
),
);
_controller.forward();
}
}
上面的代码产生以下输出
AnimatedContainer 支持对它的变换值进行动画处理,如下所示:
/// scale to 95%, centerred
final width = 200.0;
final height = 300.0;
bool shouldScaleDown = true;// change value when needed
AnimatedContainer(
color: Colors.blueAccent,
width: width,
height: height,
duration: Duration(milliseconds: 100),
transform: (shouldScaleDown
? (Matrix4.identity()
..translate(0.025 * width, 0.025 * height)// translate towards right and down
..scale(0.95, 0.95))// scale with to 95% anchorred at topleft of the AnimatedContainer
: Matrix4.identity()),
child: Container(),
);