Transitions not suitable for older iPhones

1

I’m trying to use simple Crossfade with 0.5s transitions between scenes, but when I build my app on Xcode11 to an iPhone 6S (which is still very popular) the transition is clunky and very slow with poor performance. Is there a way to smooth them out, maybe using JS to create transitions instead of through the usual dropdown menu?

2

Some things that might make the transition less smooth:

  • The scene size is larger than the size of the device (this requires more graphics processing)
  • Using a large number of images, or images that are larger than they need to be

Can you share a Hype document with us?

3

AH, that’s probably it. The app is responsive, so I use one file to create an Universal App for iPhone, iPad and Mac. So the scene size, on an iPhone at least, is certainly larger than the device.

Maybe I should separate the platforms (a big undertaking at this point).

4

One thing to keep in mind is that large images* may have a rendering cost where a slow phone/browser may not be able to do all the rendering within one frame cycle. The basic image pipeline is:

  1. download image
  2. decode image to form a bitmap of its complete contents
  3. paint the image into a DOM element with the width/height
  4. composite the DOM element using any transforms and filters

Browsers tend to be as lazy as possible, so even if images are set to preload you could still incur costs for 2-4 when showing the image for the first time. Browsers do try to cache results from the steps as much as possible, but caches can be fickle based on memory pressure or “holes” of data where it may not be able to tell if it should keep the cache.

* “large images” in this case can refer to a few different aspects that can affect the pipeline:

  • A large file size would affect step #1 the most
  • A complicated SVG would affect step #2 the most
  • An image that is a very high resolution (say 4k or greater) being painted would affect Step #3 the most
  • A DOM element with a lot of filter effects may affect step #4 the most

(these are all basic/reduced examples, there’s often more complexity at play)

There’s usually no single panacea for performance problems; instead the route to go is to use profiling tools when possible to determine where there may be specific delays. Sometimes it is a death by a thousand cuts, but sometimes profiling reveals just one image with filter effects that is killing performance (Simply pre-rendering has solve those problem!)

1 Like