BaseClip, Transform und Style

1. `BaseClip`

interface BaseClip {
  id?: string;
  type: ClipType;
  start: number;
  duration: number;
  transform?: Transform;
  zIndex?: number;
  opacity?: number;
  style?: Style;
  animations?: Animation[];
  keyframes?: Keyframe[];
  transition?: Transition;
}

2. Feldreferenz

`id`

Typ: string
Erforderlich: nein
Zweck: Elementkennung

`type`

Typ: ClipType
Erforderlich: ja

Derzeit unterstützt:

video
image
text
rect
circle
polygon
audio
subtitle
layout
template

`start`

Typ: number
Einheit: Sekunden
Erforderlich: ja
Zweck: Startzeit des Clips

`duration`

Typ: number
Einheit: Sekunden
Erforderlich: ja
Zweck: Dauer des Clips

`transform`

Typ: Transform
Erforderlich: nein

`zIndex`

Typ: number
Erforderlich: nein
Standard: 0

`opacity`

Typ: number
Erforderlich: nein
Standard: 1
Zweck: Kurzform für die Deckkraft sichtbarer Elemente
Kompatibilitätsregel: style.opacity hat höhere Priorität als Top-Level-opacity

`style`

Typ: Style
Erforderlich: nein

`animations`

Typ: Animation[]
Erforderlich: nein

`keyframes`

Typ: Keyframe[]
Erforderlich: nein

`transition`

Typ: Transition
Erforderlich: nein

Hinweise:

transition gilt für sichtbare Elemente
audio führt keine visuellen Übergänge aus

3. `Transform`

interface Transform {
  x?: number | string;
  y?: number | string;
  width?: number | string;
  height?: number | string;
  scale?: number | [number, number];
  rotation?: number;
  skew?: [number, number];
  anchor?: Anchor;
}

Derzeit wirksam zur Laufzeit:

x
y
width
height
scale
rotation
skew
anchor

4. Regeln für Prozentkoordinaten

Dies ist kein DOM-ähnliches System mit Ursprung links oben. Es verwendet ein zentriertes Koordinatenmodell.

Beispiele:

x: "50%" bedeutet horizontale Mitte
y: "50%" bedeutet vertikale Mitte
x: "0%" bedeutet ganz links
x: "100%" bedeutet ganz rechts
y: "0%" bedeutet oben
y: "100%" bedeutet unten

5. `scale`

Unterstützte Formen:

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. `anchor`

Unterstützte Werte:

center
top-left
top
top-right
left
right
bottom-left
bottom
bottom-right

7. `Style`

interface Style {
  opacity?: number;
  objectFit?: "fill" | "cover" | "contain";
  fill?: string | Gradient;
  stroke?: string;
  strokeWidth?: number;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number | string;
  fontStyle?: "normal" | "italic";
  lineHeight?: number;
  letterSpacing?: number;
  textAlign?: "left" | "center" | "right";
  textWrap?: boolean;
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffset?: [number, number];
  borderRadius?: number | [number, number, number, number];
  filters?: Filter[];
}

Derzeit wirksam zur Laufzeit:

opacity
objectFit
fill
stroke
strokeWidth
fontFamily
fontSize
fontWeight
fontStyle
lineHeight
letterSpacing
textAlign
textWrap
shadowColor
shadowBlur
shadowOffset
borderRadius
filters

8. `filters`

Unterstützt:

blur
brightness
contrast
saturate
hue
grayscale
sepia
invert

9. Gemeinsame Style-Hinweise

style.objectFit ist derzeit bei image und video sinnvoll
Erlaubte Werte sind fill, cover und contain
Andere Clip-Typen sollten objectFit nicht als wirksames Feld behandeln

On this page