UIImageView上的iOS CAKeyframeAnimation rotationMode

时间：2012-02-27 16:42:45

标签： ios rotation cakeyframeanimation

我正在试验沿着贝塞尔曲线路径移动的UIImageView对象位置的关键帧动画。该图显示了动画之前的初始状态。蓝线是路径 - 最初直线向上移动，浅绿色框是初始边界框或图像，深绿色“鬼”是我正在移动的图像：

Initial state

当我将rotationMode设置为nil时启动动画时，图像会按预期在路径中保持相同的方向。

但是当我将rotationMode设置为kCAAnimationRotateAuto时启动动画时，图像会立即逆时针旋转90度并保持此方向一直通过路径。当它到达路径的末尾时，它会以正确的方向重绘（实际上它显示了我在最终位置重新定位的UIImageView）

enter image description here

我天真地期望rotateMode会将图像定向到路径的切线而不是正常，特别是当Apple文档为 CAKeyframeAnimation rotationMode状态时

  

确定沿路径设置动画的对象是否旋转以匹配路径切线。

那么这里有什么解决方案？我是否必须将图像顺时针旋转90度？或者有什么我想念的东西？

感谢您的帮助。

编辑3月2日

我使用仿射旋转在路径动画之前添加了一个旋转步骤，如：

theImage.transform = CGAffineTransformRotate(theImage.transform,90.0*M_PI/180);

然后在路径动画之后，使用：

重置旋转 
theImage.transform = CGAffineTransformIdentity;

这使图像以预期的方式跟随路径。但是我现在遇到了图像闪烁的另一个问题。我已经在寻找这个SO问题中闪烁问题的解决方案：

iOS CAKeyFrameAnimation scaling flickers at animation end

所以现在我不知道我是不是让事情变得更好或更糟！

编辑3月12日

虽然Caleb指出是的，我确实需要预先旋转我的图像，Rob提供了一个很棒的 几乎完全解决了我的问题的代码包。 Rob没有做的唯一事情是补偿我的资产是用垂直方向而不是水平方向绘制的，因此在做动画之前还需要将它们预先旋转90度。但是，嘿，我唯一需要做的工作才能让事情顺利进行。

所以我对Rob的我的要求的解决方案略有改动：

  1. 当我添加UIView时，我预先旋转它以通过设置rotationMode来对抗添加的固有旋转：

    theImage.transform = CGAffineTransformMakeRotation（90 * M_PI / 180.0）;

  2. 我需要在动画结束时保持旋转，所以不是在定义完成块之后用新的比例因子对视图的变换进行爆破，而是根据当前变换构建比例： / p>

    theImage.transform = CGAffineTransformScale（theImage.transform，scaleFactor，scaleFactor）;

    3. 而这就是我必须做的就是让我的形象按照我的预期走这条路！

    编辑3月22日

    我刚刚向GitHub上传了一个演示项目，该项目展示了沿着贝塞尔路径移动物体的过程。代码可以在PathMove

    找到

    我也在Moving objects along a bezier path in iOS

    的博客中写过这篇文章

3 个答案:

答案 0 :(得分：8)

这里的问题是Core Animation的自动旋转使视图的水平轴保持与路径的切线平行。这就是它的工作原理。

如果您希望视图的垂直轴跟随路径的切线，则在您正在进行的操作时旋转视图的内容是合理的。

答案 1 :(得分：6)

以下是消除闪烁所需了解的内容：

  • 正如Caleb指出的那样，Core Animation会旋转您的图层，使其正X轴位于路径的切线上。您需要使图像的“自然”方向与之相配。因此，假设你的示例图像中是绿色太空飞船，当没有应用旋转时，你需要太空飞船指向右边。

  • 设置包含旋转的变换会干扰`kCAAnimationRotateAuto'所应用的旋转。在应用动画之前，您需要从变换中删除旋转。

  • 当然，这意味着您需要在动画完成时重新应用转换。当然，您希望在不看到图像外观闪烁的情况下这样做。这并不难，但有一些秘密的问题，我在下面解释。

  • 你可能希望你的宇宙飞船开始指向路径的切线，即使宇宙飞船还没有动画。如果您的太空飞船图像指向右侧，但路径上升，则需要将图像的变换设置为包含90°旋转。但也许你不想对旋转进行硬编码 - 而是想要查看路径并找出它的起始切线。

我将在这里展示一些重要的代码。你可以找到my test project on 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;

接下来是用于防止动画结束时闪烁的秘密酱。回想一下，动画不会影响您将它们附加到的“模型图层”的属性（在这种情况下为theImage.layer）。相反，它们会更新“表示层”的属性，这反映了屏幕上实际显示的内容。

首先，我将removedOnCompletion设置为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-finally我更新我的实例变量以反映对图像视图的更改：

    _currentScale = newScale;
    _isReset = !_isReset;
}

这就是为图像视图设置动画而没有闪烁。

现在，正如史蒂夫乔布斯所说的那样，“最后的一件事”。当我加载视图时，我需要设置图像视图的变换，以便它旋转到指向我将用于为其设置动画的第一条路径的切线。我在名为reset的方法中执行此操作：

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

当然，棘手的位隐藏在startRadiansForPath函数中。这真的不是那么难。我使用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);
}

答案 2 :(得分：3)

是的，你提到你用“rotationMode设置为YES”启动动画，但文档说明应该使用NSString设置rotationMode ......

特别是：

  

这些常量由rotationMode属性使用。

     

NSString * const kCAAnimationRotateAuto

     

NSString * const kCAAnimationRotateAutoReverse

您是否尝试过设置：

keyframe.animationMode = kCAAnimationRotateAuto;

文档说明：

  

kCAAnimationRotateAuto：物体在路径的切线上移动。

相关问题
最新问题