一个无限的水平翻转动画 ImageWidget Flutter

Posted 2023-03-28

【中文标题】一个无限的水平翻转动画 ImageWidget Flutter

【英文标题】：An infinite Horizontal Flip animation ImageWidget Flutter

【发布时间】：2021-07-17 12:13:30

【问题描述】：

我的问题其实和上一个话题（Link）类似，我测试过，但是不行……

我想实现一个带有无限水平翻转动画的简单屏幕；自从加载我的窗口以来，我想要一个使用以下代码进行无限水平旋转的图像：

import 'dart:math';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';

class FlipCardPage extends StatefulWidget 
@override
_FlipCardPageState createState() => _FlipCardPageState();

class _FlipCardPageState extends State<FlipCardPage>
with SingleTickerProviderStateMixin 

AnimationController animationController;
@override
void initState() 
super.initState();
animationController = new AnimationController(
  vsync: this,
  duration: new Duration(seconds: 7),
);

animationController.repeat();


@override
 Widget build(BuildContext context) 
return   AnimatedBuilder(
    animation: animationController,
    builder: (context, child)
      return Transform(
        transform: Matrix4.rotationY((1 - animationController.value ) * pi / 2),
        child: FlipCard(
          direction: FlipDirection.HORIZONTAL, // default
          front: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("pictures/css.png"),
                fit: BoxFit.scaleDown,
              ),
              shape: BoxShape.rectangle,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[],
            ),
          ),
          back: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("pictures/css.png"),
                fit: BoxFit.scaleDown,
              ),
              shape: BoxShape.rectangle,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[],
            ),
          ),
        ),
      );
    
 );
// _controller.forward();
// _controller.reverse();

我执行了上面的代码，但什么也没得到（...只是一个白屏：/）

有什么建议可以解决吗？ 提前谢谢你

【参考方案1】：

另外，我尝试了另一个代码：

import 'dart:math';
import 'package:flutter/material.dart';
class FlipCardPage2 extends StatefulWidget 
 @override
 _FlipCardPage2State createState() => _FlipCardPage2State();

class _FlipCardPage2State extends State<FlipCardPage2> 
@override
Widget build(BuildContext context) 
return Scaffold(
  appBar: AppBar(
    title: Text('Flip Animation'),
  ),
  body: Container(
    width: double.infinity,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        FlipCard(),
      ],
    ),
  ),
);


class FlipCard extends StatefulWidget 
@override
_FlipCardState createState() => _FlipCardState();

class _FlipCardState extends State<FlipCard>
with SingleTickerProviderStateMixin 
AnimationController animationController;
bool _isFront = true;
@override
void initState() 
super.initState();
animationController = new AnimationController(

  vsync: this,
  duration: new Duration(seconds: 4),
);

// print("Inside initState!");
animationController.addListener(() 
  setState(() 
    if (animationController.status == AnimationStatus.completed) 
    //  print("Status: completed");
      animationController.repeat();
    //  print("After repeat");
      setState(() 
        _isFront = !_isFront;
      );
  
    
    else if (animationController.status == AnimationStatus.dismissed)
     // print("Status: dismisses");
      animationController.forward();
      setState(() 
        _isFront = !_isFront;
      );
    
   );
  );

    animationController.forward();

  
  Widget _frontCard() 
  return Container(
  key: ValueKey(true),
  color: Colors.orangeAccent,
  width: 200,
  height: 200,
  child: Center(
      child: Text(
        'Front',
        style: TextStyle(color: Colors.white, fontSize: 48),
      )),
  );
 
 Widget _rearCard() 
 return Container(
  key: ValueKey(false),
  color: Colors.orange,
  width: 200,
  height: 200,
  child: Center(
      child: Text(
        'Rear',
        style: TextStyle(color: Colors.white, fontSize: 48),
      )),
 );
 
 @override
  Widget build(BuildContext context) 
 return AnimatedSwitcher(
  child: _isFront ? _frontCard() : _rearCard(),
  duration: Duration(seconds: 1),
  transitionBuilder: (Widget child, Animation<double> animation) 
    final rotate = Tween(begin: pi, end: 0.0).animate(animation);
    return AnimatedBuilder(
        animation: rotate,
        child: child,
        builder: (BuildContext context, Widget child) 
          final angle = (ValueKey(_isFront) != widget.key)
              ? min(rotate.value, pi / 2)
              : rotate.value;
          return Transform(
            transform: Matrix4.rotationY(angle),
            child: child,
            alignment: Alignment.center,
          );
        );
  ,
  switchInCurve: Curves.easeInCubic,
  switchOutCurve: Curves.easeOutCubic,
  );
  
  

当我执行这段代码时，动画会开始一次并且朝一个方向开始......它没有循环运行......