旋转变换动画无法在颤动中工作

问题描述 投票:0回答:1

[我正在尝试制作一个小型游戏,其中我必须旋转FittedBox内部的Grid(图像的父级,如下面的代码所示。

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覆盖了我的课程,并实现了initState(),如下所示:

    @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    //animationController.forward();
  }

请帮助。

flutter animation dart transformation image-rotation
1个回答
0
投票

请尝试这个

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> {
  double angle = 0.0;

  void _onPanUpdateHandler() {
    setState(
      () {
        angle += 0.2;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: GestureDetector(
        onTap: _onPanUpdateHandler,
        child: Transform.rotate(
          angle: angle,
          child: Container(
            color: Colors.red,
            child: SizedBox(
              child: null,
              height: 100,
              width: 100,
            ),
          ),
        ),
      )),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.