速くするつもりの1行が、写真をぼかす

トップの写真を、スクロールで縦に伸ばし、細く潰して消えるように動かした。下まで送って戻ると、写真がぼけて見える。動かし方ではなく、滑らかにするつもりで足した2行が原因だった。

この研究を一言でいうと──写真1枚を動かすだけなら、固めない方がきれいに戻る。

固めた画素が、そのまま使い回される

will-change と blur は、その要素を別の層に固める。層は一度画素に焼かれ、そのまま拡大縮小される。横 0.18倍まで潰した時点で、画素の少ない層が作られる。戻しても、その少ない画素が使い回される。

直らなかったこと、直ったこと

どちらも付けないと、毎コマ元の写真から描き直される。写真1枚を伸ばすだけなら、滑らかさは落ちなかった。パソコンでもスマホでも同じだった。

ぼかしも要らなかった

消えていく感じを出すために blur を足していた。縦に 4.4倍に伸びて薄くなれば、それだけで溶けて消えて見える。足した効果が、絵を壊す側に回っていた。

あなたが速くするために足した1行は、何を固めていますか。

「直した」と「見えるようになった」は別物、の研究を読む →