Can Scrolling controlar uma animação?
-
19-09-2019 - |
Pergunta
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!
Solução
- No seu método de delegado
scrollViewDidScroll:
, verifique secontentOffset
da exibição da rolagem indica que o usuário tenha sido deslocada para outra página. - 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.
-
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.
Outras dicas
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];
}