最近、我々はより優れたH5の前面50を集めました。
それの私の側には、分類技術によれば彼らは実装技術解決するために皆のための代表的例10を識別すること。
設計者はまた、あなたが提供する参考資料として技術に基づくことができます
私は主に技術的な分類を紹介しているので、これだけ私は表示されません技術を達成するために、異なる設計スタイルで、異なる技術のケースを取ります。
技術が含まれている最初の少し言及は、に分かれています。createjs / thresjs /ビデオ再生インライン/
まず、それは最初に、テンセントのTencentの父の前にH5のアニメーションAPPのプロパガンダを生産し、H5これはテンセントTGideasでチームによって行われます
以下はTGideasの公式の説明です
TGideasは、テンセントのインタラクティブエンターテイメントビジネスシステムに属している、クリエイティブなユーザーエクスペリエンスデザインチーム、製品の包装に関わる仕事の範囲、創造、ブランド構築を広告する、インタラクティブデザイン、プロの企画のチームは、プロジェクト管理の分野での事業およびマーケティングに焦点を当てています、ビジョン、開発、マルチメディア才能構成。「ハードワーク、ハードプレーは」航空機の勝利よりも、私たちの信条が発行されている、私たちは本当の意味でのビジネス価値を実現し、効果的なコミュニケーションの仕組みと感情的なリンクを確立するために多様化、製品およびヘルプユーザーによる作業へのより喜んでいます。
OK、ここにそれがISUXを呼ばTencentの別のチームを教えする方法でTGideas来る、これらの2つのチームがH5は、このエリアには、自分のチームの組成物はまた、設計、私が学んだ2つのチームが比較的良好テンセントです+フロント
テンセント、社会的なユーザーエクスペリエンスの設計、2011年1月11日に設立され、ISUX（インターネット社会のユーザーエクスペリエンス）と呼ばれる、テンセントグループ、世界最大のUXデザインチームの中核である、プロのメンバーは、ユーザー調査、インタラクションデザイン、ビジュアルデザインを含め、ブランドデザイン、ビデオアニメーションデザイン、UI開発、製品設計や市場調査は、ISUX北京、上海、成都、ソウル、韓国、中国深センの本社に位置しています。
ユーザーエクスペリエンスデザインを担当するなど、一緒QQ、QQスペース、QQのメンバー、QQの財布、QQスポーツ、テンセント雲、テンセント企業ポイント、QQのものなどの主要なサービス・プラットフォームを含む、テンセント、社会的コミュニケーションとエンターテイメント製品およびサービスを、研究ISUX、テンセント教室関心の部族、ライブパターン、K歌ユニバーサル、ユニバーサル俳優、ペンギンFM、フラッシュコーヒー、すべてのPピクチャ、およびマイクロ雲のようにコール。
どちらも、2つのチームが接触したH5の出力では比較的優れています
ビデオ+ jsの場合
OK、その後、最初のケースでは二次元コードを見てスイープ。
技術的な使用から、このページには、ビデオの上にはJavaScriptスクリプトコントロールを使用しています。
解決すべき主な問題はあります
デフォルトでは、ブラウザでビデオを追加して、全画面コントロールバーがあります
マイクロチャネルの強制オープンAndroidのブラウザ、フルスクリーンの問題があります。
IOSではソリューション：
マイクロブラウザチャネルは、インライン属性を増大させることができるので、ビデオ連動フルスクリーンページで遊びなし。
このプロパティを使用する必要があればしかしアンドリュースの終わりには、我々は、ホワイトリストのブラウザで使用する必要があります。
しかし、マイクロチャネルX5ブラウザは、ホワイトリスト公式入力アプリケーションを提供していません。
我々は、これを達成するために別の言い方をすることができますので、
X5ブラウザの以降のカーネル（> = 036 849）のバージョンは、TBS
何かがアンドリュースがフルスクリーンビデオの場合には、ビデオの上に何かの層を追加することができますプレーヤー、マイクロチャネルの端部と支持層と呼ばれます
<video preload="load" data-link="http://wag.i-h5.cn/dj/wyf/video/wb.mp4" playsinline x-webkit-airplay="true" webkit-playsinline
x5-video-player-type="h5" x5-video-player-fullscreen="true" id="video" width="100%" src="http://wag.i-h5.cn/dj/wyf/video/wyf.mp4"></video>
だから、何かをするために何かをする上でプラスフルスクリーンビデオに基づいて？
そして、このケースを掃引。
これはあなたのさまざまなオプションは、ビデオクリップのために異なっている、私はインタラクティブおよびビデオを組み合わせ、より多くのこの相互作用を探していますケースで、選択の余地はちょうど導入、同一層のプレーヤによるビデオクリップは、+インラインプレーヤーもありませんモードを達成することができます。
：具体的な分析には、以下のリンクを参照することができます
HTTPS：//segmentfault.com/a/11 ...
もちろん、AEによって作られた、ビデオクリップを撮影した後に、この動画に限定されないが、例えば、ここでそれを繰り返さないで、何かのインタラクティブビデオ出力と組み合わせることができます。そして、猫H5同様のカーニバルの最終日に行うにはWebGLのthree.jsの使用を見てください。
もう少しについて
WebGL（全写Web Graphics Library）是一种3D绘图标准
WebGL可以为HTML5 Canvas提供硬件3D加速渲染
threejsはWebGLのサードパーティ製のライブラリは、3D表示に関連するものの数を開発するために使用することができるカプセル化されています
......
そして、アップルの携帯電話は、ビューの使用に誰もが、ポイントで見つけることができ、また、前方と後方のアップルの携帯電話で制御することができ、速度制御の非常に細かいビューをカットすることができます。
この場合、3D IOSの使用はthreeJsの効果を達成するために、最終的にはミラーであります
アンドリュースは、ビデオの最終用途です。
私は、コード行に変更を加えた後、ディスプレイへのAndroidの端末でWebGLのこのページの必須使用は直接クラッシュマイクロチャネルブラウザの後に放送で見られます。
問題の原因を調べるためには、2つかもしれ
一方で
同時非同期がデッドロックにブラウザ原因リソースを要求し
、同時に複数の非同期要求がデッドロックにブラウザを引き起こす可能性があるときに、リソースが要求された場合、デッドロックは、ブラウザがクラッシュした結果です。ブラウザのキャッシュからのデータの読み出しがロックされたときにしながら、デフォルトのブラウザでは、キャッシュを有効になっています。
私たちは、同じリソースが発生することはできません必要があるときに別のキューに非同期リクエストキュー組織
Android携帯電話のための一方のX5ブラウザ上で自分自身をサポートするさまざまな別のマシンでAndroidのfpsの値が異なる、といくつかのもX5ブラウザ自身のピット考えることができるマシンを、再生することはできません、不明です。
ケースthreeJSの
ケースを見て
これは、3D H5の面で他のthreejsパフォーマンスで
3Dパノラマ、当然のことながら、threejs以上H5のこのタイプを達成するために。
パノラマ他の二つのようなプログラムがあり、ここで詳細には触れていない、行うためのソフトウェアを購入する必要があります。
だから私は、パノラマThree.jsを提供するためにここにいる三次元のチュートリアルを使用して実装
https://isux.tencent.com/3d.html
threeJsの別の用途
3Dパーティクルアニメーションを実行します。
threejsは、Android上でのパフォーマンスを達成して、このケースでは、マシンのパフォーマンスも良いです最適化
CreateJSケース
createjs、詳細はほとんどのゲームを開発するために使用することができる軽量なゲームエンジンです。
それは利点があります
AdobeのanimateCC直接ビジュアル編集のアニメーションが、骨に接続することができ、コードは、ソフトウェアの中に直接挿入することができます。
その後、jsのコードベースcreatejsを提供するために導出することができます
ときH5の実装では、プログラマは、アニメーション効果とアニメーションの詳細を検討する必要があるかもしれません。、設計者が輸出を開発するために必要なスニペットに参加するプログラマを行うに希望の映画。
だから、開発時間は、通信コストを削減すること。
以下のケースを見てください
この場合はanimateCCによって生成されたアニメーションのコードです。モンゴルキャンバス上の層とは、その後プログラマ、開発の相互作用効果によって追加します。だから、createjsためには、ゲームエンジンであるので、このようなゲームを行うことができます。ゲームはシンプルですが、非常にその鍋のレストランのテーマを促進するためにフィット。createjsでも、開発スピードをスピードアップすることができます。
セットには、上記animateCCと直接のみH5アニメーションやトランジションが含まれていたように良い映画を作ります。
必要に応じスニペットを追加して、開発者がFLAソースファイルを編集します。
プレイポーズとしても、フレームスキップ制御フレームのように達成することができ、その後、ソフトウェアは、キーが直接適応移動エンドの幅と高さのアニメーションを導出することができます。
次H5は非常に一般的な比較的新しいが、ではない、デュアルインタラクティブH5
それでは、最後の1 行うにはH5 +ビデオパノラマであるが、このパノラマはthreejsを使用していません
しかしkranoと呼ばれる別の使用は、本ソフトウェアを支払うための商業必要性前に述べました。
これら10例の分析は、それが完成になり、ありがとうございました。