Elementreferenz
Bild-Element
1. Struktur
interface ImageClip extends BaseClip {
type: "image";
src: string | { $ref: string };
}2. Unterstützte Felder
src
- Typ:
string | { $ref: string } - Erforderlich: ja
- Zweck: Bild-URL oder Referenz auf ein Bild-Asset
3. Aktuelles Runtime-Verhalten
srcunterstützt direkte URLssrcunterstützt$reftransformfunktioniertstyle.borderRadiusfunktioniertstyle.objectFitfunktioniertstyle.filtersfunktioniert
4. style.objectFit
Unterstützte Werte:
fillcovercontain
Bedeutung:
fill: streckt auf den Zielbereich und kann verzerrencover: behält das Seitenverhältnis bei und kann beschneidencontain: behält das Seitenverhältnis bei und kann leeren Raum lassen
Beispiel:
{
"style": {
"objectFit": "cover"
}
}Es kann auch mit Filtern kombiniert werden:
{
"style": {
"objectFit": "cover",
"filters": [
{ "type": "blur", "value": 24 }
]
}
}5. Beispiel
{
"type": "image",
"start": 0.5,
"duration": 4,
"src": { "$ref": "logo" },
"transform": {
"x": "85%",
"y": "10%",
"width": 220,
"height": 80
},
"style": {
"borderRadius": 16,
"objectFit": "contain"
},
"animations": [
{
"type": "fadeIn",
"duration": 0.5
}
]
}