ios - 对象（动物）的自定义动画

Question

我看过动画，但我不知道如何在这个视频（youtube）中做类似的事情。我想讨论它是如何制作的。我不认为他们正在使用精灵。

我有一个想法如何做到这一点：例如，我想创建“行走”动物的动画（当动物移动时，他的腿“跑”移动动画），我应该使用 animalBody 3的 imageView和动物腿的两个imageView 创建 customView 2 . 然后我制作了移动腿的硬编码动画，瞧，我有自定义动画。当我移动 customView 时，我应该开始腿部动画。但是有更好的方法来做到这一点吗？谢谢！

Answer 1

你必须制作每一张你想使用的照片。因此，在 Photoshop（或您的软件）中，您可以制作 30 张图片，所有相同的分辨率和大小，动物“奔跑”（在每张照片中移动一点腿）您只需要一个图像视图，而不是 3 个。请记住，您的常规视频是每秒 30 帧。因此，如果您要让动画播放一秒钟，您至少需要 20 张图片。这是您要在 .m 文件中使用的代码：

- (IBAction)animation{
animationView.animationImages = [NSArray arrayWithObjects:
                                   [UIImage imageNamed:@"PR-P-1"], //use your image names here, put the names in in order, I recommend making the images initially with a number to tell you which one in the sequence it is
                                   [UIImage imageNamed:@"PR-P-2"],
                                   [UIImage imageNamed:@"PR-P-3"],
                                   [UIImage imageNamed:@"PR-P-4"],
                                   [UIImage imageNamed:@"PR-P-5"],
                                   [UIImage imageNamed:@"PR-P-6"],
                                   [UIImage imageNamed:@"PR-P-7"],
                                   [UIImage imageNamed:@"PR-P-8"],
                                   [UIImage imageNamed:@"PR-P-9"],
                                   [UIImage imageNamed:@"PR-P-10"],
                                   [UIImage imageNamed:@"PR-P-11"],
                                   [UIImage imageNamed:@"PR-P-12"],
                                   [UIImage imageNamed:@"PR-P-13"],
                                   [UIImage imageNamed:@"PR-P-14"],
                                   [UIImage imageNamed:@"PR-P-15"],
                                   [UIImage imageNamed:@"PR-P-16"],
                                   [UIImage imageNamed:@"PR-P-17"],
                                   [UIImage imageNamed:@"PR-P-18"],
                                   [UIImage imageNamed:@"PR-P-19"],
                                   [UIImage imageNamed:@"PR-P-20"],
                                   [UIImage imageNamed:@"PR-P-21"],
                                   [UIImage imageNamed:@"PR-P-22"],
                                   [UIImage imageNamed:@"PR-P-23"],
                                   [UIImage imageNamed:@"PR-P-24"],
                                   [UIImage imageNamed:@"PR-P-25"],
                                   [UIImage imageNamed:@"PR-P-26"],
                                   [UIImage imageNamed:@"PR-P-27"],
                                   [UIImage imageNamed:@"PR-P-28"],nil]; //make sure to have nil!


animationView.animationRepeatCount = 1; //sets how many times it repeats, do a huge number for infinate
animationView.animationDuration = 2.5; //sets how long one repeat takes
[animationView startAnimating]; //starts the animation

}

然后IBOutlet在你的 .h 文件中声明一个应该是UIImageView命名的animationView

如果您想要另一个动画，只需使用与上面相同的代码，更改名称IBAction并在您的 .h 文件中创建另一个IBOutlet，这将再次成为 aUIImageView并将其命名为与您相同的名称IBAction，例如，如果您制作了另一个名为 playViolin 的 IBAction，您的 .h 文件中的 IBOutlet 将是 playViolin

然后在你的 .xib 文件中，创建一个新的图像视图，并animationView从文件的所有者那里连接到它，你应该已经设置好了。只需[self animation]在您希望它启动时调用。

Answer 2

为了获得简单的效果，您可以将左脚和右脚保存为单独的图像，然后您可以调用一个重复的、自动反转的动画transform，每个动画的属性独立地旋转腿部图像，例如：

// start one foot animation immediately

[UIView animateWithDuration:0.25 animations:^{
    self.leftFootImageView.transform = [self calculateTransformForFootToAngle:M_PI / 8.0];
} completion:^(BOOL finished) {
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
        self.leftFootImageView.transform = [self calculateTransformForFootToAngle:-M_PI / 8.0];
    } completion:NULL];
}];

// delay the second foot's animation a bit, if you want
// (if you don't want to change the timing of the right foot, you
// could just combine the setting of the right foot's `transform`
// in the above block)

double delayInSeconds = 0.1;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
    [UIView animateWithDuration:0.25 animations:^{
        self.rightFootImageView.transform = [self calculateTransformForFootToAngle:M_PI / 8.0];
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
            self.rightFootImageView.transform = [self calculateTransformForFootToAngle:-M_PI / 8.0];
        } completion:NULL];
    }];
});

显然，您需要一种计算CGAffineTransform值的方法：

- (CGAffineTransform)calculateTransformForFootToAngle:(CGFloat)angle
{
    // translate up, rotate, and then translate back, so that the rotation takes place at the top of the leg

    CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -15);
    transform = CGAffineTransformRotate(transform, angle);
    return CGAffineTransformTranslate(transform, 0, 15);
}

以上假设您已将单个脚部图像定义为非常小，只是脚部的边界，而不是所有的空白。您必须使用对您的图像有意义的翻译值。

最后，当您想停止动画时，您可以将腿动画化回身份变换：

[UIView animateWithDuration:0.25 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
    self.leftFootImageView.transform = CGAffineTransformIdentity;
    self.rightFootImageView.transform = CGAffineTransformIdentity;
} completion:NULL];

Answer 3

这是一个很好的教程，很好解释：

http://www.appcoda.com/ios-programming-animation-uiimageview/