From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../how_to/examinando_eventos_escuta/index.html | 26 --- .../how_to/examine_event_listeners/index.html | 26 +++ .../trabalho_com_anima\303\247oes/index.html" | 175 --------------------- .../how_to/work_with_animations/index.html | 175 +++++++++++++++++++++ 4 files changed, 201 insertions(+), 201 deletions(-) delete mode 100644 files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html delete mode 100644 "files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" create mode 100644 files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html (limited to 'files/pt-br/tools/page_inspector') diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html deleted file mode 100644 index b1c8414a5b..0000000000 --- a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Examinando Eventos de Escuta -slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta -translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners ---- -
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

- -

- -

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

- -

Cada linha contém:

- - diff --git a/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..b1c8414a5b --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,26 @@ +--- +title: Examinando Eventos de Escuta +slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

+ +

+ +

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

+ +

Cada linha contém:

+ + diff --git "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" deleted file mode 100644 index 8d2d788d50..0000000000 --- "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Trabalho Com Animações -slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes -translation_of: Tools/Page_Inspector/How_to/Work_with_animations ---- -
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

- - - -

Animation inspector

- -
-

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

-
- -

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

- -

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

- -

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

- -

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

- -

These animations are made using the Web Animations API.

- -

Let's use the animation inspector to see what's going on in this example.

- -
    -
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. -
  2. Make sure the selected element is the <div class="channel">
    3. -
  3. Switch over to the "Animations" tab
    4. -
  4. Play the animation
    5. -
- -

{{EmbedYouTube("OYkFARSgQB8")}}

- -

Let's take a closer look at the contents of the animation inspector here:

- -

- -

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

- -

Animation bars

- -

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

- - - -

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

- -

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

- -

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

- -

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

- - - -

- -

Information about the animated element

- -

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

- -

{{EmbedYouTube("AvICwiWpYiE")}}

- -

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

- -

Animation details

- -

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

- -

- -

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

- -

- -

This is essentially a visual representation of the animation's keyframes:

- -
var iconKeyframeSet = [
-  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
-  {                          filter: 'grayscale(100%)', offset: 0.333 },
-  { transform: 'scale(1.5)',                            offset: 0.666 },
-  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
-];
- -

Application to the example

- -

Applying all this to our example, we can see that:

- - - -

Further information about animation compositing

- -

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

- - - -

- -

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

- - - -

- -

Animation playback

- -

At the top of the animation inspector:

- - - -

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

- -

{{EmbedYouTube("Xo6rUf0kGyM")}}

- -

Edit @keyframes

- -

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

- -

{{EmbedYouTube("mDHtLK88ZW4")}}

- -

Edit timing functions

- -

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

- -

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

- -

{{EmbedYouTube("GW5-R2ewaqA")}}

- -

This feature uses open source code from Lea Verou’s cubic-bezier.com.

- -

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

- -

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html b/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..8d2d788d50 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,175 @@ +--- +title: Trabalho Com Animações +slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

+ + + +

Animation inspector

+ +
+

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

+
+ +

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

Let's use the animation inspector to see what's going on in this example.

+ +
    +
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. +
  2. Make sure the selected element is the <div class="channel">
    3. +
  3. Switch over to the "Animations" tab
    4. +
  4. Play the animation
    5. +
+ +

{{EmbedYouTube("OYkFARSgQB8")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ + + +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

{{EmbedYouTube("AvICwiWpYiE")}}

+ +

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ + + +

Further information about animation compositing

+ +

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ + + +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

+ + + +

+ +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

+ +

{{EmbedYouTube("Xo6rUf0kGyM")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

-- cgit v1.2.3-54-g00ecf