Rotation Transition class helps to rotate the widgets easily by the help of Tween and Animation controller.

Rotation Transition with the help of Tween and Animation controller

1.RotationTransition

Rotation Transition class helps to rotate the widgets easily by the help of Tween and Animation controller. Where we can set the different animation property  direction, duration, listeners to handle and control the animation.

 RotationTransition(
     turns: //Tween,
     child: //Child Element
  )

2.Tween

It is a stateless object having its arguments begin and end. The major work of tween is to create a map from input to output range.
Now create a Tween with [begin] and [end], and it's property should be non null when tween is first used but we can use the null arguments if the values are filtered later.

Tween(begin: 0.0, end: 1.0)

3.AnimationController

AnimationController is an animation object, It generates new values ranging from 0.0 to 1.0, when hardware is ready for new frame. It generates the numbers during its given
duration from (0.0 to 1.0).

You need to define 'vsync' when animation controller generated, this is necessary to stop offscreen animation (to prevent unnecessary use of resources)

AnimationController having few more methods to control the animation. For example

forward()-  to start the animation,

repeat()- repeat the same animation,

stop()- stop the current animation

dispose()- disposing animation before moving to some other screen 

class ScreenRotation extends StatefulWidget {
  @override
  _ScreenRotationState createState() => _ScreenRotationState();
}

class _ScreenRotationState extends State<ScreenRotation> with TickerProviderStateMixin{
  AnimationController animationController;

  int currentFanSpeed=1;

  @override
  void initState() {
    super.initState();
    animateFan();
  }

  @override
  void dispose() {
    if(animationController!=null) {
      animationController.dispose();
    }
    super.dispose();
  }


  void animateFan() {
    if (animationController == null) {
      animationController = new AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    }
    setState(() {
      animationController.duration = duration;
      animationController.forward();
      animationController.addListener(() {
        if (animationController.status == AnimationStatus.completed) {
          animationController.repeat();
          animationController.stop();
        }
      });
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text('Rotation'),
          centerTitle: true,
          backgroundColor: AppTheme.appBarColor,
        ),
        body: Center(
            child:  Container(
              decoration: AppTheme.bodyColor,
              child:  FanImageRotation(animationController),/// this class you can find below and can use directly in app
            )
        )
    );
  }
} 

The Complete code will be like this

class NetworkDiagnosis extends StatefulWidget {
  @override
  _NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}

class _NetworkDiagnosisState extends State<NetworkDiagnosis> with TickerProviderStateMixin{
  AnimationController animationController;
  Duration duration;
  int currentFanSpeed=1;

  @override
  void initState() {
    super.initState();
    animateFan(1); //initially set to 1
  }

  @override
  void dispose() {
    if(animationController!=null) {
      animationController.dispose();
    }
    super.dispose();
  }

  int fanSpeed(currentFanSpeed){
    switch(currentFanSpeed){
      case 1:
        return 600;
      case 2:
        return 500;
      case 3:
        return 400;
      case 4:
        return 300;
      case 5:
        return 200;
    }
    return 0;
  }

  void animateFan(int currentFanSpeed) {
    if (currentFanSpeed != null) {
      setState(() {
        duration = new Duration(milliseconds: fanSpeed(currentFanSpeed));
      });
    }
    if (animationController == null) {
      animationController = new AnimationController(vsync: this, duration: duration);
    }
    setState(() {
      animationController.duration = duration;
      animationController.forward();
      animationController.addListener(() {
        if (animationController.status == AnimationStatus.completed) {
          animationController.repeat();
        }
      });
    });
  }


  @override
  Widget build(BuildContext context) {

    final body= Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[

        Center(
            child:  Container(
              decoration: AppTheme.bodyColor,
              child:  FanImageRotation(animationController),
            )
        ),

        GestureDetector(
          child: RaisedButton(
            onPressed: (){
              setState(() {
                if(currentFanSpeed<5){
                  currentFanSpeed++;
                }else{
                  currentFanSpeed=1;
                }
                animateFan(currentFanSpeed);
              });
            },
            child: Text("Set Speed $currentFanSpeed"),
          ),
        )
      ],
    );

    return Scaffold(
        appBar: AppBar(
          title: Text('Rotation'),
          centerTitle: true,
          backgroundColor: AppTheme.appBarColor,
        ),
        body: body
    );
  }
}

FanImageRotation.dart

class FanImageRotation extends StatefulWidget{
 final AnimationController animationController;

 FanImageRotation(this.animationController);

  @override
  FanImageRotationState createState() => FanImageRotationState();

}

class FanImageRotationState extends State<FanImageRotation> {
  @override
  Widget build(BuildContext context) {

    return Container(
        //margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
        child:  RotationTransition(
            turns: Tween(begin: 0.0, end: 1.0).animate(widget.animationController),
            child: Image.asset(AppIcons.fan, fit: BoxFit.contain, color: AppTheme.blackTextColor, height: 80, width: 80)
        )
    );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post