Flip Animation

[Gueztt]

This is a great library. I just want some help as to how can we have animation while image is flipping. I could not find anything on the subject also I'm new at flutter.

[Gueztt]

Found a way.

[Gueztt]

I got the flip and rotate right/left animation working but everything else started working unexpectedly. Help is needed to implement it in a proper way.

[Nico3652]

@Gueztt Could you provide what you've found

[Gueztt]

@Nico3652 Thank you for responding.

Following are the changes made to the existing:

extended_image_editor.dart

from :

Positioned.fill( child: image, ),

to:

Positioned.fill( child: AnimatedBuilder( animation: acontroller, child: Container( color: Colors.red, ), builder: (BuildContext context, Widget? child) { final Matrix4 transform = Matrix4.identity(); if (isFlip) { transform.setEntry(3, 2, 0.0002); transform.rotateY(animationY.value); } if (isRotate) { transform.rotateZ(animationZ.value); } return Transform( transform: transform, child: image, alignment: Alignment.center, ); }, ), ),

from:

void rotate({required bool right}) { if (_layerKey.currentState == null) { return; } setState(() { _editActionDetails!.rotate( right ? pi / 2.0 : -pi / 2.0, _layerKey.currentState!.layoutRect, BoxFit.contain, ); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); }); } void flip() { assert(_editActionDetails != null && _editorConfig != null); setState(() { _editActionDetails!.flip(); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); }); } void reset() { setState(() { _editorConfig = null; _editActionDetails = null; _initGestureConfig(); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); }); }

to:

void rotate({required bool right}) { if (_layerKey.currentState == null) { return; } setState(() { isFlip = false; isRotate = true; isRight = right; if (!acontroller.isAnimating) { _editActionDetails!.rotate( right ? pi / 2.0 : -pi / 2.0, _layerKey.currentState!.layoutRect, BoxFit.contain, ); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); } if (right == true) { if (!acontroller.isAnimating) { acontroller.reset(); acontroller.forward().whenComplete(() { aRotateValue = aRotateValue + (pi / 2); }); } } else if (right == false) { if (!acontroller.isAnimating) { acontroller.reset(); acontroller .forward() .whenComplete(() => aRotateValue = aRotateValue - (pi / 2)); } } }); } void flip() { assert(_editActionDetails != null && _editorConfig != null); setState(() { isFlip = true; isRotate = false; if (acontroller.status == AnimationStatus.completed) { acontroller.reverse(); } else { acontroller.forward(); } _editActionDetails!.flip(); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); }); } void reset() { setState(() { _editorConfig = null; _editActionDetails = null; _initGestureConfig(); _editorConfig!.editActionDetailsIsChanged?.call(_editActionDetails); aRotateValue = 0; acontroller.reset(); }); }

added following lines in the build method: final Animation<double> animationY = Tween<double>(begin: 0, end: pi).animate(acontroller); final Animation<double> animationZ = isRight ? Tween<double>(begin: aRotateValue, end: aRotateValue + (pi / 2)) .animate(CurvedAnimation(parent: acontroller, curve: Curves.ease)) : Tween<double>(begin: aRotateValue, end: aRotateValue - (pi / 2)) .animate(CurvedAnimation(parent: acontroller, curve: Curves.ease));

extended_render_image.dart

Removed following lines of code : if (editAction.hasRotateAngle) { result.multiply(Matrix4.rotationZ(editAction.rotateRadian)); } if (editAction.flipY) { result.multiply(Matrix4.rotationY(pi)); } if (editAction.flipX) { result.multiply(Matrix4.rotationX(pi)); }

What Works

1. Flip animation and rotate clockwise/anticlockwise independently works.
2. Reset works.

What went crazy

1. Flip animation/effect is not preserved upon rotating image after first flipping. Issue seems to be animationController.reset rotate() method and transform being set to Matrix4.identity() in build method, but without this rotation doesn't work. Same goes for first rotating and then flipping.
2. After single flip or rotation, image further rotates on tap or on scale.

what I have tried

1. To preserve the rotation and flip effect, matrix transformation was store in a new variable and then setting it to transform variable in the build method.
2. using different controllers for flip and rotate.

I am new to flutter .

If you can help in this regard or point me in right direction I'll be grateful

[Gueztt]

@zmtzawqlp Any pointers for this, plz.