Anime.js - Versionsgeschichte

84.157.18.194 am 17. Januar 2021 um 07:38 Uhr

2021-01-17T07:38:25Z

2021-01-17T07:33:33Z

2021-01-17T07:08:50Z

Morphing SVG

2021-01-17T07:07:23Z

Morphing SVG

2021-01-17T07:06:49Z

Morphing SVG

2021-01-17T07:05:01Z

2021-01-16T15:16:09Z

2021-01-16T15:14:35Z

Quickstart

2021-01-16T06:43:45Z

Quickstart

2021-01-16T06:42:47Z

@@ Zeile 6: / Zeile 6: @@
   https://www.youtube.com/watch?v=uRDLFXxihgc - guter Einstieg
   https://codepen.io/rexjbull/pen/RwRRezq Beispiel mit Scrollmagic
 == Quickstart ==

@@ Zeile 67: / Zeile 67: @@
 var ani1 = anime({
    targets: document.querySelector("#ani1 path"),
    d: [
      "M 0,178 L 70,61 L 91,98 L 98,86 L 117,118 L 126,133 L 146,100 L 159,123 L 213,30 L 235,67 L 243,53 L 279,117",
      "M 0,178 L 73,99 L 92,120 L 98,120 L 106,133 L 134,2 L 164,178L180,120 L197,120L212,102 L224,116 L279,116"],
    easing: 'easeInOutCubic',
    duration: 1000,

@@ Zeile 62: / Zeile 62: @@
    </svg>
   </div>
-</syntahighlight>
+</syntaxhighlight>
 <syntaxhighlight lang="javascript">

← Nächstältere Version		Version vom 17. Januar 2021, 07:06 Uhr
Zeile 52:		Zeile 52:

	Im Vergleich zum GSAP Morph Plugin ist Anime.js deutlich unflexibler. Performance ist aber OK und es ist kostenfrei. Für kleine Morphs durchaus geeignet.		Im Vergleich zum GSAP Morph Plugin ist Anime.js deutlich unflexibler. Performance ist aber OK und es ist kostenfrei. Für kleine Morphs durchaus geeignet.
		+	''Beispiel''
		+	<syntaxhighlight lang="html5">
		+	<div>
		+	<button id="b1">Play</button>
		+	</div>
		+	<div id="ani1">
		+	<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="5" clip-rule="evenodd" viewBox="0 0 282 181">
		+	<path fill="none" stroke="#000" stroke-width="2" d="M2 178L70 61l21 37 7-12 19 32 9 15 20-33 13 23 54-93 22 37 8-14 36 64"/>
		+	</svg>
		+	</div>
		+	</syntahighlight>

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">

← Nächstältere Version		Version vom 17. Januar 2021, 07:05 Uhr
Zeile 42:		Zeile 42:
	== Staggering ==		== Staggering ==
	https://animejs.com/documentation/#staggeringBasics		https://animejs.com/documentation/#staggeringBasics
		+
		+
		+	== Morphing SVG ==
		+	https://codepen.io/kholja/pen/KKgbBQe
		+	Anime.js kann im Prinzip alle Werte in Bereichen verändern. Das funktioniert auch mit dem d Attribut in SVG Path Elementen oder Polygonen etc. Dabei sind ein paar Vorarbeiten notwendig:
		+	* Punktanzahl der Pfade sollte gleich sein.
		+	* Bei Pfaden kann es bei relativen Pfadangaben Probleme geben
		+	* Bei Punkten die mit H oder V (Horizontal, Vertikal) angegeben sind gibt es nur eine statt zwei Koordinaten. Das kann dazu führen dass unterschiedliche viele Werte entstehen.
		+
		+	Im Vergleich zum GSAP Morph Plugin ist Anime.js deutlich unflexibler. Performance ist aber OK und es ist kostenfrei. Für kleine Morphs durchaus geeignet.
		+
		+	<syntaxhighlight lang="javascript">
		+	var ani1 = anime({
		+	targets: document.querySelector("#ani1 path"),
		+	d: [
		+	"M 0,178 L 70,61 L 91,98 L 98,86 L 117,118 L 126,133 L 146,100 L 159,123 L 213,30 L 235,67 L 243,53 L 279,117",
		+	"M 0,178 L 73,99 L 92,120 L 98,120 L 106,133 L 134,2 L 164,178L180,120 L197,120L212,102 L224,116 L279,116"],
		+	easing: 'easeInOutCubic',
		+	duration: 1000,
		+	autoplay: false,
		+	loop: true,
		+	direction: 'alternate',
		+	delay: 1000,
		+	endDelay:500,
		+	});
		+
		+	document.querySelector('#b1').onclick = ani1.play;
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 16. Januar 2021, 15:16 Uhr
Zeile 39:		Zeile 39:
	* Animieren von '''JavaScript Objekten''' (mit mindestens einem Zahlenwert)		* Animieren von '''JavaScript Objekten''' (mit mindestens einem Zahlenwert)
	* Animieren von '''DOM Attributen'''		* Animieren von '''DOM Attributen'''
		+
		+	== Staggering ==
		+	https://animejs.com/documentation/#staggeringBasics

← Nächstältere Version		Version vom 16. Januar 2021, 15:14 Uhr
Zeile 34:		Zeile 34:
	});		});
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	=== Besonderheiten ===
		+	Anime.js kann einige besondere Dinge:
		+	* Animieren von '''JavaScript Objekten''' (mit mindestens einem Zahlenwert)
		+	* Animieren von '''DOM Attributen'''

@@ Zeile 11: / Zeile 11: @@
 * create anime object
 anime({});
-* target (CSS selector)
+* pass configuration object
-* css properties die animiert werden sollen
+** target (CSS selector)
 <syntaxhighlight lang="javascript">
 anime({