Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Every Frame Perfect

tonsky.me

Post reply on HN
Print view View original

141–150 of 293 posts

Re: Every Frame Perfect

#141

Post by cyberax »

billyp-rva wrote: post #97
geokon wrote: post #7

Earlier quoted context omitted.

Do you have some concrete examples? "Back-in-the-days" you'd click and stuff would instantly happen, and I don't remember anything being more difficult to visually interpret. On my Kubuntu desktop if I disable all animations (the whole compositor) I don't feel there is an increased cognitive load of rescaning things - but maybe it's my preexisting memory of the UIs and certain baked in UI expectations. Maybe this ani…

Consider trying to follow along with this app [0] without the transitions. Without them you'd experience much more cognitive load to staying oriented. [0] https://app.ilograph.com/demo.ilograph.Ilograph/Request

Well, yeah. This app's UI is horrible. It's both cluttered and sparse. But what's worse, it's ANNOYING.

The key here is that animations happen outside the foveal area. Our vision is tuned to be extremely sensitive to motion and changes _outside_ the foveal area. So when something moves at the corner of your vision, it distracts your attention from your current focus.

This makes a lot of "modern" UI literally anti-productive. It actively _slows_ _down_ people and increases cognitive load.

Re: Every Frame Perfect

#143

Post by krater23 »

ikesau wrote: post #4

I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like. At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts) I think many of these transitions a…

I think exactly that. When you add motion, do it right, but when you don't put time in to do it right, it's clearly the better option to leave it out completely. Without animations, much things feel snappier because you don't have to wait on a shitty animation thats running through.

Re: Every Frame Perfect

#144

Post by snackbroken »

satvikpendem wrote: post #20

An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place. I have mine at 0.5x and that feels sufficient, still fast…

It's jarring to see instant changes that don't make sense. Animations are primarily a way to paper over UI that sucks to begin with.

Many transitions in Android are perfectly fine at 0x animation speed. The majority of transitions that suck without animation suck because the pre-/post-transition layout sucks and the transition between the two states doesn't make sense as a result.

It's the same with several of the transitions in TFA. For example, the address bar placeholder text[1] should just be left-aligned all the time. The save dialog[2] should leave all the basic controls in their original location[3] when switching from the basic mode to the advanced mode. That means the "Where:" label should also remain in the advanced mode, and the controls[4] that pop up to replace it should either be moved to the right or below. The search bar should also be moved down.

These are some really basic details and it is my understanding Apple used to not screw them up nearly as badly.

[1]https://tonsky.me/blog/every-frame-perfect/safari@2x.mp4?t=1...

[2]https://tonsky.me/blog/every-frame-perfect/save@1x.mp4?t=178...

[3]https://imgur.com/ZpHLCsv Artist's rendition. Please excuse the minor jank and criminal amount of empty space; I couldn't be arsed to fiddle with the screenshots to get pixel-perfect positioning and shrink the advanced dialog horizontally. Bikeshedding over where exactly the new controls belong is welcomed but irrelevant to the point I'm making.

[4]Is it just me, or are their icons uselessly, impenetrably, unhelpful?

Re: Every Frame Perfect

#145

Post by designerarvid »

Dragning downwards on the iPhone Home Screen to search is a perfect example, the gradual blur animation is never auto playing once activated. Instead, it responds to your drag and you are always in control.

Re: Every Frame Perfect

#146

Post by tom_ »

pillmillipedes wrote: post #121
tom_ wrote: post #115

Earlier quoted context omitted.

Watching your own hand movements through your phone camera is a good demonstration of this. Set 60 Hz video mode, and the latency is probably less than 30 ms - but still extremely obvious.

it's quite a lot more than 30ms, as phone cameras do some real heavy-weight image processing to compensate for their tiny size, I'm talking neural networks and such. the throughput might be 60fps when it's all conveyor-ed but the latency sure isn't

You're right. Looks like it's more around 90 ms, at least for my iPhone 12 Mini. Test setup was taking a photo of the iPhone 12 Mini watching an incrementing counter on a 50 Hz CRT.

Re: Every Frame Perfect

#147

Post by Kiro »

lynndotpy wrote: post #135
Kiro wrote: post #98

Earlier quoted context omitted.

Which the majority of people think is a horrible experience. There's even a sibling comment in this thread pointing that out: https://news.ycombinator.com/item?id=48518721

Unless you can back that up, "Majority" is something you're making up. It's a guess. It also doesn't matter whether it's true if the majority or not- "Instant transitions are only good in theory" is not a true statement. Instant transitions are good in practice for many people and that has been true for decades.

Most people with that opinion keep using apps and devices with animations, but thinking it would be better without them. Very few actually torture themselves like that in practice.

Re: Every Frame Perfect

#148

Post by bee_rider »

ikesau wrote: post #4

I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like. At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts) I think many of these transitions a…

I think the “imperfect frames” on the Safari search bar are, practically, just fine and doing it in the way that looks better in screenshots would be worse.

The cursor appears on the left because that’s where the user will actually start writing. I assume that’s where people look, if they know the UI. Having it appear in the middle of the screen and then move over would be unnecessary and distracting.

The stand-in text slides over to the left, to draw the attention of the unfamiliar user.

Re: Every Frame Perfect

#149

Post by kridsdale3 »

iknowstuff wrote: post #129

This is begging for someone to spin up Mac OS X Tiger or Snow Leopard and compare! I recall their butter smooth rollout animations looking pixel perfect

I suspect the specific versions you call out were in that time period for a reason.

Snow Leopard was the first to integrate iOS's CoreAnimation framework. Nearly all animations now are based on that. Before, the CPU manually updated the sizes and positions of things, frame by frame, in a loop. This is how you'd program a Game Engine.

After, with CA, state-change property models are sent to a different process entirely which does its own interpolation to animate the UI at a higher thread-priority than any other process in the operating system. This is fantastic if maintaining 60+ FPS at all times, even on an iPhone 1 or 3G with less power than you'd have in today's AirPod chips, was a central requirement. (And it was, the first iPhones dominated their competitors in terms of input latency and framerate)

But programming CoreAnimation is much more complicated and easy to make mistakes in if you want "every frame perfect". Trust me, I made a lot of the animations that shipped in iOS 7 (the Calendar app is full of them, OS level transitions for the core chome elements of iOS). It took nearly a year of meticulousness to get things looking ok. In the years since I left the company, I've noticed these transitions get more and more janky and buggy and full of artifacts. Clearly, whoever replaced me doesn't have the same eye and sense of craft. Oh well.

Re: Every Frame Perfect

#150

Post by willXare »

fasterik wrote: post #55

I agree that some of the examples the author provided are instances of bad animation. But I don't agree with the premise of the article. Computer graphics is all about exploiting features of the human visual system. We perceive things differently when they're moving vs. when they're standing still. It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. We can also pick ap…

[flagged]
Post reply on HN