Référence des éléments

Élément image

1. Structure

interface ImageClip extends BaseClip {
  type: "image";
  src: string | { $ref: string };
}

2. Champs pris en charge

src

  • Type : string | { $ref: string }
  • Requis : oui
  • Rôle : URL d'image ou référence vers une ressource image

3. Comportement actuel du runtime

  • src prend en charge les URL directes
  • src prend en charge $ref
  • transform fonctionne
  • style.borderRadius fonctionne
  • style.objectFit fonctionne
  • style.filters fonctionne

4. style.objectFit

Valeurs prises en charge :

  • fill
  • cover
  • contain

Signification :

  • fill : étire dans la zone cible et peut déformer
  • cover : conserve le ratio et peut rogner
  • contain : conserve le ratio et peut laisser un espace vide

Exemple :

{
  "style": {
    "objectFit": "cover"
  }
}

Il peut aussi être combiné avec des filtres :

{
  "style": {
    "objectFit": "cover",
    "filters": [
      { "type": "blur", "value": 24 }
    ]
  }
}

5. Exemple

{
  "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
    }
  ]
}