Animações com storyboardStoryboarded animations

As animações com storyboard não são apenas animações no sentido visual.Storyboarded animations are not just animations in the visual sense. Uma animação de storyboard é uma maneira de alterar o valor de uma propriedade de dependência como uma função de tempo.A storyboarded animation is a way to change the value of a dependency property as a function of time. Um dos principais motivos pelos quais você pode precisar de uma animação com storyboard que não faça parte da Biblioteca de Animação é para definir o estado visual de um controle, como parte de um modelo de controle ou de uma definição de página.One of the main reasons you might need a storyboarded animation that's not from the animation library is to define the visual state for a control, as part of a control template or page definition.

Diferenças com o Silverlight e WPFDifferences with Silverlight and WPF

Se você conhece o Microsoft Silverlight ou o WPF (Windows Presentation Foundation), leia esta seção; caso contrário, pode ignorá-la.If you are familiar with Microsoft Silverlight or Windows Presentation Foundation (WPF), read this section; otherwise, you can skip it.

Em geral, a criação de animações com storyboard em um aplicativo do Windows Runtime é como o Silverlight ou o WPF.In general, creating storyboarded animations in a Windows Runtime app is like Silverlight or WPF. Porém, existem muitas diferenças importantes:But there are a number of important differences:

  • As animações com storyboard não são a única maneira de animar visualmente uma interface do usuário, e não são necessariamente a maneira mais fácil de os desenvolvedores de aplicativos fazerem isso.Storyboarded animations are not the only way to visually animate a UI, nor are they necessarily the easiest way for app developers to do so. Em vez de usar animações com storyboard, geralmente, é uma prática de design mais adequada usar animações de tema e animações de transição.Rather than using storyboarded animations it's often a better design practice to use theme animations and transition animations. Elas podem rapidamente criar animações da interface do usuário recomendadas sem entrar nas complexidades da segmentação da propriedade de animação.These can quickly create recommended UI animations without getting into the intricacies of animation property targeting. Para obter mais informações, consulte Visão geral das animações.For more info see Animations overview.
  • No Windows Runtime, muitos controles XAML incluem animações de tema e de transição como parte de seu funcionamento interno.In the Windows Runtime, many XAML controls include theme animations and transition animations as part of their built-in behavior. Em grande parte, os controles do WPF e do Silverlight não tinham um comportamento de animação padrão.For the most part, WPF and Silverlight controls didn't have a default animation behavior.
  • Nem todas as animações personalizadas que você cria podem ser executadas por padrão em um aplicativo do Windows Runtime quando o sistema de animação determina que elas podem comprometer o desempenho da sua interface do usuário.Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. As animações nas quais o sistema determina que pode haver um impacto no desempenho são denominadas animações dependentes.Animations where the system determines there could be a performance impact are called dependent animations. É dependente porque a sincronia de sua animação está funcionando diretamente em relação ao thread de interface do usuário, que é onde a entrada do usuário ativo e outras atualizações também estão tentando aplicar as alterações de tempo de execução para a interface do usuário.It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. Uma animação dependente que está consumindo muitos recursos de sistema no thread de interface do usuário pode fazer com que o aplicativo pareça não responder em determinadas situações.A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations. Quando sua animação gera uma alteração de layout ou tem a capacidade de afetar o desempenho no thread de interface do usuário, você geralmente precisa habilitá-la explicitamente para que ela seja executada.If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. É para isso que serve a propriedade EnableDependentAnimation em classes de animação específicas.That's what the EnableDependentAnimation property on specific animation classes is for. Para obter mais informações, consulte Animações dependentes e independentes .See Dependent and independent animations for more info.
  • No momento, não há suporte a funções de easing personalizadas no Windows Runtime.Custom easing functions are not currently supported in the Windows Runtime.

Definindo animações de storyboardDefining storyboarded animations

Uma animação de storyboard é uma maneira de alterar o valor de uma propriedade de dependência como uma função de tempo.A storyboarded animation is a way to change the value of a dependency property as a function of time. A propriedade que você está animando nem sempre é uma propriedade que afeta diretamente a interface do usuário do seu aplicativo.The property you are animating is not always a property that directly affects the UI of your app. Porém, como o XAML envolve a definição da interface de um aplicativo, geralmente, são propriedades relacionadas à interface do usuário que são animadas.But since XAML is about defining UI for an app, usually it is a UI-related property you are animating. Por exemplo, é possível animar o ângulo de um RotateTransform ou o valor de cor da tela de fundo de um botão.For example, you can animate the angle of a RotateTransform, or the color value of a button's background.

Um dos principais motivos pelos quais você pode definir uma animação de storyboard é se for um autor de controle ou se estiver remodelando um controle e definindo estados visuais.One of the main reasons you might be defining a storyboarded animation is if you are a control author or are re-templating a control, and you are defining visual states. Para obter mais informações, consulte Animações de storyboard para estados visuais.For more info, see Storyboarded animations for visual states.

Tanto se você estiver definindo estados visuais ou uma animação personalizada para um aplicativo, os conceitos e as APIs de animações de storyboard descritos neste tópico geralmente são aplicáveis a ambos.Whether you are defining visual states or a custom animation for an app, the concepts and APIs for storyboarded animations that are described in this topic mostly apply to either.

Para ser animada, a propriedade à qual você está direcionando uma animação de storyboard deve ser uma propriedade de dependência.In order to be animated, the property you are targeting with a storyboarded animation must be a dependency property. Uma propriedade de dependência é um recurso essencial da implementação de XAML do Windows Runtime.A dependency property is a key feature of the Windows Runtime XAML implementation. As propriedades que podem ser criadas dos elementos mais comuns da interface do usuário geralmente são implementadas como propriedades de dependência, de modo que você pode animá-las, aplicar valores vinculados a dados ou aplicar um Style e direcionar um Setter à propriedade.The writeable properties of most common UI elements are typically implemented as dependency properties, so that you can animate them, apply data-bound values, or apply a Style and target the property with a Setter. Para saber mais sobre como as propriedades de dependência funcionam, consulte Visão geral das propriedades de dependência.For more info about how dependency properties work, see Dependency properties overview.

Em geral, uma animação com storyboard é definida através da criação de XAML.Most of the time, you define a storyboarded animation by writing XAML. Se você usar uma ferramenta como o Microsoft Visual Studio, ele criará o XAML para você.If you use a tool such as Microsoft Visual Studio, it will produce the XAML for you. Também é possível definir uma animação com storyboard usando código, mas é menos comum.It's possible to define a storyboarded animation using code too, but that's less common.

Vejamos um exemplo simples.Let's look at a simple example. Neste XAML de exemplo, a propriedade Opacity é animada em um objeto Rectangle específico.In this XAML example, the Opacity property is animated on a particular Rectangle object.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identificando o objeto a ser animadoIdentifying the object to animate

No exemplo anterior, o storyboard animou a propriedade Opacity de um Rectangle.In the previous example, the storyboard was animating the Opacity property of a Rectangle. As animações não são declaradas no objeto propriamente dito.You don't declare the animations on the object itself. Em vez disso, isso é feito na definição da animação de um storyboard.Instead, you do this within the animation definition of a storyboard. Normalmente, os storyboards são definidos no XAML que não está nas proximidades imediatas da definição da interface do usuário XAML do objeto a ser animado.Storyboards are usually defined in XAML that's not in the immediate vicinity of the XAML UI definition of the object to animate. Em vez disso, eles geralmente são configurados como um recurso XAML.Instead, they're usually set up as a XAML resource.

Para conectar uma animação a um destino, você deve referenciar o destino por seu nome de programação de identificação.To connect an animation to a target, you reference the target by its identifying programming name. Sempre aplique o atributo x:Name na definição da interface do usuário do XAML para nomear o objeto que você deseja animar.You should always apply the x:Name attribute in the XAML UI definition to name the object that you want to animate. Em seguida, direcione o objeto a ser animado definindo Storyboard.TargetName na definição da animação.You then target the object to animate by setting Storyboard.TargetName within the animation definition. Para o valor de Storyboard.TargetName, use a cadeia de caracteres do nome do objeto de destino que foi definido anteriormente em outro lugar com o atributo x:Name.For the value of Storyboard.TargetName, you use the name string of the target object, which is what you set earlier and elsewhere with x:Name attribute.

Direcionando a propriedade de dependência a ser animadaTargeting the dependency property to animate

Defina um valor para Storyboard.TargetProperty na animação.You set a value for Storyboard.TargetProperty in the animation. Isso determina qual propriedade específica do objeto direcionado será animada.This determines which specific property of the targeted object is animated.

Às vezes, é necessário direcionar uma propriedade que não é uma propriedade imediata do objeto de destino, mas que está aninhada mais profundamente em uma relação objeto-propriedade.Sometimes you need to target a property that's not an immediate property of the target object, but that is nested more deeply in an object-property relationship. Geralmente é necessário fazer isso para filtrar um conjunto de valores de objeto e propriedade auxiliares até que seja possível referenciar um tipo de propriedade que pode ser animado (Double, Point, Color).You often need to do this in order to drill down into a set of contributing object and property values until you can reference a property type that can be animated (Double, Point, Color). Esse conceito se chama direcionamento indireto, e a sintaxe para direcionar uma propriedade dessa maneira é conhecida como caminho de propriedade.This concept is called indirect targeting, and the syntax for targeting a property in this way is known as a property path.

Veja um exemplo.Here's an example. Um cenário comum de uma animação de storyboard é alterar a cor de uma parte da interface do usuário de um aplicativo ou um controle para representar o estado específico desse controle.One common scenario for a storyboarded animation is to change the color of a part of an app UI or control in order to represent that the control is in a particular state. Suponha que você deseje animar o Foreground de um TextBlock para que ele mude de vermelho para verde.Say you want to animate the Foreground of a TextBlock, so that it turns from red to green. Você esperaria que um ColorAnimation fosse usado e isso está correto.You'd expect that a ColorAnimation is involved, and that's correct. Porém, na realidade, nenhuma das propriedades nos elementos da interface do usuário que afetam a cor do objeto é do tipo Color.However, none of the properties on UI elements that affect the object's color are actually of type Color. Em vez disso, são do tipo Brush.Instead, they're of type Brush. Assim, o que realmente é necessário direcionar para animação é a propriedade Color da classe SolidColorBrush, que é um tipo derivado de Brush geralmente usado para essas propriedades da interface do usuário relacionadas a cores.So what you actually need to target for animation is the Color property of the SolidColorBrush class, which is a Brush-derived type that's typically used for these color-related UI properties. Consulte a seguir a formação de um caminho de propriedade para o direcionamento de propriedades da sua animação:And here's what that looks like in terms of forming a property path for your animation's property targeting:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Consulte a seguir uma representação das partes da sintaxe:Here's how to think of this syntax in terms of its parts:

  • Cada conjunto de parênteses () engloba um nome de propriedade.Each set of () parentheses encloses a property name.
  • No nome da propriedade, há um ponto que separa o nome do tipo e o nome da propriedade, para que a propriedade sendo identificada não seja ambígua.Within the property name, there's a dot, and that dot separates a type name and a property name, so that the property you're identifying is unambiguous.
  • O ponto no meio (fora dos parênteses) é uma etapa.The dot in the middle, the one that's not inside parentheses, is a step. Isso é interpretado pela sintaxe como o seguinte procedimento: extrair o valor da primeira propriedade (que é um objeto), entrar em seu modelo de objeto e direcionar uma subpropriedade específica do valor da primeira propriedade.This is interpreted by the syntax to mean, take the value of the first property (which is an object), step into its object model, and target a specific sub-property of the first property's value.

Consulte a seguir uma lista dos cenários de direcionamento de animação em que você provavelmente usará o direcionamento indireto de propriedades e algumas cadeias de caracteres de caminho de propriedade semelhantes à sintaxe a ser usada:Here's a list of animation targeting scenarios where you'll probably be using indirect property targeting, and some property path strings that approximates the syntax you'll use:

Você perceberá que alguns desses exemplos usam colchetes ao redor dos números.You'll notice some of these examples use square brackets around numbers. Isso é um indexador.This is an indexer. Ele indica que o nome da propriedade anterior tem uma coleção como valor e que você deseja um item (identificado por um índice baseado em zero) dessa coleção.It indicates that the property name preceding it has a collection as value, and that you want an item (as identified by a zero-based index) from within that collection.

Você também pode animar propriedades anexadas XAML.You can also animate XAML attached properties. Sempre coloque o nome completo da propriedade anexada em parênteses, como em (Canvas.Left).Always enclose the full attached property name in parentheses, for example (Canvas.Left). Para obter mais informações, consulte Animando propriedades anexadas XAML.For more info, see Animating XAML attached properties.

Para saber mais sobre como usar um caminho de propriedade para o direcionamento indireto da propriedade a ser animada, consulte Sintaxe de Property-path ou Propriedade anexada Storyboard.TargetProperty.For more info on how to use a property path for indirect targeting of the property to animate, see Property-path syntax or Storyboard.TargetProperty attached property.

Tipos de animaçãoAnimation types

O sistema de animação do Windows Runtime possui três tipos específicos aos quais animações de storyboard podem ser aplicadas:The Windows Runtime animation system has three specific types that storyboarded animations can apply to:

Também há um tipo de animação Object generalizado para valores de referência de objetos que abordaremos mais adiante.There's also a generalized Object animation type for object reference values, which we'll discuss later.

Especificando os valores animadosSpecifying the animated values

Até agora, mostramos como direcionar o objeto e a propriedade a ser animada, mas ainda não descrevemos o que a animação faz com o valor da propriedade durante sua execução.So far we've shown you how to target the object and the property to animate, but haven't yet described what the animation does to the property value when it runs.

Os tipos de animação que descrevemos às vezes são chamados de / To / por animações.The animation types we've described are sometimes referred to as From/To/By animations. Isso significa que a animação altera o valor de uma propriedade com o passar do tempo usando uma ou mais dessas entradas provenientes da definição da animação:This means that the animation is changing the value of a property, over time, using one or more of these inputs that come from the animation definition:

  • O valor começa no valor From.The value starts at the From value. Se você não especificar um valor From, o valor inicial será qualquer valor contido na propriedade animada no momento que precede a execução da animação.If you don't specify a From value, the starting value is whatever value the animated property has at the time before the animation runs. Ele pode ser um valor padrão, um valor de um estilo ou modelo ou um valor aplicado especificamente por uma definição de interface do usuário XAML ou pelo código do aplicativo.This might be a default value, a value from a style or template, or a value specifically applied by a XAML UI definition or app code.
  • No final da animação, o valor será o valor To.At the end of the animation, the value is the To value.
  • Ou, para especificar um valor final relativo ao valor inicial, defina a propriedade By.Or, to specify an ending value relative to the starting value, set the By property. Você a definiria em vez da propriedade To.You'd set this instead of the To property.
  • Se você não especificar um valor To ou um valor By, o valor final será qualquer valor contido na propriedade animada no momento que precede a execução da animação.If you don't specify a To value or a By value, the ending value is whatever value the animated property has at the time before the animation runs. Nesse caso, é melhor ter um valor From, pois, caso contrário, a animação simplesmente não mudará o valor. Seus valores inicial e final serão os mesmos.In this case you'd better have a From value because otherwise the animation won't change the value at all; its starting and ending values are both the same.
  • Uma animação geralmente tem pelo menos um From, By ou To, mas nunca os três de uma vez.An animation typically has at least one of From, By or To but never all three.

Vamos revisar o exemplo de XAML anterior e observar novamente os valores From, To e Duration.Let's revisit the earlier XAML example and look again at the From and To values, and the Duration. O exemplo anima a propriedade Opacity e o tipo de Opacity é Double.The example is animating the Opacity property, and the property type of Opacity is Double. Assim, a animação a ser usada aqui é DoubleAnimation.So the animation to use here is DoubleAnimation.

From="1.0" To="0.0" Especifica que quando a animação é executada, a propriedade Opacity começa com um valor de 1 e anima para 0.From="1.0" To="0.0" specifies that when the animation runs, the Opacity property starts at a value of 1 and animates to 0. Em outras palavras, em termos do que esses valores Double significam para a propriedade Opacity, essa animação fará com que o objeto comece opaco e depois fique transparente.In other words, in terms of what these Double values mean to the Opacity property, this animation will cause the object to start opaque and then fade to transparent.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" especifica quanto tempo a animação dura, ou seja, a velocidade de esmaecimento do retângulo.Duration="0:0:1" specifies how long the animation lasts, that is, how fast the rectangle fades. A propriedade Duration é especificada na forma de hours:minutes:seconds.A Duration property is specified in the form of hours:minutes:seconds. A duração nesse exemplo é de um segundo.The time duration in this example is one second.

Para saber mais sobre os valores Duration e a sintaxe XAML, consulte Duration.For more info about Duration values and the XAML syntax, see Duration.

Observação

No exemplo mostrado, se você tivesse certeza de que o estado inicial do objeto que está sendo animado tem Opacity sempre igual a 1 por meio do padrão ou de uma definição explícita, poderia omitir o valor From. Nesse caso, a animação usaria o valor inicial implícito e o resultado seria o mesmo.For the example we showed, if you were sure that the starting state of the object being animated has Opacity always equal to 1, either through the default or an explicit set, you could omit the From value, the animation would use the implicit starting value, and the result would be the same.

From/To/By permitem valor nuloFrom/To/By are nullable

Mencionamos anteriormente que você pode omitir From, To ou By e, assim, usar valores não animados atuais como substitutos de um valor ausente.We mentioned previously that you can omit From, To or By and thus use current non-animated values as substitutes for a missing value. De, paraou por Propriedades de uma animação não são do tipo que você pode adivinhar.From, To, or By properties of an animation aren't of the type you might guess. Por exemplo, o tipo da propriedade DoubleAnimation.To não é Double.For example the type of the DoubleAnimation.To property isn't Double. Em vez disso, é um Nullable para Double.Instead, it's a Nullable for Double. Além disso, seu valor padrão é null, não 0.And its default value is null, not 0. É com esse valor null que o sistema de animação distingue que você não definiu especificamente um valor para uma propriedade From, To ou By.That null value is how the animation system distinguishes that you haven't specifically set a value for a From, To, or By property. As extensões de componente do Visual C++ (C++/CX) não têm um tipo Nullable e, em vez dele, usam IReference.Visual C++ component extensions (C++/CX) doesn't have a Nullable type, so it uses IReference instead.

Outras propriedades de uma animaçãoOther properties of an animation

As próximas propriedades descritas nesta seção são todas opcionais, pois têm padrões que são adequados para a maioria das animações.The next properties described in this section are all optional in that they have defaults that are appropriate for most animations.

AutoReverseAutoReverse

Se você não especificar AutoReverse ou RepeatBehavior em uma animação, essa animação será executada uma única vez e durante o tempo especificado como Duration.If you don't specify either AutoReverse or RepeatBehavior on an animation, that animation will run once, and run for the time specified as the Duration.

A propriedade AutoReverse especifica se uma linha do tempo será executada ao contrário após atingir o final de Duration.The AutoReverse property specifies whether a timeline plays in reverse after it reaches the end of its Duration. Se você defini-la como true, a animação será invertida depois que atingir o final de sua Duration declarada, alterando o valor do valor final (To) para o valor inicial (From).If you set it to true, the animation reverses after it reaches the end of its declared Duration, changing the value from its ending value (To) back to its starting value (From). Desse modo, a animação será efetivamente executada pelo dobro do tempo em Duration.This means that the animation effectively runs for double the time of its Duration.

RepeatBehaviorRepeatBehavior

A propriedade RepeatBehavior especifica quantas vezes uma linha do tempo deve ser executada ou uma duração maior na qual a linha do tempo deve ser repetida.The RepeatBehavior property specifies either how many times a timeline plays, or a larger duration that the timeline should repeat within. Por padrão, uma linha do tempo tem uma contagem de iteração de "1x", o que significa que será executada uma vez por sua Duration e não será repetida.By default, a timeline has an iteration count of "1x", which means it plays one time for its Duration and does not repeat.

Você pode fazer com que a animação execute várias iterações.You can cause the animation to run multiple iterations. Por exemplo, um valor "3x" faz com que a animação seja executada três vezes.For example, a value of "3x" causes the animation to run three times. Você também pode especificar uma Duration diferente para RepeatBehavior.Or, you can specify a different Duration for RepeatBehavior. Essa Duration deve ser maior do que a Duration da própria animação para ser efetiva.That Duration should be longer than the Duration of the animation itself to be effective. Por exemplo, se você especificar um RepeatBehavior de "0:0:10" para uma animação com uma Duration de "0:0:2", essa animação será repetida cinco vezes.For example, if you specify a RepeatBehavior of "0:0:10", for an animation that has a Duration of "0:0:2", that animation repeats five times. Se não houver uma divisão proporcional, a animação ficará truncada no momento em que o tempo de RepeatBehavior for atingido, que pode estar pela metade.If these don't divide evenly, the animation gets truncated at the time that the RepeatBehavior time is reached, which might be partway through. Por fim, você pode especificar o valor especial "Forever", que faz com que a animação seja executada infinitamente até ser interrompida manualmente.Finally, you can specify the special value "Forever", which causes the animation to run infinitely until it's deliberately stopped.

Para saber mais sobre os valores RepeatBehavior e a sintaxe XAML, consulte RepeatBehavior.For more info about RepeatBehavior values and the XAML syntax, see RepeatBehavior.

FillBehavior="Stop"FillBehavior="Stop"

Por padrão, quando uma animação termina, ela deixa o valor da propriedade como o To final ou o valor modificado por By mesmo depois que sua duração é ultrapassada.By default, when an animation ends, the animation leaves the property value as the final To or By-modified value even after its duration is surpassed. No entanto, se você definir o valor da propriedade FillBehavior como FillBehavior.Stop, o valor do valor animado será revertido para o valor anterior à aplicação da animação ou, mais precisamente, o valor efetivo atual conforme determinado pelo sistema de propriedades de dependência (para saber mais sobre essa distinção, consulte Visão geral das propriedades de dependência).However, if you set the value of the FillBehavior property to FillBehavior.Stop, the value of the animated value reverts to whatever the value was before the animation was applied, or more precisely to the current effective value as determined by the dependency property system (for more info on this distinction, see Dependency properties overview).

BeginTimeBeginTime

Por padrão, o BeginTime de uma animação é "0:0:0", de modo que ele é iniciado assim que o Storyboard que o contém é executado.By default, the BeginTime of an animation is "0:0:0", so it begins as soon as its containing Storyboard runs. É possível alterar isso se o Storyboard contiver mais de uma animação e você desejar programar horários de início diferentes para a animação inicial e as outras animações ou criar um pequeno atraso deliberado.You might change this if the Storyboard contains more than one animation and you want to stagger the start times of the others versus an initial animation, or to create a deliberate short delay.

SpeedRatioSpeedRatio

Se houver mais de uma animação em um Storyboard, você pode alterar a taxa de tempo de uma ou mais das animações relativamente ao Storyboard.If you have more than one animation in a Storyboard you can change the time rate of one or more of the animations relative to the Storyboard. É o Storyboard pai que acabará controlando como o tempo de Duration é transcorrido durante a execução da animação.It's the parent Storyboard that ultimately controls how the Duration time elapses while the animations run. Essa propriedade não é usada com frequência.This property isn't used very often. Para obter mais informações, consulte SpeedRatio.For more info see SpeedRatio.

Definindo mais de uma animação em um StoryboardDefining more than one animation in a Storyboard

Um Storyboard pode conter mais de uma definição de animação.The contents of a Storyboard can be more than one animation definition. Você pode ter mais de uma animação se for aplicar animações relacionadas a duas propriedades do mesmo objeto de destino.You might have more than one animation if you are applying related animations to two properties of the same target object. Por exemplo, você pode alterar as propriedades TranslateX e TranslateY de um TranslateTransform usado como o RenderTransform de um elemento da interface do usuário. Isso fará com que o elemento seja convertido diagonalmente.For example, you might change both the TranslateX and TranslateY properties of a TranslateTransform used as the RenderTransform of a UI element; this will cause the element to translate diagonally. Você precisa de duas animações diferentes para fazer isso, mas as animações devem fazer parte do mesmo Storyboard porque elas sempre deverão ser executadas juntas.You need two different animations to accomplish that, but you might want the animations to be part of the same Storyboard because you always want those two animations to be run together.

As animações não precisam ser do mesmo tipo ou direcionar mesmo objeto.The animations don't have to be the same type, or target the same object. Elas podem ter durações diferentes e não precisam compartilhar valores de propriedades.They can have different durations, and don't have to share any property values.

Quando o Storyboard pai for executado, cada uma das animações internas também será executada.When the parent Storyboard runs, each of the animations within will run too.

Na realidade, a classe Storyboard tem muitas das mesmas propriedades de animação que os tipos de animação têm, pois ambos compartilham a classe base Timeline.The Storyboard class actually has a lot of the same animation properties as the animation types do, because both share the Timeline base class. Assim, um Storyboard pode ter um RepeatBehavior ou um BeginTime.Thus, a Storyboard can have a RepeatBehavior, or a BeginTime. Geralmente, eles não são definidos em um Storyboard, a menos que você queria que todas as animações contidas tenham esse comportamento.You don't usually set these on a Storyboard though unless you want all the contained animations to have that behavior. Como regra geral, qualquer propriedade Timeline definida em um Storyboard aplica-se a todas as animações filhas.As a general rule, any Timeline property as set on a Storyboard applies to all its child animations. Se não for definida, Storyboard terá uma duração implícita que é calculada a partir do maior valor Duration das animações contidas.If let unset, the Storyboard has an implicit duration that's calculated from the longest Duration value of the contained animations. Uma Duration definida explicitamente em um Storyboard que é menor do que uma de suas animações filhas fará com que essa animação seja cortada, o que geralmente não é desejado.An explicitly set Duration on a Storyboard that's shorter than one of its child animations will cause that animation to get cut off, which isn't usually desirable.

Um storyboard não pode conter duas animações que tentam direcionar e animar a mesma propriedade no mesmo objeto.A storyboard can't contain two animations that attempt to target and animate the same property on the same object. Se você tentar isso, receberá um erro de tempo de execução quando o storyboard tentar ser executado.If you try this, you'll get a runtime error when the storyboard tries to run. Essa restrição se aplicará até mesmo se as animações não se sobrepuserem no tempo devido a valores BeginTime e durações deliberadamente diferentes.This restriction applies even if the animations don't overlap in time because of deliberately different BeginTime values and durations. Se você realmente desejar aplicar uma linha do tempo de animação mais complexa à mesma propriedade em um único storyboard, a maneira de fazer isso é usar uma animação de quadro chave.If you really want to apply a more complex animation timeline to the same property in a single storyboard, the way to do this is to use a key-frame animation. Consulte Animações de quadro chave e com função de easing.See Key-frame and easing function animations.

O sistema de animação pode aplicar mais de uma animação ao valor de uma propriedade quando essas entradas vierem de vários storyboards.The animation system can apply more than one animation to the value of a property, if those inputs come from multiple storyboards. Não é comum usar esse comportamento deliberadamente para executar storyboards simultaneamente.Using this behavior deliberately for simultaneously running storyboards isn't common. No entanto, é possível que uma animação definida por aplicativo que você aplica a uma propriedade de controle modifique o valor HoldEnd de uma animação que foi executada anteriormente como parte do modelo de estado visual do controle.However it's possible that an app-defined animation that you apply to a control property will be modifying the HoldEnd value of an animation that was previously run as part of the control's visual state model.

Definindo um storyboard como um recursoDefining a storyboard as a resource

Um Storyboard é o contêiner no qual você coloca objetos de animação.A Storyboard is the container that you put animation objects in. Você geralmente define o Storyboard como um recurso disponível para o objeto que desejar animar no Resources ou Application.Resources no nível da página.You typically define the Storyboard as a resource that is available to the object that you want to animate, either in page-level Resources or Application.Resources.

O próximo exemplo mostra como o exemplo anterior Storyboard seria contido em uma definição Resources no nível da página, em que o Storyboard é um recurso de chave do Page raiz.This next example shows how the previous example Storyboard would be contained in a page-level Resources definition, where the Storyboard is a keyed resource of the root Page. Observe o atributo x:Name.Note the x:Name attribute. É com esse atributo que você define um nome de variável para o Storyboard, para que outros elementos no XAML bem como o código possam consultar o Storyboard posteriormente.This attribute is how you define a variable name for the Storyboard, so that other elements in XAML as well as code can refer to the Storyboard later.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

A definição de recursos na raiz do XAML de um arquivo XAML, como page.xaml ou app.xaml, é uma prática comum para organizar recursos de chave em seu XAML.Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. Você também pode dividir recursos em arquivos separá-los e mesclá-los em aplicativos ou páginas.You also can factor resources into separate files and merge them into apps or pages. Para obter mais informações, consulte Referências de recursos de ResourceDictionary e XAML.For more info, see ResourceDictionary and XAML resource references.

Observação

O XAML do Windows Runtime oferece suporte à identificação de recursos pelo uso do atributo x:Key ou do atributo x:Name.Windows Runtime XAML supports identifying resources either using the x:Key attribute or the x:Name attribute. O uso do atributo x:Name é mais comum para um Storyboard, pois você irá querer referenciá-lo pelo nome de variável em algum momento para poder chamar seu método Begin e executar as animações.Using x:Name attribute is more common for a Storyboard, because you'll want to reference it by variable name eventually, so that you can call its Begin method and run the animations. Se você usar o atributo x:Key, precisará usar métodos ResourceDictionary como o indexador Item para recuperá-lo como um recurso de chave e depois converter o objeto recuperado em Storyboard para usar os métodos Storyboard.If you do use x:Key attribute, you'll need to use ResourceDictionary methods such as the Item indexer to retrieve it as a keyed resource and then cast the retrieved object to Storyboard to use the Storyboard methods.

Storyboards para estados visuaisStoryboards for visual states

Você também pode colocar suas animações em uma unidade de Storyboard quando está declarando as animações de estado visual para obter a aparência de um controle.You also put your animations within a Storyboard unit when you are declaring the visual state animations for a control's visual appearance. Nesse caso, os elementos Storyboard definidos vão para um contêiner de VisualState que está aninhado mais profundamente em um Style (é o Style que representa o recurso de chave).In that case the Storyboard elements you define go into a VisualState container that's nested more deeply in a Style (it's the Style that is the keyed resource). Você não precisa de uma chave nem nome para seu Storyboard nesse caso, porque é o VisualState que tem um nome de destino a ser invocado pelo VisualStateManager.You don't need a key or name for your Storyboard in this case because it's the VisualState that has a target name that the VisualStateManager can invoke. Os estilos para controles são geralmente divididos em arquivos XAML ResourceDictionary separados em vez de serem colocados em uma página ou coleção de Resources do aplicativo.The styles for controls are often factored into separate XAML ResourceDictionary files rather than placed in a page or app Resources collection. Para obter mais informações, consulte Animações de storyboard para estados visuais.For more info, see Storyboarded animations for visual states.

Animações dependentes e independentesDependent and independent animations

Neste ponto, precisamos introduzir alguns aspectos importantes sobre como o sistema de animação funciona.At this point we need to introduce some important points about how the animation system works. Em particular, a animação interage fundamentalmente com a forma como um aplicativo do Windows Runtime é renderizado na tela e com a forma como essa renderização usa threads de processamento.In particular, animation interacts fundamentally with how a Windows Runtime app renders to the screen, and how that rendering uses processing threads. Um aplicativo do Windows Runtime sempre tem um thread principal da interface do usuário e esse thread é responsável por atualizar a tela com as informações atuais.A Windows Runtime app always has a main UI thread, and this thread is responsible for updating the screen with current information. Além disso, um aplicativo do Windows Runtime tem um thread de composição, que é usado para pré-calcular os layouts imediatamente antes de serem exibidos.In addition, a Windows Runtime app has a composition thread, which is used for precalculating layouts immediately before they are shown. Quando você anima a interface do usuário, há a possibilidade de causar uma grande quantidade de trabalho para o thread da interface do usuário.When you animate the UI, there's potential to cause a lot of work for the UI thread. O sistema precisa redesenhar áreas grandes da tela usado intervalos de tempo relativamente curtos entre cada atualização.The system must redraw large areas of the screen using fairly short time intervals between each refresh. Isso é necessário para capturar o valor mais recente da propriedade animada.This is necessary for capturing the latest property value of the animated property. Se você não tomar cuidado, há um risco de uma animação diminuir a capacidade de resposta da interface do usuário ou comprometer o desempenho de outros recursos do aplicativo que também estão no mesmo thread da interface do usuário.If you're not careful, there's risk that an animation can make the UI less responsive, or will impact performance of other app features that are also on the same UI thread.

As diversas animações que apresentam risco de deixar o thread da interface do usuário lento são chamadas de animações dependentes.The variety of animation that is determined to have some risk of slowing down the UI thread is called a dependent animation. Uma animação não sujeita a esse risco é uma animação independente.An animation not subject to this risk is an independent animation. A distinção entre animações dependentes e independentes não é determinada apenas pelos tipos de animação (DoubleAnimation etc.) como descrevemos anteriormente.The distinction between dependent and independent animations isn't just determined by animation types (DoubleAnimation and so on) as we described earlier. Em vez disso, ela é determinada pelas propriedades específicas sendo animadas e outros fatores como herança e composição de controles.Instead, it's determined by which specific properties you are animating, and other factors like inheritance and composition of controls. Há circunstâncias em que, até mesmo se uma animação alterar a interface do usuário, ela pode ter um impacto mínimo sobre o thread da interface do usuário e pode ser manipulada pelo thread de composição como uma animação independente.There are circumstances where even if an animation does change UI, the animation can have minimal impact to the UI thread, and can instead be handled by the composition thread as an independent animation.

Uma animação é independente quando tem qualquer uma destas características:An animation is independent if it has any of these characteristics:

Aviso

Para que sua animação seja tratada como independente, você deve definir explicitamente a Duration="0".In order for your animation to be treated as independent, you must explicitly set Duration="0". Por exemplo, se você remover a Duration="0" desse XAML, a animação será tratada como dependente, mesmo que o KeyTime do quadro seja "0:0:0".For example, if you remove Duration="0" from this XAML, the animation is treated as dependent, even though the KeyTime of the frame is "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Se sua animação não atender a esses critérios, provavelmente é uma animação dependente.If your animation doesn't meet these criteria, it's probably a dependent animation. Por padrão, o sistema de animação não executa animações dependentes.By default, the animation system won't run a dependent animation. Portanto, durante o processo de desenvolvimento e teste, você talvez nem veja sua animação em execução.So during the process of developing and testing, you might not even be seeing your animation running. Você ainda poderá usar essa animação, mas deverá habilitar especificamente cada animação dependente.You can still use this animation, but you must specifically enable each such dependent animation. Para habilitar sua animação, defina a propriedade EnableDependentAnimation do objeto de animação como true.To enable your animation, set the EnableDependentAnimation property of the animation object to true. Cada subclasse Timeline que representa uma animação tem uma implementação diferente da propriedade, mas todas são chamadas EnableDependentAnimation.(Each Timeline subclass that represents an animation has a different implementation of the property but they're all named EnableDependentAnimation.)

A obrigação do desenvolvedor de aplicativo em habilitar animações dependentes é um aspecto de criação reconhecido dentro da experiência de desenvolvimento do sistema de animação.The requirement of enabling dependent animations falling onto the app developer is a conscious design aspect of the animation system and the development experience. Queremos que os desenvolvedores reconheçam o quanto as animações influenciam o desempenho da capacidade de resposta da interface do usuário.We want developers to be aware that animations do have a performance cost for the responsiveness of your UI. Animações com desempenho insatisfatório são difíceis de isolar e depurar em um aplicativo completo.Poorly performing animations are difficult to isolate and debug in a full-scale app. Portanto, é recomendável ligar somente as animações dependentes que são essenciais para a experiência da interface do usuário do seu app.So it's better to turn on only the dependent animations you really need for your app's UI experience. Quisemos evitar que o desempenho do seu aplicativo fosse comprometido por conta de animações decorativas que usam muitos ciclos.We didn't want to make it too easy to compromise your app's performance because of decorative animations that use a lot of cycles. Para obter mais dicas sobre o desempenho de animações, consulte Otimizar animações e mídia.For more info on performance tips for animation, see Optimize animations and media.

Como um desenvolvedor de aplicativo, você também pode optar por aplicar uma configuração válida para todo o aplicativo que sempre desabilite animações dependentes, até mesmo aquelas em que EnableDependentAnimation é true.As an app developer, you can also choose to apply an app-wide setting that always disables dependent animations, even those where EnableDependentAnimation is true. Consulte Timeline.AllowDependentAnimations.See Timeline.AllowDependentAnimations.

Dica

Se você estiver usando o painel animação no Blend para Visual Studio 2019, sempre que tentar aplicar uma animação dependente a uma propriedade de estado visual, os avisos serão exibidos no designer.If you're using the Animation Pane in Blend for Visual Studio 2019, whenever you attempt to apply a dependent animation to a visual state property, warnings will be displayed in the designer. Os avisos não serão mostrados na saída ou Lista de Erros de compilação.Warnings will not show in the build output or Error List. Se você estiver editando XAML manualmente, o designer não mostrará um aviso.If you're editing XAML by hand, the designer will not show a warning. Em tempo de execução durante a depuração, a saída de depuração do painel de saída mostrará um aviso de que a animação não é independente e será ignorada.At runtime when debugging, the Output pane's Debug output will show a warning that the animation is not independent and will be skipped.

Iniciando e controlando uma animaçãoStarting and controlling an animation

Tudo que mostramos até agora não faz com que uma animação seja realmente executada ou aplicada.Everything we've shown you so far doesn't actually cause an animation to run or be applied! Até que a animação seja iniciada e esteja em execução, as alterações de valores que uma animação declara no XAML são latentes e ainda não ocorrerão.Until the animation is started and is running, the value changes that an animation is declaring in XAML are latent and won't happen yet. Você deve iniciar explicitamente uma animação de alguma maneira relacionada ao tempo de vida do aplicativo ou à experiência do usuário.You must explicitly start an animation in some way that's related to the app lifetime or the user experience. No nível mais simples, você inicia uma animação chamando o método Begin no Storyboard que é o pai dessa animação.At the simplest level, you start an animation by calling the Begin method on the Storyboard that's the parent for that animation. Você pode chamar métodos diretamente do XAML, de modo que, seja lá o que fizer para habilitar suas animações, o fará a partir do código.You can't call methods from XAML directly, so whatever you do to enable your animations, you'll be doing it from code. Isso será o code-behind das páginas ou dos componentes do seu aplicativo ou talvez a lógica do seu controle se você estiver definindo uma classe de controle personalizada.That will either be the code-behind for the pages or components of your app, or perhaps the logic of your control if you're defining a custom control class.

Geralmente, você chama Begin e apenas deixa a animação ser executada até a conclusão de sua duração.Typically, you'll call Begin and just let the animation run to its duration completion. No entanto, você também pode usar os métodos Pause, Resume e Stop para controlar o Storyboard no tempo de execução, bem como outras APIs que são usadas para cenários mais avançados de controle de animação.However, you can also use Pause, Resume and Stop methods to control the Storyboard at run-time, as well as other APIs that are used for more advanced animation control scenarios.

Quando você chama Begin em um storyboard que contém uma animação que se repete infinitamente (RepeatBehavior="Forever"), a animação é executada até que a página que a contém seja descarregada ou até que você chame especificamente Pause ou Stop.When you call Begin on a storyboard that contains an animation that repeats infinitely (RepeatBehavior="Forever"), that animation runs until the page containing it is unloaded, or you specifically call Pause or Stop.

Iniciando uma animação a partir do código do aplicativoStarting an animation from app code

Você pode iniciar animações automaticamente ou em resposta a ações do usuário.You can either start animations automatically, or in response to user actions. Para o caso automático, você geralmente usa um evento de tempo de vida de objeto como Loaded para atuar como o gatilho da animação.For the automatic case, you typically use an object lifetime event such as Loaded to act as the animation trigger. O evento Loaded é um bom evento a ser usado para essa finalidade porque, nesse ponto, a interface do usuário está pronta para interação e a animação não será cortada no início porque outra parte da interface do usuário ainda está sendo carregada.The Loaded event is a good event to use for this because at that point the UI is ready for interaction, and the animation won't be cut off at the beginning because another part of UI was still loading.

Neste exemplo, o evento PointerPressed está anexado ao retângulo para que, quando o usuário clicar no retângulo, a animação comece.In this example, the PointerPressed event is attached to the rectangle so that when the user clicks the rectangle, the animation begins.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

O manipulador de eventos inicia o Storyboard (a animação) usando o método Begin do Storyboard.The event handler start the Storyboard (the animation) by using the Begin method of the Storyboard.

myStoryboard.Begin();
myStoryboard().Begin();
myStoryboard->Begin();
myStoryBoard.Begin()

Você pode manipular o evento Completed se desejar executar outra lógica após a animação terminar a aplicação de valores.You can handle the Completed event if you want other logic to run after the animation has finished applying values. Além disso, para solucionar problemas de interações do sistema/animação de propriedade, o método GetAnimationBaseValue pode ser útil.Also, for troubleshooting property system/animation interactions, the GetAnimationBaseValue method can be useful.

Dica

Sempre que você criar código para um cenário de app em que uma animação será iniciada a partir do código do app, é recomendável verificar novamente se uma animação ou transição já existe na biblioteca de animações para o cenário da interface do usuário.Whenever you are coding for an app scenario where you are starting an animation from app code, you might want to review again whether an animation or transition already exists in the animation library for your UI scenario. As animações da biblioteca permitem uma experiência da interface do usuário mais consistente em todos os aplicativos do Windows Runtime e são mais fáceis de usar.The library animations enable a more consistent UI experience across all Windows Runtime apps, and are easier to use.

 

Animações para estados visuaisAnimations for visual states

O comportamento de execução de um Storyboard que é usado para definir o estado visual de um controle é diferente da maneira como um aplicativo pode executar um storyboard diretamente.The run behavior for a Storyboard that's used to define a control's visual state is different from how an app might run a storyboard directly. Quando aplicado a uma definição de estado visual no XAML, o Storyboard é um elemento de um VisualState contêiner e o estado como um todo é controlado pelo uso da API VisualStateManager.As applied to a visual state definition in XAML, the Storyboard is an element of a containing VisualState, and the state as a whole is controlled by using the VisualStateManager API. Qualquer animação interna será executada de acordo com seus valores de animação e propriedades Timeline quando o VisualState contêiner for usado por um controle.Any animations within will run according to their animation values and Timeline properties when the containing VisualState is used by a control. Para obter mais informações, consulte Storyboards para estados visuais.For more info, see Storyboards for visual states. Para estados visuais, o FillBehavior aparente é diferente.For visual states, the apparent FillBehavior is different. Se um estado visual for alterado para outro estado, todas as alterações de propriedade aplicadas pelo estado visual anterior e suas animações serão cancelados, mesmo se o novo estado visual não aplicar especificamente uma nova animação a uma propriedade.If a visual state is changed to another state, all the property changes applied by the previous visual state and its animations are canceled, even if the new visual state doesn't specifically apply a new animation to a property.

Storyboard e EventTriggerStoryboard and EventTrigger

Só há uma maneira de iniciar uma animação que pode ser declarada completamente no XAML.There is one way to start an animation that can be declared entirely in XAML. No entanto, essa técnica já não é mais usada com freqüência.However, this technique isn't widely used anymore. Trata-se de uma sintaxe herdada do WPF e de versões anteriores do Silverlight antes do suporte a VisualStateManager.It's a legacy syntax from WPF and early versions of Silverlight prior to VisualStateManager support. Essa sintaxe EventTrigger ainda funciona no XAML do Windows Runtime para fins de importação/compatibilidade, mas só funciona para um comportamento de gatilho baseado no evento FrameworkElement.Loaded. Uma tentativa de acionar outros eventos lançará exceções ou causará falha na compilação.This EventTrigger syntax still works in Windows Runtime XAML for import/compatibility reasons, but only works for a trigger behavior based on the FrameworkElement.Loaded event; attempting to trigger off other events will throw exceptions or fail to compile. Para obter mais informações, consulte EventTrigger ou BeginStoryboard.For more info, see EventTrigger or BeginStoryboard.

Animando propriedades anexadas XAMLAnimating XAML attached properties

Não é um cenário comum, mas é possível aplicar um valor animado a uma propriedade anexada XAML.It's not a common scenario, but you can apply an animated value to a XAML attached property. Para saber mais sobre o que são as propriedades anexadas e como elas funcionam, consulte Visão geral das propriedades anexadas.For more info on what attached properties are and how they work, see Attached properties overview. O direcionamento de uma propriedade anexada exige uma sintaxe de property-path que coloca o nome da propriedade entre parênteses.Targeting an attached property requires a property-path syntax that encloses the property name in parentheses. Você pode animar as propriedades anexadas internas, como Canvas.ZIndex, usando uma ObjectAnimationUsingKeyFrames que aplica valores inteiros discretos.You can animate the built-in attached properties such as Canvas.ZIndex by using an ObjectAnimationUsingKeyFrames that applies discrete integer values. Entretanto, uma limitação existente da implementação XAML de Windows Runtime é que não é possível animar uma propriedade anexada personalizada.However, an existing limitation of the Windows Runtime XAML implementation is that you cannot animate a custom attached property.

Mais tipos de animação e próximas etapas para saber mais sobre como animar a interface do usuárioMore animation types, and next steps for learning about animating your UI

Até agora, mostramos as animações personalizadas que são animadas entre dois valores e depois interpolam linearmente os valores conforme necessário durante a execução da animação.Up to now, we've shown the custom animations that are animating between two values, and then linearly interpolating the values as necessary while the animation runs. Elas são chamadas de / para / por animações.These are called From/To/By animations. Mas há outro tipo de animação que permite declarar valores intermediários que ficam entre o início e o fim.But there's another animation type that enables you to declare intermediate values that fall between the start and end. Elas são chamadas de animações de quadro chave.These are called key-frame animations. Também há uma maneira de alterar a lógica de interpolação de uma animação de / para / por ou de uma animação de quadro chave.There's also a way to alter the interpolation logic on either a From/To/By animation or a key-frame animation. Isso envolve a aplicação de uma função de easing.This involves applying an easing function. Para saber mais sobre esses conceitos, consulte Animações de quadro chave e com função de easing.For more info on these concepts, see Key-frame and easing function animations.