CODEWITHSUNDEEP
dartflutter
Rajesh Patil
Rajesh Patil

Reputation: 41

Flipping and Shaking of Tile Animation Using Flutter/Dart..?

https://github.com/chimple/maui/blob/master/lib/games/memory.dart

I am Trying to implement MemoryMatching Game using Flutter/Dart. Entire Game Logic has been coded Up..only Animation is pending when user clicks on any Random tile flipping of tile should happen and Upon trying to match mismatch tiles shake animation should happen and they should flip back again.These is how initial look of the game

Upvotes: 2

Views: 3664

Answers (1)

peopletookallthegoodnames
peopletookallthegoodnames

Reputation: 2321

There is an example on this page of how to make a custom shaking curve.
It also details how to create animations using a curve.

Edit: actually I tried this and the example curve causes an error in flutter. What you can do instead is use a transform like so;

/// create and animation controller in your init state;
_controller = new AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1000),
)..addListener(()=>setState((){}));

...

///wrap your layout in a transform;
return Transform(
    transform: Matrix4.translation(getTranslation()),
    child:
      /*your layout widget here*/,
  );

///Then you can get a shake type motion like so;
Vector3 getTranslation() {
  double progress = _controller.value;
  double offset = sin(progress * pi * 2);
  return Vector3(offset, 0.0, 0.0);
}

Then once you call forward on your Animation controller you'll get a nice shaking effect. To get a more pronounced shake multiply offset by a constant. To get faster shaking change the 2.0 to a higher amount.

The accepted answer here describes a simple solution to a flipping animation

Upvotes: 6

Related Questions