Popmotion
Style Value Types
Parsers, transformers and tests for common style value types, eg: %, hex codes etc.
To help convert numerical values into commonly-used special value types, like px or hex, we provide an optional module called style-value-types:
npm install style-value-types --save Each value type has three functions:
test: Returnstrueif the provided value is of that type.parse: Returns the value in a format suitable for animation. Either anumberor{ [key: string]: number }.
And one of:
transform: The reverse ofparse. Accepts anumberor map of named numbers and converts that into the value type.createTransformer: Accepts a value and returns atransformbased on that specific value.
Import
import { color } from 'style-value-types';Example
// Test
color.test('#fff'); // true
color.test(0); // false
// Parse
color.parse('rgba(255, 255, 255, 0)');
// { red: 255, green: 255, blue: 255, alpha: 0 }
// Transform
color.transform({ hue: 200, saturation: 100, lightness: 50, alpha: 0.5 });
// 'hsla(200, 100%, 50%, 0.5)'Included value types
alpha:Numberbetween0and1complex: Handles space and comma delimited values, like CSS box-shadow:'10px 10px inset #f00, 5px 5px 30px #fff', gradient or a path definition.color:Stringof eitherhex,hslaorrgbatypedegrees:Stringending indeghex:Stringbeginning with#and followed by 3 or 6-digit hex codehsla:Stringwith validhslapropertypercent:Stringending in%px:Stringending inpxscale:Numberwith adefaultof1instead of0rgbUnit: Integer between1and255rgba: String inrgba(rgbUnit, rgbUnit, rgbUnit, alpha)format
complex
The complex value type is slightly different to the others. Instead of a transform method, it has a createTransformer method which returns the transform method:
const svgPath = 'M150 0 L75 200';
const transform = complex.createTransformer(svgPath);The returned transform function is unique to the string given to it. When this function is provided an object of the same format as returned by complex.parse() (in this example complex.parse(svgPath)), it will use the original string as a template.