ホームページ ウェブフロントエンド htmlチュートリアル Android アニメーションを学習するにはどうすればよいですか? _html/css_WEB-ITnose

Android アニメーションを学習するにはどうすればよいですか? _html/css_WEB-ITnose

Jun 21, 2016 am 08:58 AM

Android 開発者の Web サイトで「アニメーション」を検索し、「ブログ」で検索結果をフィルタリングすると、最初の 2 ページのみを抜粋して 2 つのカテゴリに分けました。アニメーションはどのようなものですか (カテゴリ 1)

次のブログ投稿では、開発者に次の 3 つの側面から「アニメーション」を示します:

  • いくつかの指針を示し、アニメーション化する理由を説明します。この方法、またはそのようなアニメーションの利点は何ですか。

  • アニメーションが何であるかを視覚的に示すために

  • を与えます。このアニメーションを実装するコード スニペット (主要なクラス、メソッド、リソース ファイル) または実装アイデア。

    ​​

これは非常に優れており、アニメーションの印象をすばやく確立するのに役立ちます。特定の名詞で表されるアニメーションがどのようなものであり、それをどのように実装するか。また、多くのコード スニペットはオープン ソース プロジェクトから抜粋されているため、これらのアニメーションをデバッグできます。

2014-08-05 2014 Google I/O アプリのマテリアル デザイン

この記事の著者は Google I/O アプリのチーフ デザイナーであり、I/ O アプリの役割の 1 つは、

Android の設計と開発のベスト プラクティスを提供することです (Android の設計と開発のベスト プラクティスの参照デモとして機能します)。この記事では特に について言及しています。私のお気に入りのアプリの詳細の 1 つはアニメーション に関連しています。つまり、フローティング アクション ボタンの状態は、「ユーザーが現在のページでこの会議に参加するかどうか」に基づいて変化します。アニメーションによって。この記事ではアニメーションの実装手順について詳しく説明していますが、コードはリストされていませんが、実装の詳細を理解するには github-google-io-app からソース コードを入手できます。

2014-10-24 Android アプリにマテリアル デザインを実装する

この記事の半分は

『モーション』についてです: ユーザーが画面に触れるとすべてが変化します。接触点から始まり、外側に放射状に広がり、画像の変遷につながりと連続性を確立する 、これらは有意義で親しみやすいものでなければなりません。マテリアルは、このようにユーザーにフィードバックを提供し、変化に気づくようにすることでユーザーを支援します。 (注意を集中させ、空間関係を確立し、連続性を維持するため。マテリアルはタッチに反応してユーザーのインタラクションを確認し、すべての変化がタッチポイントから外側に放射状に広がります。すべての動きは意味があり、親密なものであり、ユーザーの理解を助けます。)それぞれ紹介します:

  • アクティビティとフラグメントの遷移: 2 つのページ間のスムーズな遷移は、リスト ビューから詳細ビューに切り替えることです。 >

  • Ripples
  • : 波紋は、ビュー全体を満たすまで接触点から外側に広がります。この効果は、Theme.material から継承されたボタンをクリックすると確認できます。

  • StateListAnimator
  • : ビューの状態が変化するときのアニメーション

  • Circular Reveal
  • : 1 つ円形のセクターは、ビュー全体を満たすまで接触点から外側に放射状に広がります。このトランジション効果は、新しいコンテンツを表示するためによく使用されます。

    インターポレーター

    :アニメーションが変化する速度 (アルファ、スケール、平行移動、回転による加速、減速、繰り返しなどを許可するなど)。たとえば、補間器 fast_out_slow_in は加速を開始し、終了するまで徐々に減速します。このアニメーション効果により、オブジェクトはモーション軌跡全体の終点付近でより多くの時間を費やします。さまざまなシーンに応じて、異なるインターポレーターまたはカスタム インターポレーターを選択すると、アニメーションをより意味のあるものにし、同じ印象を取り除くことができます。
  • 2015-05-28 マテリアル デザイン ショーケースと賞の発表

    この記事では、2014 年 6 月に初めて発表されたときのマテリアル デザインのビジョンを初めてレビューします
  • 『プラットフォームやブランドを超えて機能する単一のデザイン システム』
。しかし、これらのビジョンとマテリアル デザインの設計思想はすべて「架空のアプリ」を通じて実証されます。その後、この記事が公開された 2015 年 5 月に世界は変わり、多くのアプリが Android 5.0 SDK と AppCompat を通じてマテリアル デザインを受け入れ、実装しました。

そこで、マテリアル デザインに準拠した 18 個のアプリを特別に集め、そのアニメーション効果により、そのうち 6 個がマテリアル デザインの特定の側面で優れたパフォーマンスを発揮したとして、第 1 回マテリアル デザイン賞を受賞しました。優勝者は Tumblr: Delightful Animation です。

どのようなアニメーション効果を作成できるか、公式は Tumblr をチェックするように言っています。

2015-06-16 Topeka によるその他のマテリアル デザインAndroid
この記事は、オープンソース Android アプリ プロジェクト Topeka for Android のドキュメントです。この記事は、マテリアル デザインの設計原則を実証

し、開発者がさまざまなプラットフォームで統合ユーザーを構築するのに役立ちます。経験。 (原文: 同じブランディングとマテリアル デザインの原則を使用して、プラットフォーム間で一貫したエクスペリエンスを作成できることを示しています。)

Topeka は、グリッド レイアウトで表示される 9 種類の質問を含む楽しい質問と回答のアプリケーションです。質問に回答すると、次の質問に切り替わります。空白を埋める多肢選択問題やその他の種類の問題 (さまざまな UI コンポーネントに対応) があります。多くのアニメーション要素が含まれています:

  • トランジション: アクティビティ間の優れたトランジション

  • アニメーション: アニメーションが慎重に配置されています。質問に回答すると、フローティング操作ボタンが表示され、回答を送信するボタンをクリックすると、回答が正しいかどうかに応じて、対応するアニメーションが再生されます。 ;

  • プロパティ アニメーション: FAB の色から透明へのカラー グラデーション アニメーションを追加すると、円形のリビールを円形に表示するディゾルブのようなエフェクトが作成されます。
    (前の GIF にはこのエフェクトが含まれていますが、速すぎてエフェクトが見えません。次の GIF はアニメーションを強調表示するために時間を延長しています)

アニメーション関連のクラスとインターフェイス ( カテゴリ 2)

2011-05-30 ViewPropertyAnimator の紹介
2011-02-24 ハニカムでのアニメーション
2011-11-01 Android 4.0 グラフィックスとアニメーション

最初の 2 つの記事は、まず質問があります。移動、拡大縮小、回転、フェード ビュー アニメーションを実装できる android.view.animation がすでにあります。 3.0 で新しい API が導入されたのはなぜですか?どのような新機能がもたらされるのでしょうか? 次に、これらの新機能の強力な利便性をさらに実証します。 3 番目の記事では、4.0 が 3.0 のコア機能に追加する小さな改良点について説明します。 (これらの記事では、Android でのアニメーションをより簡単、より強力、より柔軟にする 3.0 で追加された新しい API について説明します。以下で説明する Android 4.0 の改良点は、これらのコア機能への小さな追加です。)

これらの記事はランク付けされています。最初のいくつかの検索結果は、その重要性を示しています。著者は、グラフィックスとアニメーションの研究を専門とする Android 開発者です。彼の個人ブログ graphics-geek.blogspot.com から、関連トピックに関するその他のブログ投稿を読むことができます。

HONEYCOMB 3.0 (バージョン android-3.0 のハイライトについて) は 2011.02 にリリースされ、新しいアニメーション フレームワークが導入されました。3.1 は 2011.05 にリリースされ、ICE_CREAM_SANDWICH 4.0 は 2011.11 にリリースされました。 これらのブログ投稿のリリース時間は、対応するシステム バージョンのリリース時間と一致しています。そのうち 2 つは Android API ガイド: アニメーションとグラフィックスのページで推奨されているため、 より注意を払う必要があります。公式開発者記事 にアクセスして学習してください。

2015-04-21 Android サポート ライブラリ 22.1
この記事では、Android サポート ライブラリ 22.1 バージョンによってもたらされる新機能を紹介します。アニメーション関連のコンテンツは次のとおりです。 Lollipop android.R.interpolator いくつかの新しい補間器がサポート V4 でサポートされています。

上記の記事を読み進めると、「アニメーションとはどのようなものを作ることができるのか」「アニメーションを実装するクラスやインターフェース、技術の進化の歴史」を理解できるようになります。自分が高い立場に立って戦略を練っていると感じますか? Android ドキュメントの海に溺れたり、膨大な数の技術的な詳細に混乱したりすることはないと思います。また、デモを学習するときは、それほどスキルが必要ではないと感じます。そのため、上記の公式記事の公式サンプルとデモから始めて、API ガイドも確認する必要があります:

Android Training & Guides

Android 開発者 Web サイトから提供されます。 トレーニング:
シーンとトランジションを使用したビューのアニメーション化
アニメーションの追加
カスタム アニメーションの定義

Android 開発者 Web サイトから提供される API ガイド:
アニメーションとグラフィックの概要

公式サンプルを入手するにはさまざまな方法があります: Android Studio に直接インポートするなど、Android 開発者向けのコード サンプルへようこそ:

学習ロードマップ

以下のような非公式ブログ投稿:
Exploring Meaningful Motion on Android、これは Exploring Meaningful Motion on Android の翻訳です。これは、記事に対応するオープン ソース プロジェクト hitherejoe/animate です (星 1280 個)。
同様のオープンソース プロジェクト lgvalle/マテリアルアニメーション、3840 個のスター。

しかし、直接的で信頼できる観点から、特定の知識ポイントを体系的に学ぶ必要がある場合は、開発者にとって公式 Web サイトとそのブログが最適です。英語のドキュメントを読むのに費やす時間は気にしないでください。それだけの価値は十分にあります。理解できない場合は、関連記事でサポートを確認してください。

そこで、私はこの記事を編集し、学習ロードマップを作成するのに約 3 日を費やしました。

  • 公式ブログ (上記) を読んでください。

  • 公式トレーニングを学ぶ (上記にリスト);

  • GitHub の高評価 (興味深い) プロジェクト (多くの人が非常に優れたプロジェクトを推奨している) を学ぶ

  • 他の質の高いブログを読んでギャップを確認してください (Google を活用してください); Go! Go! li21 SH 2016- 01-16 ~ 2016-01- 23

  • このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    < Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

    この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

    < datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

    この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

    HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

    記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

    < meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

    この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

    HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

    この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

    ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

    この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

    < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

    この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

    Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

    GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

    See all articles