Как поворачивать CALayer вокруг диагональной линии?

Ответ 1

вы можете подделать его так: создать аффинное преобразование, которое разрушает слой по диагонали:

A-----B           B
|     |          /
|     |   ->   A&D
|     |        /
C-----D       C

измените изображение и преобразуйте CALayer обратно в другую анимацию. Это создаст иллюзию слоя, вращающегося вокруг его диагонали.

Матрица для этого должна быть, если я правильно помню математику:

0.5 0.5 0
0.5 0.5 0
0   0   1

Обновление: ok, CA действительно не любит использовать вырожденные преобразования, но вы можете его аппроксимировать следующим образом:

CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, 0.001f, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);  

в моих тестах на симуляторе все еще была проблема, потому что вращение происходит быстрее, чем te перевод, поэтому с сплошным черным квадратом эффект был немного странным. Я полагаю, что если у вас есть центрированный спрайт с прозрачной областью вокруг него, эффект будет близок к ожидаемому. Затем вы можете настроить значение матрицы t3, чтобы узнать, есть ли у вас более привлекательный результат.

после дальнейшего исследования выяснилось, что он должен анимировать собственный переход с помощью ключевых кадров, чтобы обеспечить максимальный контроль самого перехода. скажем, вы должны были отобразить эту анимацию за секунду, вы должны сделать десять матриц, которые будут отображаться на каждой десятой доли секунды с помощью интерполяции с использованием kCAAnimationDiscrete; эта матрица может быть сгенерирована с помощью приведенного ниже кода:

CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, animationStepValue, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);  

где animationStepValue для ech ключевого кадра берется из этой прогрессии:

{1 0.7 0.5 0.3 0.1 0.3 0.5 0.7 1}

то есть: вы генерируете десять различных матриц преобразования (фактически 9), нажимая их как ключевые кадры, которые должны отображаться на каждую десятую секунды, а затем используя параметр "не интерполировать". вы можете настроить номер анимации для обеспечения плавности и производительности *

* Извините за возможные ошибки, эта последняя часть была написана без проверки орфографии.

Ответ 2

Я решил. У вас, вероятно, уже есть решение, но вот что я нашел. Это очень просто...

Вы можете использовать CABasicAnimation для вращения по диагонали, но это должна быть конкатенация двух матриц, а именно существующей матрицы слоя, плюс CATransform3DRotate. "Трюк" в 3DRotate вам нужно указать координаты для поворота вокруг.

Код выглядит примерно так:

CATransform3DConcat(theLayer.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0));

Это приведет к вращению, которое выглядит так, как если бы верхний левый угол квадрата вращался вокруг оси Y = X и перемещался в нижний правый угол.

Код для анимации выглядит следующим образом:

CABasicAnimation *ani1 = [CABasicAnimation animationWithKeyPath:@"transform"];

// set self as the delegate so you can implement (void)animationDidStop:finished: to handle anything you might want to do upon completion
[ani1 setDelegate:self];

// set the duration of the animation - a float
[ani1 setDuration:dur];

// set the animation "toValue" which MUST be wrapped in an NSValue instance (except special cases such as colors)
ani1.toValue = [NSValue valueWithCATransform3D:CATransform3DConcat(theLayer.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))];

// give the animation a name so you can check it in the animationDidStop:finished: method
[ani1 setValue:@"shrink" forKey:@"name"];

// finally, apply the animation
[theLayer addAnimation:ani1 [email protected]"arbitraryKey"];

Что это! Этот код будет вращать квадрат (theLayer) до невидимости, когда он перемещается на 90 градусов и представляет собой ортогонально на экран. Затем вы можете изменить цвет и сделать ту же самую анимацию, чтобы вернуть ее обратно. Такая же анимация работает, потому что мы конкатенируем матрицы, поэтому каждый раз, когда вы хотите повернуть, просто сделайте это дважды, или измените M_PI/2 на M_PI.

Наконец, следует отметить, и это заставило меня с ума сойти, что по завершении слой вернется в исходное состояние, если вы явно не установите его в состояние конечной анимации. Это означает, что перед строкой [theLayer addAnimation:ani1 [email protected]"arbitraryKey"]; вы захотите добавить

theLayer.transform = CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0));

чтобы установить его значение после завершения анимации. Это предотвратит возврат привязки в исходное состояние.

Надеюсь, это поможет. Если не ты, то, возможно, кто-то другой, который ударил головой о стену, как мы!:)

Приветствия,

Крис

Ответ 3

Вот пример Xamarin iOS, который я использую, чтобы откинуть угол квадратной кнопки, как ухо собаки (легко портировано на obj-c):

Метод 1: использует анимацию вращения с 1 для осей x и y (примеры в Xamarin.iOS, но легко переносимые для obj-c):

// add to the UIView subclass you wish to rotate, where necessary
AnimateNotify(0.10, 0, UIViewAnimationOptions.CurveEaseOut | UIViewAnimationOptions.AllowUserInteraction | UIViewAnimationOptions.BeginFromCurrentState, () =>
{
    // note the final 3 params indicate "rotate around x&y axes, but not z"
    var transf = CATransform3D.MakeRotation(-1 * (nfloat)Math.PI / 4, 1, 1, 0);
    transf.m34 = 1.0f / -500;
    Layer.Transform = transf;
}, null);

Метод 2: просто добавьте поворот x-axis и y-axis вращения в CAAnimationGroup, чтобы они запускались одновременно:

// add to the UIView subclass you wish to rotate, where necessary
AnimateNotify(1.0, 0, UIViewAnimationOptions.CurveEaseOut | UIViewAnimationOptions.AllowUserInteraction | UIViewAnimationOptions.BeginFromCurrentState, () =>
{
    nfloat angleTo = -1 * (nfloat)Math.PI / 4;
    nfloat angleFrom = 0.0f ;
    string animKey = "rotate";

    // y-axis rotation
    var anim = new CABasicAnimation();
    anim.KeyPath = "transform.rotation.y";
    anim.AutoReverses = false;
    anim.Duration = 0.1f;
    anim.From = new NSNumber(angleFrom);
    anim.To = new NSNumber(angleTo);

    // x-axis rotation
    var animX = new CABasicAnimation();
    animX.KeyPath = "transform.rotation.x";
    animX.AutoReverses = false;
    animX.Duration = 0.1f;
    animX.From = new NSNumber(angleFrom);
    animX.To = new NSNumber(angleTo);

    // add both rotations to a group, to run simultaneously
    var animGroup = new CAAnimationGroup();
    animGroup.Duration = 0.1f;
    animGroup.AutoReverses = false;
    animGroup.Animations = new CAAnimation[] {anim, animX};
    Layer.AddAnimation(animGroup, animKey);

    // add perspective
    var transf = CATransform3D.Identity;
    transf.m34 = 1.0f / 500;
    Layer.Transform = transf;

}, null);