タグ

ブックマーク / ics.media (2)

  • CSSイージングのお手本 - ease-out, ease-in, linearの使い分け - ICS MEDIA

    イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。ユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。記事はイージングの選定に役立つ、お手的な使い分け方を紹介します。 この記事の要約 イーズインは徐々に加速、イーズアウトは徐々に減速。 「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。 リニア(linear)は透明度の変化に使うとよい。 CSSのデフォルトのイージングは性格が弱いので、cubic-bezier()を使うのがよい。 イージングの性格 冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動き

    CSSイージングのお手本 - ease-out, ease-in, linearの使い分け - ICS MEDIA
    glass-_-onion
    glass-_-onion 2024/04/03
    イーズインとイーズアウトの説明が逆なのでこの記事の説明を鵜呑みにしてはいけない。デザイナは逆の説明をする人が多い、アニメータの人の説明のほうが正しい。https://cgworld.jp/article/2208-cg-yogojiten.html
  • HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA

    スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか? 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA(シングルページアプリケーション)など多岐に渡っています。そこで、記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。

    HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
    glass-_-onion
    glass-_-onion 2013/05/28
    これは良いレポート
  • 1