Tween strings?

[twobit]

In some cases strings need to be tweened e.g. rgb or path strings. It seems I would have to override the _getTweeningValue function.

[chenglou]

Most things that can be tween have a numerical representation. You should never have to override that function. In the case of e.g. color, you'd have a tweened decimal number. Then, in your render, you'd use a generic decimalToHex function + hexToWhateverCSSFormat function operating on the decimal value you got.

This is by design. The job of this library is to tween, not to convert from the tweened result to a format x. One day we should pull out https://github.com/less/less.js/blob/6fd2a5751cc8313481913bcb1623bf6c50089df8/lib/less/tree/color.js and https://github.com/less/less.js/blob/6fd2a5751cc8313481913bcb1623bf6c50089df8/lib/less/functions/color.js so that people can reuse these on normal js collections/values.

Does that make sense? If so, I'll close this =)

[chenglou]

Also, if you really feel like working with string and sugar coating it, you can always have something like this:

function myLinearTweenForColorStr(currentTime, beginValue, endValue, totalDuration) {
  var a = colorStringToDecimal(beginValue);
  var b = colorStringToDecimal(endValue);
  var y = tweenState.easingTypes.linear(currentTIme, a, b, totalDuration);
  return decimalToColorString(y);
}

I can see this being useful if you have lots of "rgb(0, 0, 0)" in your initialState and want to stay string-based.

[davidmfreese]

Close away :-)

On Friday, February 13, 2015, Cheng Lou notifications@github.com wrote:

Anything that can be tween has, by definition, a numerical representation. You should never have to override that function. In the case of e.g. color, you'd have a tweened decimal number. Then, in your render, you'd use a generic decimalToHex function + hexToWhateverCSSFormat function operating on the decimal value you got.

This is by design. The job of this library is to tween, not to convert from the tweened result to a format x. One day we should pull out https://github.com/less/less.js/blob/6fd2a5751cc8313481913bcb1623bf6c50089df8/lib/less/tree/color.js and https://github.com/less/less.js/blob/6fd2a5751cc8313481913bcb1623bf6c50089df8/lib/less/functions/color.js so that people can reuse these on normal js collections/values.

Does that make sense? If so, I'll close this =)

— Reply to this email directly or view it on GitHub https://github.com/chenglou/react-tween-state/issues/21#issuecomment-74225270 .

David Freese, E.I.T.

[chenglou]

@twobit hope that answered your question though?

[twobit]

Thanks @chenglou. RGB wasn't a great example, something like path data can be an unknown amount of scalars. #22 better expresses my problem.