Google Web Designer - Animation Updates Google Web Designer French English

Google Web Designer - Animation UpdatesYouTube↗ IA↗(long shot)
Science & Technology 53.6K views 136 likes 9 dislikes 17 Nov 2015

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

Je m'appelle Lucas, et je suis ingénieur

LUCAS: My name is Lucas, and I'm an engineer on Google Web

Google Web Designer.

Dans cette vidéo, je vais vous montrer quelques améliorations

In this video, I'm going to show some improvements we've

que nous avons apportées à nos outils d'animation.

made to our animation tools.

Lors du réglage de la position d'un élément,

When setting an element's position,

on utilise souvent les valeurs "Haut" et "Gauche" pour créer une mise en page.

it's common to use left and top if you're creating a layout.

Dans le cas d'une animation,

But if you're creating an animation,

il est préférable d'avoir recours à une translation,

it's usually preferred to use translation instead

et ce, pour plusieurs raisons.

and this is for a couple of reasons.

Tout d'abord, la translation fonctionne mieux,

First of all, translation performs better,

avec une fréquence d'images beaucoup plus élevée,

animating at much higher frame rates than left and top,

en particulier sur les appareils mobiles.

especially on mobile devices.

Deuxièmement, les valeurs "Gauche" et "Haut"

Secondly, left and top values are

sont arrondies à l'entier le plus proche au moment du rendu,

rounded to the nearest integer at render

ce qui peut causer une animation saccadée

time, which can lead to jittering or jaggedness

ou irrégulière.

Je vais vous montrer un exemple simple.

To demonstrate that, let me show you a simple example.

Voici deux éléments se déplaçant

Here we have two elements that each

de 200 pixels vers la droite et de 10 pixels vers le bas.

move 200 pixels to the right and 10 pixels down.

Les valeurs "Haut" et "Gauche" sont utilisées pour l'élément du haut,

The upper element uses left and top,

et la translation pour l'élément du bas.

and the lower element uses translation.

Pour mieux voir le résultat, faisons un zoom avant.

To better see what's going on, let's zoom in.

Je fais un zoom de 300 %

I'll move in by a factor of three

et je recentre les éléments.

and re-center the elements.

L'animation avec les valeurs "Haut" et "Gauche" se déplace

You can see that the left top animation moves downwards

vers le bas de manière saccadée,

in a jagged, stair-step-like motion,

alors que l'animation par translation est fluide.

whereas the translation animation is smooth throughout.

Nous avons modifié le comportement par défaut de Web Designer

In light of this, we have changed Web Designer's default

pour simplifier la création d'animations par translation.

behavior to make it easier to create translation animations.

Nous avons notamment modifié l'outil de sélection.

In particular, we have changed the Selection tool,

Lorsque vous positionnez un élément,

so by default when you position an element,

nous modifions par défaut les valeurs "Haut" et "Gauche"

we apply the changes to left and top

si vous modifiez une mise en page,

if you're editing a layout, and to translation

et la translation si vous modifiez une animation.

if you're editing an animation.

Je vous montre comment cela fonctionne.

Let me show you how this works.

Je créé un fichier et j'ajoute une image.

I'll start with a new file, and I will add an image.

Si je déplace l'élément avec l'outil de sélection,

Now, if I just move the element with the selection tool,

les modifications sont appliquées aux valeurs "Gauche" et "Haut".

all the changes are applied to left and top.

Dans l'inspecteur de propriétés,

In the Property Inspector, if you see the translation

toutes les valeurs de translation sont égales à zéro.

channels, you'll notice that they are all still zero.

Cependant, si j'ajoute une image clé et déplace l'élément,

However, if I then add a key frame and move the element,

les valeurs de translation sont modifiées.

this time the changes are applied to translation.

Auparavant, il fallait pour cela

Previously, to do this you would have

accéder à l'outil de translation.

had to first switch to the translation tool,

Maintenant, c'est possible au sein même

but now it can be done without ever leaving the selection

de l'outil de sélection.

Voici l'animation que nous avons créée.

So here's the animation that we created.

Voici la vue Code.

And in code view,

Zoomons un peu.

I'll zoom in here so it's more readable,

En vue Code, la règle de style n'utilise que les valeurs Haut/Gauche,

In code view, you can see that the style rule only

et celle des images clés utilise la translation 3D.

uses left and top but the key frames rule uses translate 3D.

Si le comportement par défaut ne vous convient pas,

If you don't want the default behavior,

vous pouvez également configurer l'outil de sélection

you can also configure the selection tool

pour que les modifications s'appliquent toujours aux valeurs "Gauche" et "Haut"

to always apply position changes to left and top

ou à la translation.

or to always apply them to translation.

Nous avons donc amélioré l'animation de la position,

In addition to improving how we animate position,

mais également l'animation de la taille.

we have also made changes to how we animate size.

Web Designer accepte désormais les valeurs de mise à l'échelle.

First of all, Web Designer now supports scale channels.

Dans l'inspecteur de propriétés, une nouvelle ligne concerne

In the Property Inspector, there's a new row for x, y,

les échelles x, y et z.

Je peux donc définir une échelle en x, en y et en z.

So I can scale in x, and y, and z.

Pour une mise à l'échelle uniforme dans toutes les directions,

If you want it to scale uniformly in all directions,

cliquez sur le bouton de verrouillage sur la gauche.

you can click the lock button on the left

La mise à l'échelle d'une dimension applique une échelle similaire

and then scaling one channel will make a similar scale

à toutes les autres.

to all channels.

Comme pour le traitement de la position,

In analogy to how we treat position,

lorsque vous redimensionnez un élément avec l'outil de sélection,

if you resize an element using the selection tool,

nous appliquons ces changements à la largeur et à la hauteur

we apply those changes to width and height

si vous modifiez la taille de l'élément statique.

if you're changing the element's static size,

En revanche, si vous créez une animation basée sur la taille,

but if you're creating an animation using size,

nous appliquons alors ces changements à l'échelle.

we instead apply those changes to scale.

Voici l'animation.

So here's the animation.

La vue Code montre encore que la règle de style

And in code view you can once again

n'utilise que les valeurs "Gauche", "Haut", "Largeur" et "Hauteur".

see that the style rule only uses left, top, width, and height,

Celle des images clés utilise la mise à l'échelle et la translation 3D.

but the key frames rule uses scale 3D and translate 3D.

Enfin, parlons de deux améliorations plus simples,

Finally, I want to talk about two simpler but still useful

mais bien utiles.

improvements that we've made.

Premièrement, il est désormais plus facile de créer des animations

First of all, it is now easier to create animations

pour faire pivoter un élément à plusieurs reprises.

where an element rotates through multiple revolutions.

Je vais créer une animation simple.

So I will create a simple animation here.

Elle dure deux secondes.

It's two seconds in duration.

L'élément traverse l'écran.

The element moves across the screen.

Pour le faire pivoter deux fois,

And to make it rotate twice, I'll

je définis 720° sur la deuxième image clé.

simply set 720 degrees on the second key frame.

Maintenant, lorsque je lance la lecture,

And now when I play it back, we see

l'élément effectue deux tours complets.

that it goes through two full revolutions.

Auparavant, il aurait fallu plusieurs images clés,

Previously, this would have required multiple key frames

car celles-ci ne pouvaient pas être espacées de plus de 180°.

because key frames could only be, at most, 180 degrees apart,

Toute valeur est désormais acceptée.

but now any value is legal.

Deuxièmement, Web Designer permettait auparavant

Finally, in the past, Web Designer

de lire une animation une fois ou indéfiniment.

let you play either an animation once or to loop it

Désormais, vous pouvez

indefinitely, but now you can also

répéter une animation autant que vous le souhaitez.

have an animation loop a fixed number of times.

Par exemple, je vais créer une animation simple

So for example, I'll create a simple animation where

dans laquelle cette voiture rebondit.

this car bounces up and down.

Dans le mode avancé de la timeline,

And now in the advanced mode of the timeline,

je sélectionne les options de répétition,

I will select the looping options

et je répète l'animation trois fois.

and have it loop three times.

Lorsque je lance la lecture,

And if I play it back, sure enough,

la voiture rebondit bien trois fois.

we see that it bounces three times.

C'est tout pour les améliorations

That's all I wanted to show you about our animation

apportées à l'animation.

Merci de votre attention.

Thank you for watching.

Similar videos:

Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 2015100% match

Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 2015100% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 2014100% match

Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 2015100% match

A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 2014100% match

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

Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201675% match

Ad Validator - Google Web Designer
Google Web Designer
4.8K views 16 likes 1 dislikes 07 Sep 201860% match

Hiding and Locking Timeline Layers - Google Web Designer
Google Web Designer
5K views 10 likes 6 dislikes 16 Nov 201660% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201658% match

Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201845% match

Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201843% match

Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201943% match

Easing functions (Step start/end) - Google Web Designer
Google Web Designer
25.5K views 43 likes 5 dislikes 16 Nov 201642% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201841% match

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

Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201838% match

Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201838% match

Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201835% match

Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201835% match

Timeline Enhancements - Google Web Designer
Google Web Designer
13.2K views 68 likes 3 dislikes 21 Jun 201735% match

Google Web Designer Certification - 1. Basics
Google Web Designer
7.2K views 10 likes 0 dislikes 29 Jun 201535% match

Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202035% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201835% match

Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202035% match

Template improvements - Google Web Designer
Google Web Designer
8.9K views 41 likes 2 dislikes 21 Jun 201735% match

Publish to Display & Video 360 - Google Web Designer
Google Web Designer
7.1K views 19 likes 3 dislikes 28 Nov 201833% match

Zoom for Advanced Timeline - Google Web Designer
Google Web Designer
10.4K views 15 likes 4 dislikes 16 Nov 201632% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201732% match

Google Web Designer Asset Library Integration
Google Web Designer
10.7K views 15 likes 2 dislikes 13 Apr 201532% match

Settings Privacy About Contact Donate