TSR*_*TSR 2 animation widget dart flutter flutter-animation
在一些 Flutter 动画教程中,有些使用 aTween和 anAnimation对象。仅某些用途AnimationController。下面的两个代码似乎输出相同的结果。那么我们什么时候使用带有动画的 Tween,什么时候只使用 AnimationController?
具有补间和动画
import 'dart:core';
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
@override
_State createState() {
return _State();
}
}
class _State extends State<Test> with TickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
bool faded = true;
@override
void initState() {
super.initState();
_animationController = new AnimationController(
value:0.0,
vsync: this,
upperBound: 1.0,
lowerBound: 0.0,
duration: new Duration(seconds:1),
);
_animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
elevation: 0.5,
title: new Text(
"Testing views",
style: Theme.of(context).textTheme.title,
),
),
body: _buildBodyAnimationTest(),
// body: _buildTuto(),
);
}
Widget _buildBodyAnimationTest(){
return FadeTransition(
opacity: _animation, //here is the difference
child: InkWell(
onTap: (){
if(faded){
faded = false;
_animationController.reverse();
}else{
faded = true;
_animationController.forward();
}
},
child: new Container(
color: Colors.red,
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
没有补间和动画
import 'dart:core';
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
@override
_State createState() {
return _State();
}
}
class _State extends State<Test> with TickerProviderStateMixin {
AnimationController _animationController;
bool faded = true;
@override
void initState() {
super.initState();
_animationController = new AnimationController(
value:0.0,
vsync: this,
upperBound: 1.0,
lowerBound: 0.0,
duration: new Duration(seconds:1),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
elevation: 0.5,
title: new Text(
"Testing views",
style: Theme.of(context).textTheme.title,
),
),
body: _buildBodyAnimationTest(),
// body: _buildTuto(),
);
}
Widget _buildBodyAnimationTest(){
return FadeTransition(
opacity: _animationController, //here is the difference
child: InkWell(
onTap: (){
if(faded){
faded = false;
_animationController.reverse();
}else{
faded = true;
_animationController.forward();
}
},
child: new Container(
color: Colors.red,
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
补间是用于转换动画输出的对象(例如AnimationController)。
对于AnimationController,您通常有一个 0-1 浮点值。但你很少想要这样。Tweens 允许将 0-1 映射到更具体的东西,例如红到蓝,从左到右,......
| 归档时间: |
|
| 查看次数: |
829 次 |
| 最近记录: |