Can Scrolling controlar uma animação?

Question

Eu tenho um UILabel que exibe a data atual para a vista atual do meu ponto de vista de rolagem. Quando eu rolar essa visão para a esquerda (para as páginas esquerda), eu gostaria este rótulo para mudar para o dia anterior, com um efeito de cruzamento entre as 2 datas.

Eu tomo como referência o efeito de esmaecimento da Springboard quando se desloca para a página de Spotlight. Eu acho que isso é semelhante, mas não tenho idéia de como implementá-lo!

Onde devo colocar o código, que eu tenho que usar 2 diferente UILabel ou talvez CoreAnimation? Quando faço para mudar a data?

Agradecemos antecipadamente!

Answer 1

1. No seu método de delegado scrollViewDidScroll:, verifique se contentOffset da exibição da rolagem indica que o usuário tenha sido deslocada para outra página.
2. Se assim for, alterar o texto do rótulo para a nova data. Ainda animado não vai, mas fazer isso antes de tentar a animação.

3. Para a animação, adicionar um CATransition a camada e configure-o da etiqueta ao seu gosto:

   // Create a transition animation and add it to the label's layer:
   CATransition *transition = [CATransition animation];
   transition.type = kCATransitionFade;
   transition.duration = 0.25;
   [self.dateLabel.layer addAnimation:transition forKey:@"textTransition"];
   // Change the label's text as before:
   self.dateLabel.text = newDateString;
   

Este efeito é um pouco diferente do desbotamento dos ícones Springboard (desde aqueles de fade continuamente medida que se desloca ainda mais para a página de Spotlight), mas eu acho que a minha abordagem é mais apropriado para a sua aplicação. Para emular o efeito Springboard, você deve realmente usar dois rótulos separados (com o mesmo quadro) e mudar seus valores de opacidade como muda contentOffset da exibição da rolagem.

Answer 2

Usando o Core Animation com dois rótulos iria funcionar muito bem. Alterar a propriedade de um resultado camada Core Animation em uma transição suave por padrão, então você pode usar isso a seu favor. Por exemplo:

- (void)crossfadeDateLabels
{
    date1Label.layer.opacity = 0.0f;
    date2Label.layer.opacity = 1.0f;
}

Ou você pode usar o modelo de animação explícita se você quiser mais controle:

- (void)crossfadeDateLabels
{
    CABasicAnimation *date1Anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    date1Anim.duration = 1.0f;
    date1Anim.fromValue = [NSNumber numberWithFloat:1.0f];
    date1Anim.toValue = [NSNumber numberWithFloat:0.0f]

    // Do something similar for date2Anim...

    [date1Label.layer addAnimation:date1Anim forKey:nil];
    [date2Label.layer addAnimation:date2Anim forkey:nil];
}