Add support for TweenService

[bradsharp]

When designing UI with React, developers are able to implement animations using CSS transitions. CSS transitions are very useful as a quick way to stylize different transitions between the developers UI, and in some cases allows them to be more performant.

As for Roact, most animations are currently implemented using Otter. While Otter is very powerful, it lacks the performance of TweenService. This is due-to:

• Repeated reconciliations (can be mostly negated by optimizing your Roact components)
• Multiple engine bridges for each property assignment

If implemented correctly, with TweenService property changes can act like CSS transitions. The developer only needs to be concerned about the target value, and Roact + TweenService can take care of the rest under the hood.

Such an implementation could look like so:

local Example = Roact.PureComponent:extend("Example")

function Example:init()
  self.state = {
    active = false
  }
  self.transition = Roact.createTransition(time = 1.0, easingStyle = Enum.EasingStyle.Quad, easingDirection = Enum.EasingDirection.Out, repeatCount = 0, reverses = false, delayTime = 0)
end

function Example:render()
  return Roact.createElement("TextButton", {
    BackgroundTransparency = self.transition(self.state.active and 0.5 or 0),
    [Roact.Event.Activated] = function ()
      self:setState({
        active = not self.state.active
      })
    end
  })
end

I have looked at implementing this myself with bindings, unfortunately this is not an option as bindings eventually call setRobloxInstanceProperty which would negate the performance gain from using TweenService.