La animation plegable no se alinea con la animation deslizante

Estoy tratando de crear una animation de menu plegable como esta: http://vimeo.com/41495357

En este punto, la animation funciona al arrastrar el dedo por la pantalla, pero cuando bash animar el menu de abierto a cerrado o cerrado para abrir directamente, la vista principal que se desliza no se alinea con el lado derecho de la vista eso se está desarrollando Se alinean cuando termina la animation, pero no durante. Además, los bordes de la vista que se despliega parecen desaparecer fuera de los límites de la vista durante la animation.

El deployment real de la capa se realiza en layoutSublayers, por lo que cuando el ancho de la capa cambia, se calculan las transformaciones en sus subcapas. Encontré las matemáticas para calcular las transformaciones en este proyecto: https://github.com/MassiveHealth/Opaque

// Configure the layer bounds and midpoints CGRect halfRect = CGRectMake(0, 0, self.fullWidth / 2, self.bounds.size.height); self.rightImageLayer.bounds = halfRect; self.leftImageLayer.bounds = halfRect; CGPoint midPoint = CGPointMake(0.5 * self.bounds.size.width, 0.5 * self.bounds.size.height); self.rightImageLayer.position = midPoint; self.leftImageLayer.position = midPoint; // Calculate transforms CGFloat l = 0.5 * self.fullWidth; CGFloat y = 0.5 * self.bounds.size.width; CGFloat theta = acosf(y/l); CGFloat z = l * sinf(theta); CGFloat topAngle = theta * -1; CGFloat bottomAngle = theta; CATransform3D transform = CATransform3DMakeTranslation(0.0, 0.0, -z); self.rightImageLayer.transform = CATransform3DRotate(transform, topAngle, 0.0, 1.0, 0.0); self.leftImageLayer.transform = CATransform3DRotate(transform, bottomAngle, 0.0, 1.0, 0.0); 

Este es el código que es responsable de iniciar la animation desplegada. (en este momento, el menu se despliega a todo el ancho de la pantalla)

 self.foldingLayer.frame = self.view.bounds; self.slidingLayer.frame = CGRectMake(self.view.frame.size.width, 0, self.slidingLayer.frame.size.width, self.slidingLayer.frame.size.height); 

¿Cómo es que estas animaciones no se alinean? Quizás la matemática es incorrecta? He mirado el código de ejemplo de proyectos como https://github.com/honcheng/PaperFold-for-iOS y https://github.com/xyfeng/XYOrigami pero no puedo resolverlo.

Actualizar

Basado en la respuesta de Till, he creado esta animation de fotogtwigs key para la capa deslizante. ¿Las animaciones todavía no se alinean, por lo que mis cálculos de fotogtwigs key deben ser incorrectos?

 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"]; NSUInteger steps = 100; CGFloat totalFoldViewWidth = self.view.bounds.size.width; NSMutableArray *values = [NSMutableArray arrayWithCapacity:steps]; for(NSUInteger i = 0; i < steps; i++) { CGFloat fraction = (CGFloat)i / steps; CGFloat foldViewWidth = fraction * totalFoldViewWidth; CGFloat l = 0.5 * totalFoldViewWidth; CGFloat y = 0.5 * foldViewWidth; CGFloat angle = acosf(y/l); CGFloat projectionWidth = cosf(angle) * totalFoldViewWidth; [values addObject:[NSNumber numberWithFloat:projectionWidth]]; } animation.calculationMode = kCAAnimationLinear; [animation setValues:values]; [animation setDuration:3.0]; [self.slidingLayer addAnimation:animation forKey:@"slideAnimation"]; 

Creo que estás abordando el problema desde la dirección equivocada. Desea calcular los angularjs desde la distancia y no viceversa. Si desea calcular el ángulo para cada lado de la animation plegable, utilice la aritmética pitagórica básica. Claramente sabemos el tamaño de la distancia de apertura y sabemos el tamaño de la hipotenusa (la mitad del tamaño de la vista cuando está completamente abierta).

En codigo:

 CGFloat otherSide = 0.5 * openingWidth; // halve because we have two sides CGFloat hypotenuse = 0.5 * unfoldedViewTotalWidth; // halve because we have to sides CGFloat angle = asinf(otherSide / hypotenuse); CGFloat rightAngle = -1 * (M_PI_2 - angle); CGFloat leftAngle = M_PI_2 - angle; 

Puede usar estos angularjs para establecer la rotation para los lados izquierdo y derecho de la vista de plegado.

¡Tenga cuidado de configurar sus puntos de anclaje para el lado izquierdo (0.0, 0.5) y para el derecho a (1.0, 0.5) y también para animar la traducción del lado derecho!

¡Espero que esto ayude! ¡Aclamaciones!

Eso es de hecho un problema de tus matemáticas. La distancia de esa vista depende del ancho de proyección de la vista plegada . Ese ancho no es estrictamente lineal según el ángulo;

projectionWidth = cos(angle) * foldViewWidth

En otras palabras, los resultados de 40 grados en algo completamente diferente de 20 grados y esa relación no es lineal, sino que se basa en el coseno de ese ángulo.

Por lo tanto, una animation lineal no lo hará. Deberá crear una animation de cuadro basada en el ancho de proyección de esa vista plegada para que coincida con la traducción con la rotation.