Question

我看过动画，我无法弄清楚如何做这个video（youtube）。我想讨论它是如何制作的。我认为他们没有使用精灵。

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

enter image description here

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

}

然后在.h文件中声明IBOutlet，该UIImageView应该是名为animationView的{{1}}

如果您想要另一个动画，只需使用与上面相同的代码，更改IBAction的名称并在.h文件中创建另一个IBOutlet，这将再次成为UIImageView并将其命名为与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/

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

3 个答案: