iOS cakeyframeanimation rotationMode на UIImageView

вот что вам нужно знать, чтобы исключить фликер:

• как отметил Калеб, Core Animation вращает ваш слой так, что его положительная ось X лежит вдоль касательной вашего пути. Вам нужно, чтобы "естественная" ориентация вашего образа работала с этим. Итак, предположим, что это зеленый космический корабль в ваших образцах, вам нужно, чтобы космический корабль указывал вправо, когда он не имеет вращения он.

• установка преобразования, включающего вращение, препятствует вращению, применяемому `kCAAnimationRotateAuto". Перед применением анимации необходимо удалить вращение из преобразования.

• конечно, это означает, что вам нужно повторно применить преобразование, когда анимация завершится. И, конечно же, вы хотите сделать это, не видя никакого мерцания во внешнем виде изображения. Это не сложно, но есть какой-то секретный соус участвует, что я объясню ниже.

• вы, по-видимому, хотите, чтобы ваш космический корабль, чтобы начать, указывая вдоль касательной пути, даже когда космический корабль сидит еще не был анимирован. Если изображение вашего космического корабля указывает вправо, но ваш путь идет вверх, то вам нужно установить преобразование изображения, чтобы включить поворот на 90°. Но, возможно, вы не хотите жестко кодировать это вращение-вместо этого вы хотите посмотреть на путь и выяснить его начало касательная.

я покажу здесь некоторые важные коды. Вы можете найти мой тестовый проект на GitHub. Вы можете найти некоторое использование в загрузке его и попробовать его. Просто нажмите на зеленый "космический корабль", чтобы увидеть анимацию.

Итак, в моем тестовом проекте я подключил свой UIImageView на действия animate:. Когда вы касаетесь его, изображение перемещается вдоль половины рисунка 8 и удваивается в размере. Когда вы касаетесь его снова, изображение движется по другая половина рисунка 8 (возвращается в исходное положение), и возвращается к исходному размеру. Обе анимации используют kCAAnimationRotateAuto, поэтому изображение указывает вдоль касательной пути.

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

- (IBAction)animate:(id)sender {
    UIImageView* theImage = self.imageView;

    UIBezierPath *path = _isReset ? _path0 : _path1;
    CGFloat newScale = 3 - _currentScale;

    CGPoint destination = [path currentPoint];

Итак, первое, что мне нужно сделать, это удалить любое вращение из преобразования изображения, так как, как я уже упоминал, оно будет мешать kCAAnimationRotateAuto:

    // Strip off the image's rotation, because it interferes with `kCAAnimationRotateAuto`.
    theImage.transform = CGAffineTransformMakeScale(_currentScale, _currentScale);

далее, я иду в UIView анимационный блок, чтобы система применяла анимацию к представлению изображения:

    [UIView animateWithDuration:3 animations:^{

я создаю анимацию ключевого кадра для позиции и устанавливаю пару ее свойств:

        // Prepare my own keypath animation for the layer position.
        // The layer position is the same as the view center.
        CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        positionAnimation.path = path.CGPath;
        positionAnimation.rotationMode = kCAAnimationRotateAuto;

далее секретный соус для предотвращения мерцания в конце анимации. Напомним, что анимация do не влияет на свойства "слоя модели", к которому вы их прикрепляете (theImage.layer в данном случае). Вместо этого они обновляют свойства "слоя презентации", который отражает то, что на самом деле находится на экране.

Итак, сначала я поставил removedOnCompletion to NO для анимации по ключевым кадрам. Это означает, что анимация останется прикрепленной к слою модели, когда анимация будет завершена, что означает, что я могу получить доступ к слою презентации. Я получаю преобразование из слоя презентации, удаляю анимацию и применяю преобразование к слою модели. Так как это все происходит в основном потоке, эти изменения свойств происходят в одном цикле обновления экрана, поэтому нет мерцания.

        positionAnimation.removedOnCompletion = NO;
        [CATransaction setCompletionBlock:^{
            CGAffineTransform finalTransform = [theImage.layer.presentationLayer affineTransform];
            [theImage.layer removeAnimationForKey:positionAnimation.keyPath];
            theImage.transform = finalTransform;
        }];

теперь, когда я настроил блок завершения, я могу фактически изменить свойства представления. Система автоматически прикрепит анимации к слою, когда я это сделаю.

        // UIView will add animations for both of these changes.
        theImage.transform = CGAffineTransformMakeScale(newScale, newScale);
        theImage.center = destination;

я копирую некоторые ключевые свойства из автоматически добавляемой анимации позиции в анимацию ключевого кадра:

        // Copy properties from UIView's animation.
        CAAnimation *autoAnimation = [theImage.layer animationForKey:positionAnimation.keyPath];
        positionAnimation.duration = autoAnimation.duration;
        positionAnimation.fillMode = autoAnimation.fillMode;

и, наконец, я заменю автоматически добавленная анимация позиции с анимацией ключевого кадра:

        // Replace UIView's animation with my animation.
        [theImage.layer addAnimation:positionAnimation forKey:positionAnimation.keyPath];
    }];

Double-наконец, я обновляю переменные экземпляра, чтобы отразить изменение представления изображения:

    _currentScale = newScale;
    _isReset = !_isReset;
}

это все для анимации изображения без мерцания.

- (void)reset {
    self.imageView.center = _path1.currentPoint;
    self.imageView.transform = CGAffineTransformMakeRotation(startRadiansForPath(_path0));
    _currentScale = 1;
    _isReset = YES;
}

конечно, сложность заключается в том, что . Это не так уж сложно. Я использую CGPathApply функция для обработки элементов пути, выбирая первые две точки, которые фактически образуют подпутье, и я вычисляю угол линии, образованной этими двумя точками. (Криволинейный участок пути является либо квадратичным, либо кубическим сплайном Безье, и эти сплайны имеют свойство, что касательная на первая точка сплайна-это линия от первой точки к следующей контрольной точке.)

я просто собираюсь сбросить код здесь без объяснения причин, для потомков:

typedef struct {
    CGPoint p0;
    CGPoint p1;
    CGPoint firstPointOfCurrentSubpath;
    CGPoint currentPoint;
    BOOL p0p1AreSet : 1;
} PathState;

static inline void updateStateWithMoveElement(PathState *state, CGPathElement const *element) {
    state->currentPoint = element->points[0];
    state->firstPointOfCurrentSubpath = state->currentPoint;
}

static inline void updateStateWithPoints(PathState *state, CGPoint p1, CGPoint currentPoint) {
    if (!state->p0p1AreSet) {
        state->p0 = state->currentPoint;
        state->p1 = p1;
        state->p0p1AreSet = YES;
    }
    state->currentPoint = currentPoint;
}

static inline void updateStateWithPointsElement(PathState *state, CGPathElement const *element, int newCurrentPointIndex) {
    updateStateWithPoints(state, element->points[0], element->points[newCurrentPointIndex]);
}

static void updateStateWithCloseElement(PathState *state, CGPathElement const *element) {
    updateStateWithPoints(state, state->firstPointOfCurrentSubpath, state->firstPointOfCurrentSubpath);
}

static void updateState(void *info, CGPathElement const *element) {
    PathState *state = info;
    switch (element->type) {
        case kCGPathElementMoveToPoint: return updateStateWithMoveElement(state, element);
        case kCGPathElementAddLineToPoint: return updateStateWithPointsElement(state, element, 0);
        case kCGPathElementAddQuadCurveToPoint: return updateStateWithPointsElement(state, element, 1);
        case kCGPathElementAddCurveToPoint: return updateStateWithPointsElement(state, element, 2);
        case kCGPathElementCloseSubpath: return updateStateWithCloseElement(state, element);
    }
}

CGFloat startRadiansForPath(UIBezierPath *path) {
    PathState state;
    memset(&state, 0, sizeof state);
    CGPathApply(path.CGPath, &state, updateState);
    return atan2f(state.p1.y - state.p0.y, state.p1.x - state.p0.x);
}

Yow упоминают, что вы запускаете анимацию с "rotationMode, установленным в YES", но в документации указано, что rotationMode должен быть установлен с помощью NSString...

в частности:

эти константы используются свойством rotationMode.

NSString * const kCAAnimationRotateAuto

NSString * const kCAAnimationRotateAutoReverse

вы пробовали устанавливать:

ключевой кадр.animationMode = kCAAnimationRotateAuto;

в документации:

kCAAnimationRotateAuto: объекты перемещаются по касательной к пути.