Come posso avviare un'animazione interattiva con un offset orario arbitrario?

Question

Sto cercando di creare un'animazione interattiva che utilizza uno speed di 0.0 e manipola la proprietà timeOffset in risposta alle azioni dell'utente. Voglio che lo stato iniziale dell'animazione sia da qualche parte nel mezzo dell'animazione definita, poiché l'azione dell'utente consente all'animazione di procedere sia in avanti che all'indietro dal punto di partenza.

Ecco alcuni esempi di codice che rappresentano un caso semplificato di ciò che sto cercando di fare.

@interface TestViewController : UIViewController {} 
@property (strong, nonatomic) IBOutlet UIView * transformerView; 
@property (strong, nonatomic) IBOutlet UISlider * slider; 
@end 

@implementation TCTestViewController {} 

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    self.slider.minimumValue = 0.0f; 
    self.slider.maximumValue = 1.0f; 
    self.slider.value = 0.5f; 

    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(-320.0f, 0.0f, 0.0f)]; 
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(320.0f, 0.0f, 0.0f)]; 
    animation.duration = 1.0f; 

    self.transformerView.layer.speed = 0.0; 
    [self.transformerView.layer addAnimation:animation forKey:@"test"]; 

    // *** THIS IS THE PROBLEM LINE *** 
    self.transformerView.layer.timeOffset = 0.5; 
} 

- (IBAction)onSliderValueChanged { 
    self.transformerView.layer.timeOffset = self.slider.value; 
} 

@end 

Questo controller di vista è una vista sto aggiungendo un'animazione che si tradurrà in asse X da -320pt a + 320pt, e voglio iniziare nel mezzo quindi non c'è alcuna traduzione finché l'utente interagisce con esso. Ho anche un dispositivo di scorrimento che, una volta modificato, imposta la proprietà timeOffset in modo che corrisponda alla posizione del cursore.

Se ometto la riga del problema in cui timeOffset è impostato su 0,5, tutto funziona come previsto, ma la vista inizia tradotta da -320pt. Da quel momento in poi, tiene traccia del cursore in modo corretto.

Quando la linea di problema è lì, tutto diventa terribilmente sbagliato. La vista inizia ancora tradotta da -320pt e traccia solo il cursore quando il valore del cursore è superiore a 0,5. Anche allora, la traduzione va solo da -320pt a 0pt, e non traduce mai più in alto. Per valori del cursore inferiori a 0,5, non vi è alcuna traduzione.

Non fa alcuna differenza se posiziono la linea di problema prima o dopo aver aggiunto l'animazione al livello. Che cosa è d'aiuto è se io uso -performSelector:withObject:afterDelay con un ritardo di 0.0 per impostare l'iniziale timeOffset su una iterazione futura del ciclo di esecuzione, ma prima che l'utente interagisca con il cursore. Sfortunatamente, questa soluzione alternativa non è pratica per il vero progetto in quanto ho bisogno di creare l'animazione al volo mentre l'utente inizia l'interazione.

Perché la proprietà timeOffset non funziona quando è impostata nella stessa iterazione del ciclo di esecuzione quando l'animazione è stata aggiunta al livello? Penso che ciò che sta accadendo sia che quando timeOffset è impostato in questo momento, diventa un nuovo tempo base per l'animazione.

Qualcuno può suggerire un modo in cui posso creare un'animazione che può essere resa interattiva con la proprietà timeOffset e impostarla per l'avvio da qualche parte oltre l'inizio?

Answer 1

vorrei provare il seguente:

dispatch_async(dispatch_get_main_queue(), ^{ 
    self.transformerView.layer.timeOffset = 0.5; 
});