Matrix4TransformTween improvement

[pskink]

would it be possible to change Matrix4TransformTween in such a way it does not use broken Matrix4Tween.lerp method? now when matrix uses non trivial transformations the results are weird: "Since Matrix4Tween will not animate linearly as you'd expect, it's possible that the intermediary transformations will be "strange", although the start and end should be correct."

[marcglasberg]

Yes, it is possible, and I know how to do it. But I'm not sure people actually need this. Myself, I usually use Matrix4Transform with https://pub.dev/packages/align_positioned , which solves most of this weird transformation problems. So in the end I'm not sure there is demand for that, and it's some work to implement this, so I didn't.

If this package ever reaches 90 I will invest the time to add some more interesting stuff.

[pskink]

thanks for your info, actually today i wrote similar class to your Matrix4Transform and Tween for it which animates in a normal, expected way

[marcglasberg]

That's great. Can you share the code?

[pskink]

sure, its 8 hours work so it still needs some extra code (assert()s most likely for discovering potential problems) - i had to rename source file to .txt since i was not able to upload .dart file, also i tested it in flutter desktop environment - if it does not work on real device / emulator remove the first line from main function: debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

matrix_builder.txt

[marcglasberg]

Thanks!

[jasonhe88]

tried to use Matrix4TransformTween to rotate a Container around its center, found it has same behavior as Matrix4Tween.

recorded the animation as a GIF here

Matrix4Transform begin =
    Matrix4Transform().rotate(0, origin: Offset(75, 75));
Matrix4Transform end =
    Matrix4Transform().rotate(3.1415926535 / 2, origin: Offset(75, 75));
mt = Matrix4TransformTween(begin: begin, end: end).animate(controller);

...........................

 Container(
        alignment: Alignment.center,
        width: 150,
        height: 150,
        color: Colors.blue.withOpacity(0.3),
        child: Container(
            width: 150,
            height: 150,
            transform: mt.value.matrix4,
            color: Colors.red.withOpacity(0.3))))

[jasonhe88]

found Matrix4TransformTween just wrap Matrix4Tween

will try to check out pskink's code

thank you guys!

[jasonhe88]

after checkout pskink's attached code, it animates like this :=)

[pskink]

jasonhe88

after checkout pskink's attached code, it animates like this :=)

use var begin = MatrixBuilder( rotationOrigin: Offset(75, 75), );

and pass it to: var tween = MatrixBuilderTween( begin: begin, end: end, );

in your code rotationOrigin is most likely not set (or set to Offset.zero)

[jasonhe88]

jasonhe88

after checkout pskink's attached code, it animates like this :=)

use var begin = MatrixBuilder( rotationOrigin: Offset(75, 75), );

and pass it to: var tween = MatrixBuilderTween( begin: begin, end: end, );

in your code rotationOrigin is most likely not set (or set to Offset.zero)

Yes!!!, after set begin's rotationOrigin, it works as expected.

save my day! thank you.