スマートビルディングは都市開発の新しいトレンドになっていますが、それはどの程度「スマート」ですか？

序文

この号では、主に2D描画パネルのアニメーション効果とパネルビデオの埋め込みについて紹介します。2D / 3Dフュージョン体験を通じて、シーンデータの視覚化の直感的な具現化とインタラクティブなパネルアニメーション体験の快適な体験が実現されます。

2Dパネルズームアニメーション切り替えトランジションエフェクト

この効果は主に、図面を読み込んだ後、アニメーション表示パネルをズームし、コールドステーションシーンとホットステーションシーンを切り替え、2Dパネルズームのアニメーション切り替え遷移効果によって実現されます。

図面を読み込んだ後のズームアニメーション表示パネル効果：

動的操作プレビューアドレス：https：//www.hightopo.com/demos/index.html

コールドステーションシーンとホットステーションシーンの切り替え効果：

プログレスバー表示効果

インタラクティブな体験では、進行状況バーの視覚効果にスムーズなアニメーション効果があります。

 

ビデオ埋め込み効果

スマート端末デバイスシーンでカメラ操作をクリックすると、デバイスシーンの監視情報画面が表示されます。

コード

パネル切り替え遷移効果の実現

パネルズームのアニメーション切り替え遷移効果は、主にプリミティブのアンカーポイントをズームする側に固定し、プリミティブのズーム値を制御してズーム効果を実現し、プリミティブのフォントは透明度を変更することで実現します。グラデーションレンダリングの効果。以下に、タイトルのズームアニメーションによる実装方法について説明します。

まず、タイトルアンカーポイントを中央に設定します。つまり、水平アンカーポイントと垂直アンカーポイントの両方が0になります。

tittle.setAnchor(x, y | {x:0.5,y:0.5})

このとき、title要素はアンカーポイントを中央に配置する効果を実現します。

このとき、タイトルの水平ズーム値を0に設定し、HTアニメーションを使用してタイトルのズーム値をアニメーション化し、アニメーション全体でタイトル名の透明度を変更するだけで、パネルズームアニメーションスイッチトランジションを実現できます。効果。

tittle.scaleX(0);

アニメーションの実現は、主に 、フレームベースおよび時間ベースのアニメーションをサポートするHTに付属するht.Default.startAnimアニメーション関数を介し て行われます。ここでの実装では、時間ベースのアニメーション方式を採用しています。estingパラメーターを使用して、ユーザーが関数を定義し、均一な速度変更、最初に遅い、次に速い効果などの数式を使用してアニメーションを制御できるようにします。http：//easings.netを参照してください。 /、この場合は、最初に低速、次に高速の実装方法を採用します。

具体的な実装疑似コードは次のとおりです。

// 标题动画
tittleAnim() {
    const self = this;
    const g2d = self.g2d;
    const g2dDm = g2d.dm();
    // 获取标题图元的横缩放值
    let tittle_index = this.tittle.getScaleX();
    // 缩放值动画执行入口
    ht.Default.startAnim({
        // 动画时间
        duration: 300,
        // 调用 Easing.js 里面 swing 的动画效果
        easing: Easing.swing,
        // 动画执行内容
        action: (v, t) => {
            // 通过修改标题横缩放值来实现动画效果
            this.tittle.setScaleX(tittle_index + (1 - tittle_index) * v);
        },
        finishFunc: () => {
            // 缩放值动画结束后执行标题名字透明度渐变显示动画
            ht.Default.startAnim({
                duration: 1000,
                easing: Easing.swing,
                action: (v, t) => {
                    // 通过修改标题名字透明度来实现动画效果
                    this.tittleName.eachChild(c => {
                        c.s('opacity', c.s('opacity') + (1 - c.s('opacity')) * v);
                    });
                },
                finishFunc: () => {
                // 结束后调用执行下一个缩放值动画以及字体透明度动画
                }
            });
        }
    });
}

Easing.jsは、それ自体でカプセル化されたアニメーションエフェクトです。たとえば、swingは、低速から高速へのスイングアニメーションエフェクトです。

const Easing = {
    swing: function (t) {
        return ( -Math.cos(t * PI) / 2 ) + 0.5;
    }
}

プログレスバー表示効果の実現

setValueWithAnimationプログレスバーアニメーションを、主にパラメータ（ノード、名前、値、形式）を介してカプセル化することにより：

• node：進行状況バーグラフ要素ノードです。
• name：入力パラメーターは、プログレスバープリミティブノードの属性名であり、通常、変更が必要なプログレス値の割合であり、値の範囲は0〜1です。
• value：渡された名前に従って、対応する値を変更します。
• format：フォーマットがある場合は、新しい値のフォーマットを変更できます。

主な実装方法は、HT のht.Default.startAnimアニメーション関数を使用して 、新しい値newValueと古い値oldValueの差分範囲アニメーションを実現することです。

setValueWithAnimation(node, name, value, format) {
    let oldValue = node.a(name);
    value *= 1;
    let range = value - oldValue;

    ht.Default.startAnim({
        duration: 1000,
        easing: Easing.easeOutStrong,
        action: (v, t) => {
            let newValue = oldValue + range * v;
            if (format) {
                newValue = format(newValue);
            }
            node.a(name, newValue);
        }
    });
}

同様に、ここでのアニメーション効果は、Easy.jsのeaseOutStrongの徐々に加速される効果も指します。

const Easing = {
    easeOutStrong: function (t) {
        return 1 - (--t) * t * t * t;
    }
}

ビデオ埋め込み効果の実現

リアルタイム監視システムで一般的に使用される主なストリーミングメディア送信プロトコルは、RTMP、RTSP、HLS 、および HTTP-FLVです。

• RTMP  （リアルタイムメッセージングプロトコル）：リアルタイムメッセージングプロトコル。RTMPプロトコルでは、ビデオはH264エンコーディング、オーディオはAACまたはMP3エンコーディングで、ほとんどがflv形式でパッケージ化されている必要があります。RTMPプロトコルが送信するのは基本的にFLV形式のストリームファイルであるため、フラッシュプレーヤーを使用して再生する必要があります。
• RTSP  （Real-Time Stream Protocol）：RTSPには非常に優れたリアルタイム効果があり、ビデオチャット、ビデオ監視、およびその他の方向に適しています。
• HLS（Http Live Streaming）：Appleによって定義されたHTTPベースのリアルタイムストリーミングメディア送信プロトコル。送信内容には、1.M3U8記述ファイル、2.TSメディアファイルの2つの部分が含まれます。TSメディアファイルのビデオはH264でエンコードされている必要があり、オーディオはAACまたはMP3でエンコードされている必要があります。データはHTTPプロトコルを介して送信されます。現在、video.jsライブラリは、この形式のファイルの再生をサポートしています。
• HTTP-FLV：このプロトコルはhttp + flvです。オーディオおよびビデオデータはFLV形式にカプセル化され、httpプロトコルを介してクライアントに送信されます。このプロトコルは、ブラウザクライアントがライブビデオストリームを再生するのを大幅に容易にします。現在、flv.jsライブラリはこれをサポートしています。フォーマットファイルの再生。

この例の実装は、主に3Dシーンでカメラをダブルクリックし、監視ポップアップウィンドウをポップアップして、ローカルリソースのビデオファイルをロードすることです。実際のアプリケーションプロジェクトシーンでは、上記の一般的に使用されるストリーミングメディア送信プロトコルを柔軟かつ合理的に使用して、リアルタイムモニタリングの効果。クリックイベントのインタラクションを処理するために、イベントインタラクションリスナーmiは、HT インタラクションリスナーの実装を理解するためのaddInteractorListenerの略語です 。

g3d.mi(e => {
    const kind = e.kind;
    // 双击结点的事件处理
    if (kind === 'doubleClickData') {
        // 双击的结点
        let data = e.data;
        // 获取双击结点的标签
        let tag = data.getTag();
        if (!tag) return;
        // 如果结点标签为监控器
        if (tag === 'monitor') {
            // 监控面板显示
            this.intelligentMonitoring.s('2d.visible', true);
            // 载入本地资源视频流
            this.video.a('videoURL', './storage/assets/media/video.mp4');
        }
    }
});

総括する

IBMSインテリジェント統合システム管理は、2Dパネルと3Dシーンのリンケージ相互作用を通じて、システムコンテンツ構造全体をより直感的かつ現実的にします。3Dシーンは、2Dパネルのイベント監視処理により、サラウンドビューローミング、パトロールローミング、シーン切り替えを行い、より使い勝手の良い操作になります。3Dシーンのさまざまな興味深いアニメーションや2Dパネルのパネルズームアニメーションやプログレスバーアニメーションと相まって、産業用インターネットの重要な部分でもある視覚的操作の特性を豊かにします。

IBMのインテリジェントな統合システム統合のシナリオとパネルのプレゼンテーション2D / 3Dの直感的な機能の後、このシステムでは二つの最も重要な点は：管理システム、エレベータ制御システム構築の知恵 と 駐車場管理システムは、 になります 次号 コンテンツの詳細な解釈をしてください。