モーションの性能予算
収録 2026-10
モーションの性能予算(中国語の原文)
移动端页面上有 [背景模糊、大面积位移、阴影动画、列表淡入] 四种动效。请给出性能预算:目标帧率、允许同时运行的动效数量、只允许动画哪些 CSS 属性、哪些属性禁止动画、单次动效的最大影响面积。逐条指出上述四种里哪个最危险,并给一种视觉接近但更省性能的替代做法。
当サイトオリジナル
中国語の原文
使用例
入力例
移动端有背景模糊、大面积位移、阴影动画、列表淡入四种动效,先定一套性能预算。
出力に含まれるもの
- 给目标帧率与可同时运行的数量
- 只允许动画哪些属性要写清
- 指出最危险的一种并给轻量替代
置き換えるプレースホルダー 1
括弧の中をご自身の情報に置き換えてから送ってください。
[背景模糊、大面积位移、阴影动画、列表淡入]
使い方
只动 transform 和 opacity,其它属性再好看也容易掉帧。
こう変えてみる
- スタイル語を、光・レンズ・素材・構図などの測定可能なパラメータに置き換える。
- 同じプロンプトで三つのバリエーションを出させ、差分を比べる。
得られる成果物
- そのまま指定できるパラメータ表(光・レンズ・素材・構図)
- 二〜三の代替案とそれぞれの取舍
よくある失敗
- 「高級感・シネマティック・8K」を並べると毎回結果が変わる。
- 実在ブランドや著名人の再現を求め、似ているが使えない画像になる。
出力のチェック
- パラメータが実行可能で、ツールやデザイナーにそのまま渡せる。
- なぜその光・構図なのか、取捨選択の理由がある。
使いどころと注意
- 向いている用途:曖昧な「高級感」を光・素材・レンズ・構図などの具体的なパラメータに分解する。
- 注意:実在のブランド・著名人・他人の作品は、権利侵害を避けて等価な表現に置き換える。