Альтернатива анимированному PNG-файлу для iPhone-приложения или Mobile Safari, цель состоит в том, чтобы имитировать мгновенное воспроизведение короткого видеоклипа.

Question

Наша цель - мгновенно отображать 3-5 секунд видеоклипа, когда кто-то нажимает кнопку.

Отображение фактического видео предполагает задержку в несколько секунд, что неприемлемо. Нам нужно, чтобы воспроизведение ощущалось мгновенно.

Преобразование этих 3-5 секунд в анимированный PNG - отличная альтернатива, но анимированные PNG не будут работать в приложении для iPhone.

Лучшей альтернативой теперь является использование тех же изображений, которые используются для создания анимированного PNG, и анимация серии изображений в JavaScript.

Может ли кто-нибудь подумать о лучшей альтернативе?

Answer 1

Если вы не загрузите их, изображения будут иметь ту же проблему, что и видео, по крайней мере 700 мс на большинстве сотовых.

Что вы можете сделать, так это иметь изображение спрайт, действующее как катушка для фильма, аналогично тому, что делает Google для своих анимированных каракулей. Вы в основном помещаете всю анимацию в одно длинное изображение, помещаете ее в качестве фона, а затем используя JavaScript, продвигайте положение фона в каждом кадре. Например, если у вас есть 3s 200x100 изображение, которое вы хотели, чтобы перейти каждые 100 мс, вы можете сделать:

<div class="thumb" style="background-image: url(vid1.png); width:200px; height:100px" data-frames="30"> 
</div> 

$('.thumb').bind('click', function() { 
    var $img = $(this); 
    var startTime = Date.now(); 
    var frames = $img.attr('data-frames'); 
    var width = $img.width(); 

    setInterval(function() { 
    var frame = Math.round((Date.now() - startTime)/100) % frames; 
     $img.css('background-position', -frame * width + 'px 0'; 
    }, 100); 
}); 

Update

Поскольку вы используете только изображение здесь, вы больше не предел по формату. Лучшим вариантом может быть перекодирование диафильма как 60% или 85% JPG, что значительно уменьшает размер файла. Поскольку вы анимируете, качество становится менее важным.

Update 2

Я имел в виду, чтобы включить кадр пропуска для случаев, когда тайм-ауты не являются совершенными.

Answer 2

UIImageView поддерживает animationImages. Это анимированный PNG для всех целей и задач. @Brian правильно, но у вас будет небольшая задержка, если вы не загрузите предварительно.

Так что мой совет - предварительно зарядить.

Это точно так же, как и для видео. Вы можете получить MPMoviePlayerController весь набор, чтобы играть, просто не добавляйте представление и играйте до тех пор, пока не будет нажата кнопка.

Анимация изображения идея:

- (void)readySet { 

    NSMutableArray *images = [NSMutableArray array]; 

    for (int i=0; i<kIMAGE_COUNT; i++) { 
     NSString *fn = [NSString stringWithFormat:@"image%d.png"]; 
     UIImage *image = [UIImage imageNamed:fn]; 
     [images addObject:image]; 
    } 
    self.myUIImageView.animationImages = [NSArray arrayWithArray:images]; 
} 

// go runs fast if we run readySet first 
// 
- (void)go { 

    [self.myUIImageView startAnimating]; 
} 

Видео идея

// A little more complex because we need to get notified that it's ready to play, 
// but the same principal... 

- (void)readySet { 

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(moviePlayerLoadStateChanged:) name:MPMoviePlayerLoadStateDidChangeNotification object:nil]; 

    MPMoviePlayerController *player = [[MPMoviePlayerController alloc] initWithContentURL:url]; 

    player.shouldAutoplay = NO; 
    [player prepareToPlay]; 
    self.mp = player; 
} 

- (void)moviePlayerLoadStateChanged:(NSNotification*)notification { 

    MPMovieLoadState state = [self.mp loadState]; 
    if (state & MPMovieLoadStatePlaythroughOK) { 
     [[NSNotificationCenter defaultCenter] removeObserver:self name:MPMoviePlayerLoadStateDidChangeNotification object:nil]; 

     self.mp.view.frame = CGRect(/* where it will appear */) 
    } 
} 

// go runs fast if we run readySet first (and the movie is ready) 
// 
- (void)go { 

    MPMovieLoadState state = [self.mp loadState]; 
    if (state & MPMovieLoadStatePlaythroughOK) { 
     [self.view addSubview:self.mp.view]; 
     [self.mp play]; 
    } else { 
     self.mp.shouldAutoplay = YES; 
    } 
}