Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Convert "translate(10px) rotate(0)" into ["translate", "rotate"]
- // This helps interpolate strings of different arity.
- const keyRegex = /(?:^| )([\w-]+)\(([^ ,]+(?:(?:,[ ]*|[ ]+)[^ ,)]+)*)\)/g
- /**
- * Create a specialized interpolator for strings like:
- *
- * "translate(...) rotate(...)"
- */
- export const createKeyedInterpolator = (config: InterpolatorConfig<string>) => {
- type KeyFrame = { [key: string]: string }
- // Collect the keyframes and from values.
- const fromValues: KeyFrame = {}
- const keyframes = config.output.map((output, i) => {
- // Replace colors with rgba(...)
- output = output
- .replace(colorRegex, colorToRgba)
- .replace(colorNamesRegex, colorToRgba)
- const keyframe: KeyFrame = {}
- keyRegex.lastIndex = 0
- for (let match; (match = keyRegex.exec(output)); ) {
- const key = match[1]
- const value = match[2]
- if (fromValues[key] == null) {
- // Infer 0 as the from value when none exists.
- fromValues[key] = i == 0 ? value : value.replace(numberRegex, '0')
- }
- // Keep the parsed argument list as a string.
- keyframe[key] = value
- }
- return keyframe
- })
- console.log('interpolate:', { config, fromValues, keyframes })
- // Each key has its own interpolator.
- const keys = Object.keys(fromValues)
- const interpolators = keys.map(key => {
- let prev = fromValues[key]
- return createInterpolator({
- ...config,
- output: keyframes.map(keyframe => {
- const value = keyframe[key]
- return value !== void 0 ? (prev = value) : prev
- }),
- })
- })
- return (input: number) =>
- keys.map((key, i) => `${key}(${interpolators[i](input)})`).join(' ')
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement