eg.animate - Support rotate3d and fix interpolation bug on rotation.

[jongmoon]

Description

2 Things

1. Support rotate3d, rotateX, rotateY, rotateZ

AS IS: support only "rotate"

2. Fix interpolation bug on rotating calculation.(matrix)

The AS-IS way to interpolate the value to get an intermediate values is not applicable on rotation.

AS IS way

interpolate: function(m2, t, context) {
    var me = this,
        m  = context ? new Matrix(context) : new Matrix();

    m.a = me.a + (m2.a - me.a) * t;
    m.b = me.b + (m2.b - me.b) * t;
    m.c = me.c + (m2.c - me.c) * t;
    m.d = me.d + (m2.d - me.d) * t;
    m.e = me.e + (m2.e - me.e) * t;
    m.f = me.f + (m2.f - me.f) * t;

    return m._x()
},

I found the solution, It decompose a matrix to transform information(eg. translateX(10px) rotateY(20deg)) but it is not applicable to 3d. We need to check other solution.

[jongmoon]

More information about second issue above.

When matrix contains "rotate" or "skew" which have degree value, It can not be interpolated. Interpolation using matrix makes user-unexpected result (That may be expected to computer.)

Below screen-shot shows drawing of movements of box for animate.

• Left one is interpolation using matrix.
• Right one is interpolation using transform string.

In other words, matrix must be disassembled as a transform string(eg. translateX(10px) rotateY(20deg).

But I couldn't find the solution for decompsing 4x4 matrix(3d) (matrix3d --> transform string)although 3x3 matrix(2d) could be found. Velocity.js library does not solve this problem also. It avoid this problem by below.

1. It does not support transform order.
   • It follows first order of transform animation.
2. It does not support absolute transform.
   • It moves from previous state.

So velocity may not act as you expected. How about below ?

Is result is same as expected?

And several consideration. It can be solved by (matrix * transform string). This will be added later.

[jongmoon]

Solution

When these (below) are applied, we may solve the problem.

• Do not convert from transform string to matrix to make an interpolated value.
• Instead, combine current position matrix with interpolated transform like a relative(+=) process.
• Store transform element names which makes current position.
• When making interpolated transforms, initialize(set 0) value of transform elements stored above.