Decker Workshop
Folienerstellung - Fragmente und animierte Übergänge
Sebastian Lukas Hauer
Lehrstuhl für Computergraphik, TU Dortmund
Was sind Fragmente?
Teile einer Folie, die erst nach und nach auf dem Bildschirm angezeigt werden heißen Fragmente.
Ein Fragment wird im Quelltext durch die Klasse fragment gekennzeichnet.
Diese Klasse kann an alle Folienelemente gebunden werden, an die Klassen gebunden werden können.
In den folgenden Folien sind einige Beispiele.
Beispiel: Bilder als Fragmente
Dieser Text beinhaltet eine Erklärung zu einem Bild, das erst durch das Aufrufen der nächsten Folie sichtbar wird.
Beispiel: Folienbereiche als Fragmente
Dies ist ein längerer Paragraph auf einer Folie, der erst durch Anfordern der nächsten Folie eingeblendet wird.
Dies ist ein weiterer längerer Textabschnitt, der erst noch später eingeblendet wird. Auch Quelltextabschnitte können Fragmente sein.
::: fragment
Dies ist ein längerer Paragraph auf einer Folie, der erst durch Anfordern der nächsten Folie eingeblendet wird.
:::
::: fragment
Dies ist ein weiterer längerer Textabschnitt, der erst noch später eingeblendet wird. Auch Quelltextabschnitte können Fragmente sein.
:::
``` {.markdown .fragment}
Auch Quellcodeabschnitte können Fragmente sein ...
```Inkrementelle Listen
Eine der häufigsten Anwendungsfälle für sich schrittweise aufbauende Folien sind Listen, deren Einträge nach und nach aufgedeckt werden.
Damit Sie nicht jedes Listenelement in ein eigenes Fragment einbetten müssen, können Sie Ihre Liste in einem Bereich mit der Klasse incremental einbetten:
::: incremental
- Erster Listeneintrag
- Zweiter Listeneintrag
- Dritter Listeneintrag
- etc.
:::Beispiel: Inkrementelle Listen
- Erster Listeneintrag
- Zweiter Listeneintrag
- Dritter Listeneintrag
- etc.
Aufdeckungsreihenfolge ändern
Normalerweise werden Fragmente in der Reihenfolge aufgedeckt in der sie im Quelltext angegeben werden.
Möchten Sie die Reihenfolge ändern, so müssen Sie dem Fragment ein Attribut mit dem Namen data-fragment-index geben, dessen Wert angibt wann das Fragment aufgedeckt werden soll:
::: {.fragment data-fragment-index="2"}
Dies wird als zweites aufgedeckt.
:::
::: {.fragment data-fragment-index="1"}
Dies wird zuerst aufgedeckt.
:::Möchten Sie Listenelemente in unterschiedlicher Reihenfolge einblenden müssen Sie jedoch jeden Eintrag in sein eigenes Fragment verpacken:
::: {.fragment data-fragment-index="2"}
- Erster Eintrag
:::
::: {.fragment data-fragment-index="1"}
- Zweiter Eintrag
:::Beispiel: Aufdeckungsreihenfolge
Dies wird als zweites aufgedeckt.
Dies wird zuerst aufgedeckt.
Animierte Übergänge
Das Ein- und Ausblenden von Fragmenten kann animiert werden. Dazu muss dem Fragment eine zusätzliche Klasse zugewiesen werden, die die Animation beschreibt. Mögliche Animationen sind:
.fade-in- Fragment einblenden.fade-out- Fragment ist erst sichtbar und blendet dann aus.fade-up- Fragment erscheint von unten.fade-down- Fragment erscheint von oben.fade-left- Fragment erscheint von rechts.fade-right- Fragment erscheint von links.fade-in-then-out- Fragment blendet ein und anschließend aus.current-visible- Das selbe Verhalten wie.fade-in-then.out.fade-in-then-semi-out- Fragment wird eingeblendet und anschießend abgedunkelt.semi-fade-out- Fragment wird abgedunkelt
.grow- Fragment wird größer.shrink- Fragment wird kleiner.strike- Fragment wird durchgestrichen.highlight-red- Fragment wird rot.highlight-green- Fragment wird grün.highlight-blue- Fragment wird blau.highlight-current-red- Wenn Fragment aktuell ist wird es rot.highlight-current-green- Wenn Fragment aktuell ist wird es grün.highlight-current-blue- Wenn Fragment aktuell ist wird es blau
Beispiele: Animierte Übergänge
Fade down
Fade right
Fade left
Fade up
Fade In Then Out
Fade In Then Semi Out
Current Visible
Semi Fade Out
Grow
Shrink
Strike
Fade Out
Anmerkung: Im TU Dortmund Resource Pack sind Animationen aktuell standardmäßig abgeschaltet. Zu Demonstrationszwecken wurde die Funktionalität auf dieser Folie wiederhergestellt.