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

231–240 of 293 posts

Re: Every Frame Perfect

#231

Post by iamcalledrob »

The root cause of this stuff, from experience, is that animations are hard to retro-fit after the fact. It's a lack of planning.

The UI code needs to be structured with animation in mind, with hooks in the right places. And to do that, you need to know what is likely to be animated together.

But what ends up happening is you encapsulated a few of the moving pieces in abstractions (e.g. "toolbar", "sidebar"), but you want to animate stuff within. You end up copy+pasting animation logic inside each (now leaky) abstraction and duct taping it all together. UI abstractions are hard!

(Yes, on apple platforms there are transition blocks which will capture changes to the entire view hierarchy, but then the battle becomes preventing animations on stuff that shouldn't change!)

Re: Every Frame Perfect

#232

Post by fragmede »

rcxdude wrote: post #122
Lalabadie wrote: post #96

Earlier quoted context omitted.

For UI purposes, sub-150ms animations can be very effective as "pro" interface behaviours. That's close to our best reaction time [1]. Good UI personality doesn't have to get in the way of pro-level efficiency. One of the ways to achieve this is to not actually transition between states, but simply animate the "end bounce" of an introduced element, as if it was eased into position. So not actually slid from the left,…

If the animations are effectively 'cancellable', i.e. they don't block input or delay the change in state, this can be reasonable. You can put in a sequence of actions into a UI at a much faster pace than 100ms, if you have the muscle memory for it.

Using a keyboard or other hardware input device, yes however in today's modern touchscreen world, you have to wait for the UI to render before you can get to the next step so you do build up a step for the next step memory, but you do have to watch the screen so it's not exactly muscle memory.

Re: Every Frame Perfect

#233

Post by jcelerier »

hamburglar wrote: post #95
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…

I think it’s pretty telling that with the YouTube example, I legitimately couldn’t figure out what he could have a problem with until he slowed it down. The overall effect worked and gave the impression that it was aiming for. The fact that you can get out your calipers and find flaws in a paused animation is not compelling in the least to me. I don’t think looking at your animations in slow motion is a bad exercise…

It's crazy for me to think that people cannot see how wrong it is from the normal speed video. For me it's obvious and infuriating, it physically feels like it's punching my retina

Re: Every Frame Perfect

#234

Post by mariusor »

mananaysiempre wrote: post #125
Lalabadie wrote: post #96

Earlier quoted context omitted.

For UI purposes, sub-150ms animations can be very effective as "pro" interface behaviours. That's close to our best reaction time [1]. Good UI personality doesn't have to get in the way of pro-level efficiency. One of the ways to achieve this is to not actually transition between states, but simply animate the "end bounce" of an introduced element, as if it was eased into position. So not actually slid from the left,…

> ~100ms represents optimal [human] reflex time in recent research. For unpredictable inputs. Intervals between a human own actions or discrepancies in delays between successive external events can be effected or perceived with significantly greater precision, especially for people with e.g. music training, especially for percussionists. I’d bet on somewhere between one and two orders of magnitude more precision, tha…

I'm pretty sure that the way speedrunners get their fast times are by either anticipating, or more likely, by finding an earlier trigger event that correlates, and allows them to hit the frame perfect timing.

Re: Every Frame Perfect

#235

Post by LinAGKar »

Terr_ wrote: post #167
jakelazaroff wrote: post #120

Earlier quoted context omitted.

We do this in cartoons as well. Check out this Spider-Verse animator breaking down a shot of Gwen drumming. [1] If you look at individual frames, there are all sorts of details that make no logical sense. In one frame, she actually has three hands! But it looks great if you see it in motion. [1] https://xcancel.com/hf_rosa/status/1089675426312552449

Or "squash and stretch" [0] frames cartoons and 3D modeling, where people prefer the final result even though individual frames can be grotesque. That said, I think it's fair to hold most practical UIs to a different standard. Prioritizing amusement leads to a lot of strange non-ergonomic places. [0] https://en.wikipedia.org/wiki/Squash_and_stretch

Of course, even real life can look quite grotesque if you look at it in slow motion, as things get deformed by forces [0], so it makes sense animations would need to simulate that.

[0] https://youtu.be/On1CsbTwlDs?si=0UZADk-jtJvOQGww&t=33

Re: Every Frame Perfect

#236

Post by cwillu »

Kiro wrote: post #98
cwillu wrote: post #75

Earlier quoted context omitted.

Indeed: one of the first things I do on a new android phone is activate developer mode specifically so that I can set the animation timescale to 0×.

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

Perhaps you should note the replies to that sibling comment

Re: Every Frame Perfect

#237

Post by embedding-shape »

Groxx wrote: post #187
embedding-shape wrote: post #33

Earlier quoted context omitted.

After using Android for like a decade, I eventually succumbed and got a iPhone 12 Mini (back when it was new). I still miss the ability of turning off animations as I could do on Android, and I'm 110% my current phone would feel 200% faster if I could just turn off every damn animation that just exists to exists. I'd much rather have a second to process if that's needed (which I don't think it is), than being slowed…

Try "reduce motion"? It's not quite the same thing (prefers cross-fades in many cases), but it might help. Anecdotally some things are noticeably faster, and not having them swing around before settling lets me get a read on their location faster.

Sadly, basically no difference :/ https://news.ycombinator.com/item?id=48520988

Re: Every Frame Perfect

#238

Post by Hendrikto »

bwhmather wrote: post #181
bee_rider wrote: post #148

Earlier quoted context omitted.

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 te…

To add to this, experienced users will often start typing without looking based on what they trust the eventual state of the UI will be. Moving the cursor immediately makes it explicit that this should work. This is following a more important rule which is "Never make keyboard input timing dependent!" I'm looking at you new Windows start menu and VS Code quick open.

> experienced users will often start typing without looking based on what they trust the eventual state of the UI will be

Does that not still point to bad animation if for a different reason?

The animations seem to be a workflow hindrance rather than helpful.

Re: Every Frame Perfect

#239

Post by Hendrikto »

gf000 wrote: post #217
lynndotpy wrote: post #62

Earlier quoted context omitted.

Maybe you dislike them, but that does not make for a fact. Instant transitions are something I strongly prefer and use in practice. There's no question, I don't want my operating system slowing itself down to a factor (literally) of 1000x, pointlessly fading and jiggling and sliding and bouncing and wiggling. And, as this article points out, animations in operating systems often make a visually illegible mess in the…

Real life has everything "animated". Nothing happens in an instant, there is force required to accelerate mass, etc. Short, well-done animations make for better UIs.

> Short, well-done

This is the neglected key point. None of the examples were short or well-done.

Re: Every Frame Perfect

#240

Post by Hendrikto »

bsder wrote: post #216
Kiro wrote: post #36

Earlier quoted context omitted.

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

> Instant transitions are only good in theory. For a professional tool, animations are anathema . They interfere with muscle memory. Someone who uses a program continuously can be clicking or typing before a dialog box or button is even in the right position. My wife drives me MAD with this. She has already clicked the cancel button on a popup before I can even read the first word in the dialog box. This is fine when…

The amount of times people asked me for help without even reading the very obvious error message is astonishing. Many people just completely switch off their brain when anything goes wrong.
Post reply on HN