旋转变换动画在 Flutter 中不起作用
Rotation transform animation not working in Flutter
我正在尝试在 Flutter 中制作一个小游戏,其中我必须旋转 Grid
内的 FittedBox
(图像的父级),如下面的代码所示。
child: new AnimatedBuilder(
animation: animationController,
child: new InkWell(
onTap: () {
// setState(
// () {
widget._angleCode = getNextDegree(widget._angleCode);
animationController.forward();
//checkAnswer();
// },
// );
},
child: new FittedBox(
fit: BoxFit.fill,
child: new Image.asset(getImageByCode(widget._image),
fit: BoxFit.cover)),
),
builder: (BuildContext context, Widget _widget) {
animationController.value = getAngleByCode(widget._angleCode); //returns 0,.5,.75 consequtively
return new Transform.rotate(
angle: animationController.value * 2 * pi,
child: _widget,
);
},
),
虽然上面的代码确实旋转了图像 但是 没有转换动画。我已经用 SingleTickerProviderStateMixin
覆盖了我的 class 并实现了 initState() 如下:
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 2),
);
//animationController.forward();
}
如何设置旋转动画?
请试试这个
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _controller;
double target = 0.0;
@override
void initState() {
_controller = AnimationController(
duration: const Duration(milliseconds: 5000),
vsync: this,
);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onTapHandler() {
target += 0.25;
if (target > 1.0) {
target = 0.25;
_controller.reset();
}
_controller.animateTo(target);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: _onTapHandler,
child: RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: Container(
color: Colors.red,
child: SizedBox(
child: new Text("Lorem ipsum"),
height: 100,
width: 100,
),
),
),
),
),
);
}
}
我正在尝试在 Flutter 中制作一个小游戏,其中我必须旋转 Grid
内的 FittedBox
(图像的父级),如下面的代码所示。
child: new AnimatedBuilder(
animation: animationController,
child: new InkWell(
onTap: () {
// setState(
// () {
widget._angleCode = getNextDegree(widget._angleCode);
animationController.forward();
//checkAnswer();
// },
// );
},
child: new FittedBox(
fit: BoxFit.fill,
child: new Image.asset(getImageByCode(widget._image),
fit: BoxFit.cover)),
),
builder: (BuildContext context, Widget _widget) {
animationController.value = getAngleByCode(widget._angleCode); //returns 0,.5,.75 consequtively
return new Transform.rotate(
angle: animationController.value * 2 * pi,
child: _widget,
);
},
),
虽然上面的代码确实旋转了图像 但是 没有转换动画。我已经用 SingleTickerProviderStateMixin
覆盖了我的 class 并实现了 initState() 如下:
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 2),
);
//animationController.forward();
}
如何设置旋转动画?
请试试这个
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _controller;
double target = 0.0;
@override
void initState() {
_controller = AnimationController(
duration: const Duration(milliseconds: 5000),
vsync: this,
);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onTapHandler() {
target += 0.25;
if (target > 1.0) {
target = 0.25;
_controller.reset();
}
_controller.animateTo(target);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: _onTapHandler,
child: RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: Container(
color: Colors.red,
child: SizedBox(
child: new Text("Lorem ipsum"),
height: 100,
width: 100,
),
),
),
),
),
);
}
}