He hecho un vídeo de demostración de la animación que estoy tratando de lograr: Aquí está.

Aviso el video ilustra la acción como sería visto desde el lado. El icono de la cámara que representa al usuario del punto de VISTA. Se trata básicamente de una simulación de una traducción entre el eje Z logrado a pesar de una escala de transformación, con una simultánea independiente de dos pasos de rotación 3D sucediendo a lo largo del eje X.

Se ve y suena bastante simple, ¿verdad? Mal. Aquí está el código ideal, que no funciona:

[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    view.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {}];

[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    CATransform3D rotation = CATransform3DIdentity;
    rotation.m34 = 1.0 / - 1800;
    rotation = CATransform3DRotate(rotation, - 20 * M_PI / 180.0f, 1, 0, 0);

    view.layer.transform = rotation;

} completion:^(BOOL finished) {
    [UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        view.layer.transform = CATransform3DIdentity;

    } completion:^(BOOL finished) {}];
}];

Resulta que si haces esto, la rotación 3D se ignora completamente. Yo he probado un número de otros enfoques, y todos ellos han fracasado.

Algunos de los requisitos:

  • Escala preferiblemente debe ser una CGAffineTransform
  • Easings debe ser como se muestra, especialmente en la rotación

Por supuesto, si la solución viene de que requiere de algunos de estos a cambio, podría adaptarse.

Gracias de antemano por cualquier ayuda. Si usted necesita alguna aclaración, por favor pregunte.

No podía conseguir que su vídeo para el trabajo (navegación a través de un iPhone, aunque). ¿Qué es la transformación de la vista debía estar en el inicio de la animación?
Muy ilustrativo el video (y bonitos). ¿Cómo lo hiciste?
La vista tiene inicialmente una escala menor que 1.
Gracias! He utilizado la Ponencia, con las Acciones de la característica. Aquí está la .archivo de clave si desea diseccionarlo: cl.ly/LmIa

OriginalEl autor radutzan | 2012-12-24

2 Comentarios

  1. 25

    Usted no puede animar la misma propiedad, sin que la primera animación que se ha cancelado. Usted debe desplegable para el uso de Core Animation y haciendo dos animaciones o un fotograma de la animación.

    Dos transformación animaciones

    Mediante la creación de una animación de escala (que se podría hacer como z-traducción si quieres) y uno para el giro de darles clave muy específicas caminos que no se anulan entre sí.

    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.fromValue = @0.75; //Your from value (not obvious from the question)
    scale.toValue = @1.0;
    scale.duration = 0.4;
    scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CAKeyframeAnimation *rotate = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotate.values = @[@0.0, @(- 20 * M_PI / 180.0f), @0.0];
    rotate.duration = 0.4;
    rotate.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    
    [view.layer addAnimation:scale forKey:@"move forward by scaling"];
    [view.layer addAnimation:rotate forKey:@"rotate back and forth"];
    view.transform = CGAffineTransformIdentity; //Set end value (animation won't apply the value to the model)

    Un solo fotograma de la animación

    Ya que tiene tres muy buenas fotogramas clave el código para la animación entre los tres fotogramas clave iba a ser fácil de leer y entender. Usted posiblemente podría perder parte del control si usted quiere cambiar la temporización de la escala separada de la de la rotación.

    CATransform3D firstFrame  = CATransform3DMakeScale(0.75, 0.75, 1.0);
    CATransform3D secondFrame = CATransform3DMakeScale(0.875, 0.875, 1.0); //halfway to 1.0 from 0.75
    secondFrame = CATransform3DRotate(secondFrame, -20.0*M_PI/180.0, 1.0, 0.0, 0.0);
    CATransform3D lastFrame   = CATransform3DIdentity;
    
    CAKeyframeAnimation *scaleAndRotate = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    scaleAndRotate.values = @[[NSValue valueWithCATransform3D:firstFrame],
                              [NSValue valueWithCATransform3D:secondFrame],
                              [NSValue valueWithCATransform3D:lastFrame] ];
    scaleAndRotate.duration = 1.0;
    scaleAndRotate.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    
    [view.layer addAnimation:scaleAndRotate forKey:@"entire animation"];
    view.transform = CGAffineTransformIdentity; //Set end value (animation won't apply the value to the model)

    Perspectiva

    En ambos casos, hice la perspectiva de la configuración de la sublayerTransform en el superlayer de la animación de la vista (suponiendo que sólo hay una subvista con una transformación no)

    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = 1.0 / - 1800.0;    
    view.superview.layer.sublayerTransform = perspective;
    Excelente post!!! (Votado)
    Esto se ve muy bien. Yo voy a probar mañana y hacerle saber cómo va. Muchas gracias y felices fiestas!
    Yo no podía esperar, y es ya técnicamente mañana aquí, así que he probado, y funciona muy bien! Me fui con el primero, ya que mantiene las funciones de temporización independiente entre los dos se transforma. Muchas gracias!

    OriginalEl autor David Rönnqvist

  2. 2

    He encontrado una manera, pero es más como un hack. Hacer lo siguiente –

    1)crear una vista con fondo transparente – (este punto de vista se va a traducir)
    2)crear una subvista de 1) – (este punto de vista va a girar).

    Ahora uso crear dos transformaciones, una escala de transformación de la vista 1) y un rottaion transformar para ver 2) y aplicar simultáneamente.

    Hacer de la escena, gracias

    OriginalEl autor Bharat Gulati

Dejar respuesta

Please enter your comment!
Please enter your name here