GSAP - ProcessWire - UIKit - Versionsgeschichte

134.3.86.14 am 20. April 2024 um 13:08 Uhr

2024-04-20T13:08:52Z

134.3.86.14: /* Neue Animation hinzufügen */

2024-04-20T13:03:58Z

Neue Animation hinzufügen

134.3.86.14: /* Neue Animation hinzufügen */

2024-04-20T13:03:17Z

Neue Animation hinzufügen

134.3.86.14 am 20. April 2024 um 13:00 Uhr

2024-04-20T13:00:38Z

134.3.86.14 am 20. April 2024 um 12:51 Uhr

2024-04-20T12:51:48Z

134.3.86.14: /* Übersicht */

2024-04-20T12:50:09Z

Übersicht

134.3.86.14 am 20. April 2024 um 12:48 Uhr

2024-04-20T12:48:58Z

134.3.86.14 am 20. April 2024 um 12:47 Uhr

2024-04-20T12:47:57Z

134.3.86.14 am 20. April 2024 um 12:32 Uhr

2024-04-20T12:32:43Z

134.3.86.14: Die Seite wurde neu angelegt: „Beispielszenarien wie man Animationen mit ProcessWire als CMS, UIKit als CSS/JS Framework und GSAP einsetzen kann. Beispielszenario 1 - Section Animationen mi…“

2024-04-20T12:15:20Z

Die Seite wurde neu angelegt: „Beispielszenarien wie man Animationen mit ProcessWire als CMS, UIKit als CSS/JS Framework und GSAP einsetzen kann. Beispielszenario 1 - Section Animationen mi…“

Neue Seite

Beispielszenarien wie man Animationen mit ProcessWire als CMS, UIKit als CSS/JS Framework und GSAP einsetzen kann.

Beispielszenario 1 - Section Animationen mit ScrollTrigger

Hier möchten wir Animationen abspielen, die beim Scrollen abgespielt werden, wenn der Benutzer die Section erreicht.
* Die Animationen sollen für den Redakteur wählbar sein.
* Die Animationen an sich sind vorgefertigt
* Wenn sie nicht benötigt werden soll der Code nicht eingebunden werden.

_init.php
<syntaxhighlight lang="php">
// ANIMATION CODE
if($page->opt_2){
include_once('includes/Animation.php'); // include Animation Class
include_once('includes/animations.inc'); // include additional animation helper functions
page()->additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'styles/animations.css" />
<script src="'.urls()->templates.'vendor/gsap/gsap.min.js"></script>
<script src="'.urls()->templates.'vendor/gsap/gsap.min.js"></script>
<script src="'.urls()->templates.'vendor/gsap/ScrollTrigger.min.js"></script>
';
}
</syntaxhighlight>
In der '''_init.php''' laden wir die benötigten Skripte:

Über das Feld $page->opt_2 (Checkbox) kann der User festlegen ob für die Seite die benötigten Skripte geladen werden.

page()->additionalHeaderData wird in einem späteren Template eingefügt. Man könnte auch über einen Hook arbeiten, dies ist aber eine einfache effektive Lösung.

'''Animation.php''' liefert die Klasse Animation, die im wesentlichen Funktionen bietet um Code aus einem Template zu laden und in den aktuellen Markup einzubetten.

'''animations.inc''' liefert Helferfunktionen für die Layoutblocks.

'''Animation.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/*
* GSAP ANIMATIONS FOR 3B
* v0.1
* Helper functions for the GSAP Animation.
* I.e. for loading nessecary assets.
* The animation itself is handled by animation.js
*/

class Animation extends Box
{
public $classes = array();
public $styles = array();
public $classesMarkup = '';
public $stylesMarkup = '';
public $attributes = array();

// init section with page values aka layout_block values
function __construct($classes = array('ani-box'), $styles = array(), $attributes = array()){
}

/**
* Uses a template file to create the animation markup inside a wrapper box
* @param String template filename (without suffix)
* @param Array associative Array containing rendering options
*/
function renderAnimationTemplate($animationName,$options=array()){
$defaults = array(
'box'=>false, // wrap the animation template content in a container?
'classes'=>'ani-box', // classes for the container (if used)
'assetPath'=>urls()->templates.'assets/animations', // path to animation assets - can be used by templates
'templatePath'=>'animations/'.$animationName // render templates starting at /site/templates/
);
$options = array_merge($defaults, $options);
$options['animationName'] = $animationName;
bd($options);
$animationBoxContent = page()->renderValue($options,$options['templatePath']);

$animationBox = new Box();
if($options['classes']) $animationBox->addClasses(preg_replace("/[^a-zA-Z0-9-\s]+/", "", $options['classes']));
$animationBox->addClasses($animationName);
if($options['box']) $animationBoxContent = $animationBox->wrap($animationBoxContent,'div');

return $animationBoxContent;
}
}
</syntaxhighlight>
Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Wichtig ist aber die renderAnimationTemplate Funktion. Diese holt ein Template welches im Ordner site/templates/fields/animations/meinAnimationsName.php liegt. Der Code wird am Ende
<syntaxhighlight lang="php">
</syntaxhighlight>

<syntaxhighlight lang="php">
</syntaxhighlight>

@@ Zeile 16: / Zeile 16: @@
   site/templates/fields/animations/myAnimationTemplate.php
   site/templates/scripts/animations.js
   site/templates/assets/animation/bildname.png ...
   Box.php (Optional)
@@ Zeile 151: / Zeile 152: @@
 Dieses Template gibt uns das zusätzliche Markup für die Animation. Da wir in der Animation.php die ProcessWire Funktion $page->renderValue() verwendet haben konnten wir im ersten Parameter unsere $options an das Template weitergeben. Im Template steht und das automatisch in der Variable $value zur Verfügung.
-site/templates/scripts/animations.js
+'''site/templates/styles/animations.css'''
 <syntaxhighlight lang="javascript">
 // Todo event listeners für Browserfenster Größenänderungen

@@ Zeile 207: / Zeile 207: @@
 . Die benötigten Bilder kommen in den '''Asset Ordner''' (z.B. templates/assets/animations/cloud.png)
-. Die '''Template Datei für das Animationsmarkup''' anlegen (z.B. templates/fields/animations/ani-cloud.php) Der Dateiname entspricht dem Value im Select Feld.
+. Die '''Template Datei für das Animationsmarkup''' anlegen (z.B. templates/fields/animations/ani-cloud.php) Der Dateiname entspricht dem Value im Select Feld. Testen ob der Markup-Code geladen wird.
 . In '''animations.js''' den Code hinzufügen. Die Teile der Animation kann an über den Animationsnamen Selektieren, der automatisch als Klasse im Markup verwendet wird. Z.B.:

@@ Zeile 204: / Zeile 204: @@
 </pre>
 Die Animationsnamen entsprechen den values (ani-cloud1, ani-threeTrees, ...)
 . Die benötigten Bilder kommen in den Asset Ordner (z.B. templates/assets/animations/cloud.png)
-. Die Template Datei für das Animationsmarkup anlegen (z.B. templates/fields/animations/ani-cloud.php) Der Dateiname entspricht dem Value im Select Feld.
+. Die benötigten Bilder kommen in den '''Asset Ordner''' (z.B. templates/assets/animations/cloud.png)
 . In animations.js den Code hinzufügen
 . Im Backend die Animation auswählen
 FERTIG

← Nächstältere Version		Version vom 20. April 2024, 13:00 Uhr
Zeile 192:		Zeile 192:

	Ein weiterer Vorteil ist, dass die Assets die Animiert werden nur dann eingebunden werden, wenn wir sie auch nutzen. So können wir Sections ohne oder mit Animationen nutzen. Die Animation lässt sich beliebig auf Sections verteilen.		Ein weiterer Vorteil ist, dass die Assets die Animiert werden nur dann eingebunden werden, wenn wir sie auch nutzen. So können wir Sections ohne oder mit Animationen nutzen. Die Animation lässt sich beliebig auf Sections verteilen.
		+
		+	Im nächsten Kapitel die Schritte wenn du eine neue Animation hinzufügen möchtest.
		+	==== Neue Animation hinzufügen ====
		+	1. Im Backend das Select Feld section_animation erweitern. Z.B.
		+	<pre>
		+	1=ani-cloud\|Wolke
		+	2=ani-threeTrees\|3 Bäume
		+	3=ani-twoTrees\|2 Bäume
		+	4=ani-tree1\|Fichte
		+	5=ani-tree2\|Buche
		+	</pre>
		+	Die Animationsnamen entsprechen den values (ani-cloud1, ani-threeTrees, ...)
		+	2. Die benötigten Bilder kommen in den Asset Ordner (z.B. templates/assets/animations/cloud.png)
		+	3. Die Template Datei für das Animationsmarkup anlegen (z.B. templates/fields/animations/ani-cloud.php) Der Dateiname entspricht dem Value im Select Feld.
		+	4. In animations.js den Code hinzufügen
		+	5. Im Backend die Animation auswählen
		+
		+	FERTIG

← Nächstältere Version		Version vom 20. April 2024, 12:51 Uhr
Zeile 190:		Zeile 190:

	Dieser Aufbau ist am Anfang etwas komplexer, dafür können wir unsere Animationen gut erweitern und sind super flexibel und organisiert im ProcessWire. Für den Redakteur ist die Bedienung sehr einfach.		Dieser Aufbau ist am Anfang etwas komplexer, dafür können wir unsere Animationen gut erweitern und sind super flexibel und organisiert im ProcessWire. Für den Redakteur ist die Bedienung sehr einfach.
		+
		+	Ein weiterer Vorteil ist, dass die Assets die Animiert werden nur dann eingebunden werden, wenn wir sie auch nutzen. So können wir Sections ohne oder mit Animationen nutzen. Die Animation lässt sich beliebig auf Sections verteilen.

← Nächstältere Version		Version vom 20. April 2024, 12:48 Uhr
Zeile 187:		Zeile 187:
	</syntaxhighlight>		</syntaxhighlight>
	Zu guter Letzt müssen wir in unserer JavaScript Dateien die eigentlichen Animationen hinterlegen. In unserem Fall mit GSAP.		Zu guter Letzt müssen wir in unserer JavaScript Dateien die eigentlichen Animationen hinterlegen. In unserem Fall mit GSAP.
		+
		+	Dieser Aufbau ist am Anfang etwas komplexer, dafür können wir unsere Animationen gut erweitern und sind super flexibel und organisiert im ProcessWire. Für den Redakteur ist die Bedienung sehr einfach.

@@ Zeile 16: / Zeile 16: @@
   site/templates/fields/animations/myAnimationTemplate.php
   site/templates/scripts/animations.js
-  Box.php
+  Box.php (Optional)
-_init.php
+'''_init.php'''
 <syntaxhighlight lang="php">
 // ANIMATION CODE
@@ Zeile 84: / Zeile 84: @@
 </syntaxhighlight>
-Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Wichtig ist aber die '''renderAnimationTemplate''' Funktion. Diese holt ein Template welches im Ordner
+Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Das kann man auch selbst machen. Wichtig ist aber die '''renderAnimationTemplate''' Funktion. Diese holt ein Template welches im Ordner
   site/templates/fields/animations/meinAnimationsName.php
-liegt. Der Code kann optional gewrapt werden
+liegt.
-animations.inc
+'''animations.inc'''
 <syntaxhighlight lang="php">
 /**
@@ Zeile 119: / Zeile 119: @@
 Im Backend kann der User über ein Dropdown Feld (section_animation) eine Animation auswählen. Hat er das getan wird über $page->fp_section->section_animation der Wert des Feldes ausgelesen. Unsere Animationstemplates entsprechen diesem Namen. Wir erstellen ein Animations Objekt und übergeben diesen an Animation->renderAnimatioinTemplate(). Daraufhin wird uns der benötigte code zurückgegeben. Da das Animation Objekt auch alle Box Funktionen beinhaltet, können wir es auch gleich nutzen um einen Wrapper drumrum zu legen.
-Beispiel
 <syntaxhighlight lang="php">
 </syntaxhighlight>

@@ Zeile 1: / Zeile 1: @@
 Beispielszenarien wie man Animationen mit ProcessWire als CMS, UIKit als CSS/JS Framework und GSAP einsetzen kann.
-Beispielszenario 1 - Section Animationen mit ScrollTrigger
+== Beispiele ==
 Hier möchten wir Animationen abspielen, die beim Scrollen abgespielt werden, wenn der Benutzer die Section erreicht.
@@ Zeile 7: / Zeile 8: @@
 * Die Animationen an sich sind vorgefertigt
 * Wenn sie nicht benötigt werden soll der Code nicht eingebunden werden.
 _init.php
@@ Zeile 31: / Zeile 41: @@
 '''animations.inc''' liefert Helferfunktionen für die Layoutblocks.
@@ Zeile 39: / Zeile 46: @@
 <syntaxhighlight lang="php">
 <?php namespace ProcessWire;
   class Animation extends Box
+{
@@ Zeile 73: / Zeile 72: @@
 		$options = array_merge($defaults, $options);
 		$options['animationName'] = $animationName;
 		$animationBoxContent = page()->renderValue($options,$options['templatePath']);
@@ Zeile 84: / Zeile 82: @@
+	}
+}
 </syntaxhighlight>
-Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Wichtig ist aber die renderAnimationTemplate Funktion. Diese holt ein Template welches im Ordner site/templates/fields/animations/meinAnimationsName.php liegt. Der Code wird am Ende
+Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Wichtig ist aber die '''renderAnimationTemplate''' Funktion. Diese holt ein Template welches im Ordner
 <syntaxhighlight lang="php">
-</syntaxhighlight>
+/**
 <syntaxhighlight lang="php">
 </syntaxhighlight>