Motion Paths Overview - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  37.8K views 228 likes 5 dislikes   21 Jun 2017
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Ich heiße Lucas und bin Entwickler
Mi chiamo Lucas e sono un ingegnere
für Google Web Designer.
di Google Web Designer.
In diesem Video zeige ich Ihnen, wie Sie mit Bewegungspfaden
In questo video mostrerò come animare oggetti lungo curve
Objekte animieren, die sich an Kurven entlangbewegen.
usando i percorsi di animazione.
Wenn Sie bisher in Google Web Designer
In precedenza, per animare
ein Objekt bewegen wollten,
la posizione di un oggetto in Google Web Designer
war dies nur entlang einer geraden Linie möglich, so wie hier.
si poteva far spostare l'oggetto soltanto lungo una linea retta, in questo modo.
Jetzt können Sie Objekte auch entlang von Kurven animieren.
Ora puoi farlo spostare lungo una curva
Dazu verschieben Sie einfach einen beliebigen Punkt auf der Linie.
semplicemente trascinando un punto qualsiasi della linea.
Die Kurve, die sich ergibt, wird als Bewegungspfad bezeichnet.
La curva ottenuta si chiama percorso di animazione.
Sie können die Form des Bewegungspfads verändern.
Puoi modificare la forma del percorso di animazione
Verschieben Sie dazu einen beliebigen Punkt an der Innenseite der Kurve
spostando un punto qualsiasi nella parte interna della curva
oder einen der Endpunkte.
o spostando uno dei punti finali.
Sie können das Objekt auch auf den Bewegungspfad ausrichten,
Puoi anche far spostare l'oggetto in modo che segua il percorso di animazione.
während es sich bewegt, und zwar im Eigenschaftenbereich.
A tale scopo, vai alla sezione Percorso animazione del pannello Proprietà
Klicken Sie im Bereich "Bewegungspfad" einfach die Option "Auf den Pfad ausrichten" an.
e seleziona Orientamento in base al percorso di animazione.
Das sieht dann so aus.
Ecco il risultato.
Und hier ist die fertige Animation.
E questa è l'animazione finale.
Wenn Sie den Bewegungspfad genauer steuern möchten,
Per definire ancora meglio la forma del percorso di animazione
verwenden Sie das Bewegungspfad-Tool.
puoi usare lo strumento Percorso animazione.
Damit können Sie die Kurve nicht nur direkt verschieben,
Questo strumento ti consente non solo di spostare direttamente la curva
sondern auch die Tangenten steuern.
ma anche di spostare i controlli della tangente.
Und wenn Sie den Modus des Tools ändern,
E cambiando la modalità dello strumento
können Sie Steuerungspunkte einfügen – in etwa so.
puoi inserire punti di controllo come questo.
Oder Sie können Steuerungspunkte so löschen.
Puoi anche eliminare i punti di controllo... così.
Wenn Sie das Ende einer Tangente verschieben,
Per impostazione predefinita, quando sposti un controllo della tangente
wird das gegenüberliegende Ende angepasst,
si sposta anche quello opposto per mantenere
damit die Kurve natürlich verläuft.
l'uniformità della curva.
Wenn Sie das nicht möchten
Se non desideri usare questo comportamento
und der Kurve eine Ecke hinzufügen wollen,
e vuoi aggiungere un angolo alla curva
halten Sie unter Linux oder Windows
puoi tenere premuto il tasto ALT
die Alt-Taste gedrückt.
su Linux o Windows oppure il tasto CTRL
Auf einem Mac hingegen die Ctrl-Taste.
su Mac.
Einen ähnlichen Effekt erzielen Sie, wenn Sie auf einen
Puoi ottenere un effetto simile facendo doppio clic
Steuerungspunkt klicken.
su un punto di controllo.
Dadurch wird die Tangente auf "null" gesetzt.
La lunghezza dei punti di manipolazione della tangente viene ridotta a zero.
Wenn Sie noch einmal doppelt klicken, wird sie wieder verlängert.
Dopo puoi fare ancora doppio clic per estendere di nuovo i punti di manipolazione.
Wenn Sie eine Bewegungsschleife erstellen möchten,
Infine, se vuoi creare un percorso di animazione a ripetizione continua
ziehen Sie einfach den Endpunkt zum Startpunkt hinüber
puoi trascinare il punto finale verso quello iniziale
oder umgekehrt.
o viceversa.
Die Punkte werden verbunden,
I punti verranno uniti.
sodass Sie eine nahtlose Schleife des Bewegungspfads erhalten.
Ecco un percorso di animazione uniforme a ripetizione.
Das Timing einer Animation lässt sich
Per regolare la durata dell'animazione
mithilfe der Zeitachse steuern.
si può usare la sequenza temporale.
Um Ihnen dies zu zeigen, kehre ich
Per fare una dimostrazione
zur einfachen Version des Bewegungspfads zurück.
userò una versione più semplice di questo percorso cioè
Der "Hügel" eignet sich gut.
solo un piccolo dosso.
Ich passe einfach die Tangenten hier an
Dunque, regoliamo queste tangenti
und erstelle wieder diesen kleinen Hügel.
in modo da creare una collinetta... così.
Perfekt.
OK.
Sieht gut aus.
Perfetto.
Momentan liegt der zweite Key auf der Zeitachse bei zwei Sekunden.
Ora il secondo fotogramma chiave nella sequenza temporale è a due secondi.
Die Animation wird also in zwei Sekunden abgespielt.
Quindi per completare l'animazione ci vogliono due secondi.
Wenn ich die Animation verlangsamen möchte, verschiebe ich den Key
Posso rallentare l'animazione spostando ad esempio il fotogramma chiave
auf drei Sekunden.
fino a tre secondi.
Jetzt bewegt sich das Objekt entlang derselben Kurve,
Ora l'oggetto si sposta lungo la stessa curva
allerdings langsamer.
ma più lentamente.
Sie können das Objekt auch beschleunigen oder verlangsamen.
È anche possibile aggiungere accelerazione e decelerazione
Dazu verändern Sie einfach die Easing-Funktion zwischen den Keys.
cambiando l'easing tra i fotogrammi chiave.
Ich suche also hier eine Easing-Funktion aus,
Sceglierò qui una funzione di easing
durch die das Objekt am Ende des Pfads
che rallenta gradualmente l'oggetto fino a fermarlo
langsam zum Stehen kommt.
alla fine del percorso.
Wenn Sie mehrere Keys verwenden, erzielen Sie komplexere Effekte.
È possibile creare effetti più complessi usando diversi fotogrammi chiave.
Ich kann hier beispielsweise einen zweiten Key einfügen
Aggiungo ad esempio un secondo fotogramma chiave qui
und das Objekt ein wenig verschieben.
e sposto l'oggetto un po' più in là.
Dann passe ich noch den Verlauf des Pfads an.
Poi regolo il percorso per renderlo uniforme.
Und schließlich ändere ich die Easing-Funktion am Anfang,
Infine cambio la funzione di easing iniziale
sodass das Auto aus dem Stillstand beschleunigt.
per far accelerare l'auto da un punto di arresto.
Durch diese Änderungen
Con questi cambiamenti
beschleunigt das Auto zuerst über den Hügel
ora l'auto accelera sulla collina
und bewegt sich dann gleichbleibend schnell.
per poi proseguire a velocità costante.
Bewegungspfade werden mithilfe der X- und Y-Verschiebung animiert.
Per creare i percorsi di animazione si usa la traslazione di x e y.
Wenn ich also die Verschiebungen bearbeite,
Modificando la traslazione di x e y
ändere ich den Bewegungspfad.
si modifica il percorso di animazione.
Wenn ich beispielsweise hier den Wert für X ändere,
Ad esempio, se vado qui e imposto un valore diverso per x
sehe ich einen Key in der Zeitachse
vengono creati un fotogramma chiave nella sequenza temporale
und einen neuen Steuerungspunkt im Bewegungspfad.
e un nuovo punto di controllo sul percorso di animazione.
Wenn ich dann den Wert für Y bearbeite oder im Auswahltool
Se poi modifico il valore y o attivo lo strumento Selezione
das Objekt direkt verschiebe, dann bewegt sich der Steuerungspunkt.
e sposto direttamente l'oggetto, il punto di controllo si sposta.
Die übrigen Bearbeitungsmodi wie
Tutti gli altri canali di trasformazione
Z-Verschiebung, Rotation und Skalierung
come quelli che vedi qui, traslazione, rotazione e scala
können unabhängig vom Bewegungspfad
possono essere animati in modo separato
animiert werden.
dal percorso di animazione.
Das kann ich Ihnen gern zeigen.
Per mostrartelo
Dazu gehe ich zurück zum ursprünglichen Verlauf des Pfads.
torno alla forma originale del percorso
Ich möchte, dass das Auto schrumpft, wenn es über den Hügel fährt.
su cui desidero ridurre le dimensioni dell'auto mentre si sposta sulla collina.
Das erreiche ich so:
Ciò che posso fare è
Ich gehe zum Ende der Animation.
andare alla fine dell'animazione.
Dann verkleinere ich das Auto mithilfe des Auswahltools.
Poi posso rimpicciolire l'auto con lo strumento Selezione.
Damit die Animation
Per far durare l'animazione
über die gesamte verfügbare Dauer abgespielt wird,
per l'intero intervallo di tempo
entferne ich einfach den mittleren Skalierungs-Key.
rimuoverò soltanto il fotogramma chiave centrale di ridimensionamento.
Wenn ich die Animation jetzt abspiele,
Ora se torno indietro e riproduco l'animazione
erhalte ich das gleiche Ergebnis wie vorher.
vedo che è sempre uguale
Allerdings schrumpft das Auto jetzt bei der Fahrt über den Hügel.
ma questa volta l'auto si rimpicciolisce mentre si sposta sulla collina.
Zum Schluss möchte ich noch zeigen,
Vorrei concludere parlando un po'
wie wir Bewegungspfade intern nutzen.
della rappresentazione interna dei percorsi di animazione.
Wie alle mit Google Web Designer entwickelte Animationen
Come tutte le altre animazioni generate in Google Web Designer
werden auch Bewegungspfade mit CSS erstellt.
i percorsi di animazione vengono interamente realizzati usando CSS.
Damit lassen sich Bewegungspfade allerdings nicht genau
Non è possibile usare CSS per rappresentare esattamente
nachbilden.
un percorso di animazione.
Es handelt sich eher um einen Optimierungsprozess,
Quindi usiamo una procedura di ottimizzazione
der sich dem Bewegungspfad auf Subpixel-Genauigkeit annähert.
che approssima la precisione dei percorsi di animazione ai sottopixel
Damit wird die Menge an CSS, die generiert werden muss,
e riduce al minimo la quantità di codice CSS
verringert, und somit auch der benötigte Speicherplatz.
generata per ridurre il più possibile il footprint di archiviazione.
Im Eigenschaftenbereich sehen Sie
Nel pannello Proprietà
die Toleranzbereiche für die Optimierung.
puoi vedere le tolleranze che usiamo per l'ottimizzazione.
Wir sind nie mehr als ein halbes Pixel von der Idealposition entfernt
Rimaniamo sempre entro metà di un pixel della posizione ideale
und nie mehr als ein Grad vom Idealwinkel.
ed entro 1 grado dell'angolo ideale.
Bei der Erstellungszeit erhalten wir die Interaktivität,
Per mantenere l'interattività in fase di creazione
mithilfe des Optimierungstools, das wir so einstellen,
quando eseguiamo lo strumento di ottimizzazione
dass der Vorgang schnell abgeschlossen wird.
usiamo impostazioni che consentono di terminare rapidamente l'operazione
Dabei wird allerding mehr CSS genutzt, als unbedingt notwendig.
ma magari usando più CSS di quanto ne sia strettamente necessario.
Wenn Sie Speicherplatz sparen möchten, können Sie
Se vuoi ottimizzare lo spazio
den Auflöser noch einmal mit Einstellungen ausführen,
puoi eseguire di nuovo il risolutore con impostazioni
die den Vorgang etwas verlangsamen,
che richiedono più tempo per il completamento
aber weniger CSS generieren.
ma che in genere migliorano la quantità di CSS
Dazu klicken Sie auf die Schaltfläche "Kurve optimieren".
generata facendo clic su questo pulsante Ottimizza curva.
Hier sehen Sie, dass die geschätzte komprimierte Größe zurzeit 346 Byte beträgt.
Al momento, le dimensioni compresse stimate sono pari a 346 byte.
Wenn ich auf diese Schaltfläche klicke, verringert sie sich auf 300 Byte.
Se faccio clic su questo pulsante si riducono a 300 byte.
So viel zum Thema Bewegungspfade.
È tutto sui percorsi di animazione.
Vielen Dank für Ihre Aufmerksamkeit.
Grazie per l'attenzione.
Similar videos:

Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201828% match


Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201527% match


01-Jason Maranto Painter 2015 Particle Flow Flare Brush
PainterTutorials
14.7K views 37 likes 1 dislikes 12 Aug 201427% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201927% match


Timeline Update Overview
Google Web Designer
13.6K views 42 likes 3 dislikes 04 Aug 201427% match


Google Earth Studio - Easing Animations
Google Earth
57.6K views 289 likes 5 dislikes 08 Mar 201926% match



Custom Motion Effects in VideoStudio Pro X6
Corel VideoStudio
95.3K views 120 likes 9 dislikes 05 Mar 201326% match

Camtasia 9/3: Animationen & Effekte
TechSmith Germany
8.1K views 76 likes 5 dislikes 02 Nov 201626% match

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201626% match


Gradient Editing Tool
Google Web Designer
17.8K views 38 likes 7 dislikes 15 Jan 201426% match


11-1 Critical Concepts: Advanced Editing; Insert, Ripple Delete, Overwrite & Replace in LumaFusion
Create with LumaTouch
7.1K views 85 likes 4 dislikes 16 Jan 202026% match

Tutorial: how to use embellish knit + 3 creative ideas
Vivi con Letizia
11K views 570 likes 8 dislikes 13 Jun 202026% match

Capture One 20 | Healing and Cloning
Capture One
24.6K views 362 likes 3 dislikes 18 May 202025% match

Camtasia 9/3: Anmerkungen, Übergangs- und Verhaltenseffekte
TechSmith Germany
7K views 45 likes 5 dislikes 11 Oct 201625% match

Camtasia: Transitions, Annotations & Behaviors
Camtasia
115.6K views 584 likes 83 dislikes 11 Oct 201625% match

How to manage all your photos with Lightroom, Part 5 of 6
LearnAdobeCC
115.8K views 0 likes 0 dislikes 24 Sep 201325% match

Capture One 20 Tutorials | Essential adjustments
Capture One
33.6K views 284 likes 3 dislikes 04 Dec 201925% match

Create Light Rays In 5 EASY Steps! | Photoshop Tutorial
Photoshop Training Channel
22.8K views 1.8K likes 15 dislikes 26 Aug 202025% match



Settings Privacy About Contact Donate