Este é o 11º tutorial como parte da série de tutoriais do Windows Phone. Nesta tarefa, você criará um storyboard no Expression Blend para animar o texto no banner sempre que o botão for pressionado.
1. Abra o espaço de trabalho ativo para o espaço de trabalho de animação. No Janela menu, aponte para Espaços de trabalho e selecione Animação. Observe que isso reorganiza as janelas para maximizar o espaço disponível para editar a linha do tempo.
2. Se necessário, saia da área de edição do modelo de controle de botão. Para fazer isso, clique no Escopo acima botão ao lado do FancyButton (modelo de botão) elemento no Objetos e Linha do Tempo painel para exibir a árvore de elementos da página.
3. Agora, no Objetos e Linha do Tempo painel, clique Novo para criar um storyboard. Este é o botão rotulado com um sinal + e localizado no canto superior direito do painel.
4. No Criar recurso de storyboard diálogo, defina o Nome para AnimateBanner e clique Está bem.
5. Para criar os quadros principais na animação, clique no BannerTextBlock elemento na árvore de elementos do Objetos e Linha do Tempo painel para selecioná-lo.
6. Agora, clique e arraste a posição atual da reprodução da linha do tempo para um 1 segundo.
7. Em seguida, mude para o Propriedades painel, expanda o Transformar categoria e selecione o Escala transformar. X valor da propriedade é -1. Essa transformação espelha o elemento ao longo de seu eixo horizontal.
9. Agora, altere a reprodução da linha de tempo para um deslocamento de 2 segundos.
10. Mude para o Propriedades painel, expanda o Transformar categoria e selecione o Escala transformar. Altere o valor do X propriedade de volta para 1 para restaurar o elemento ao seu estado original. Observe que um segundo quadro chave apareceu no cronograma do storyboard devido a essa alteração.
11. Para testar a animação no designer, você precisa adicionar algum texto ao banner. Primeiro, clique no círculo vermelho à esquerda do AnimateBanner nome do storyboard no canto superior esquerdo do painel para desativar a gravação temporariamente - você não deseja que o texto adicionado se torne parte da animação.
12. Agora, clique com o botão direito no BannerTextBlock elemento na superfície do designer e selecione Editar texto. Digite um texto adequado para o banner e pressione ENTRAR.
13. Para testar a animação, pressione o Toque botão acima da linha do tempo. Observe como o texto no banner gira horizontalmente em torno de seu eixo central e como o movimento é uniforme em todo o ciclo de animação.
14. Selecione o primeiro quadro chave clicando dentro do ícone de círculo cinza na linha do tempo. Observe que, quando você seleciona um quadro, a exibição do designer é atualizada para mostrar o estado dos elementos da interface do usuário conforme eles aparecem nesse quadro; nesse caso, o texto do banner aparece espelhado. Agora, no Propriedades painel, sob a Facilitando categoria, garantir que EasingFunction for selecionado, expanda a lista suspensa para exibir uma lista de funções disponíveis e, em Saída cúbica função. Essa função de atenuação específica faz com que a transição reduza sua taxa à medida que se aproxima do quadro principal.
15. Repita o procedimento no passo anterior para configurar a função de atenuação para o segundo quadro chave. Desta vez escolha o InOut cúbico função para fazer a transição começar a uma taxa lenta, acelerar gradualmente e, finalmente, reduzir sua velocidade à medida que se aproxima do quadro final.
16. Para testar o efeito das funções de atenuação na animação, pressione Toque acima da linha do tempo. Observe como o banner inicia sua rotação em uma taxa alta, depois diminui à medida que o texto aparece espelhado; em seguida, ele recupera a velocidade novamente e finalmente desacelera novamente para retornar à sua posição original.
17. Agora que o design da interface do usuário está completo, a próxima etapa é copiar o XAML atualizado de volta para o projeto principal.
- Primeiro, no Expression Blend, clique na guia XAML na borda direita da janela ou no Visão cardápio
- Aponta para Vista do documento ativo e selecione Visualização XAMLIsso leva você para a exibição XAML do MainPage.xaml documento.
- Em seguida, selecione e copie os filhos da raiz UserControl elemento para a área de transferência. Isso inclui o UserControl.Resources seção e o Grade elemento chamadoLayoutRoot mas não o UserControl elemento em si.
18. Agora, no Visual Studio, abra o MainPage.xaml documento na exibição XAML e substituir todo o conteúdo filho da raiz navegação: PhoneApplicationPage elemento com o texto na área de transferência, garantindo que o próprio elemento raiz permaneça inalterado.
19. Como último passo, no MainPage.xaml arquivo, localize o UserControl.Resources tags de início e fim e substituí-los por navegação: PhoneApplicationPage.Resources Tag.
20. Pressione CTRL + S para salvar o MainPage.xaml Arquivo.
21. Até agora, você criou um storyboard de animação para o texto do banner, mas ele simplesmente existe como um recurso não utilizado no projeto.Para reproduzir a animação, você precisa acionar o storyboard em resposta a um evento, neste caso, sempre que Clique em mim botão é pressionado. Para abrir o Clique manipulador de eventos para este botão:
- Vou ao desenhar vista do MainPage.xaml Arquivo
- Clique duas vezes no botão na superfície do designer para abrir o arquivo code-behind
- Posicione o cursor no manipulador de eventos
22. Para atualizar o manipulador de eventos para reproduzir a animação, insira o snippet de código a seguir no espaço “negrito” imediatamente antes da chave final.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
