個人的なコードライブラリのサンダー7つのアイコンボタン動的シミュレーション

はじめに:

サンダー7リリース以来、その効果を「動的アイコンボタン」に長い時間のために切望し、ついにこの効果や気分をシミュレートする機会を持っています。

私はしっかりとプログラミングの世界では、不可能ではない、ただ考えると信じて!

一目で効果:

サンダー7ダイナミックボタンバーアイコンのスクリーンショット

上記アイコンのいずれかが、アイコンの変換は動的効果を有する上にマウスを移動させます。マウスが離れたときだけでなく、変換のダイナミックプロセスはダイナミックアイコンの元のアイコンを復元します。

1つの非常に明白全体の動作時のフィードバックのような操作の効果、およびプロセス全体がより鮮やかに表示されます。

原理的思考:

まず第一に、この効果の操作から、に分けることができる2つの段階

マウスの接触事象(MouseEnterイベント)に対応する位相1、。

フェーズ2、対応する左マウスイベント(MouseLeave)。

 

その後、最初に分けショーを見るために、アイコンから、四つの状態

状態1、静的アイコンA;

状態2、ダイナミックアイコンB。

状態3、ダイナミックアイコンC。

状態4、静的アイコンD.

最後に、イベントがリンクすると、アイコンの状態、あなたはダイナミックなトランジション効果を得ることができるです。

その結果、実際のコードで達成も、追加のタイマーを、達成することができました、。

制御オプション:

それはダイナミック表示アイコンであるので、最初に考えたの選択肢であるPictureBoxコントロール

もちろん、「タイマー」コントロールがあり、アイコンの変換を制御するために、上記の目的は言いました。

思考ここまま

ノータイマーならば、同じ効果を達成することができるようになります。

ブレークスルー:生産EASY GIFアニメーターGIF画像を使用している場合、あなたはアニメーションのサイクル数を設定することができ、「アニメーションのプロパティ」を見つけました。私は唯一の1サイクルタイムを選択すると、画像だけを表示するように選択し、IEブラウザで有効となります。ブラウズ画像はソフトウェアを使用している場合、それは「常に無限ループ」でしょう![にて:Asion唐]

アイコン制作:

原理分析は、この効果は、2つの動的アイコンを使用する必要があることを示し、その次の4回の予選のアイコン素材を作る必要があります。

生産ポイント:ダイナミックアイコンの効果が遅いトランジション感を与える2つの静的アイコンの変換の最高のダイナミックな効果です。

ここで再び考えをトリガ:

2は、動的なアイコンにまとめることができます。

出発点:サンダー7変換の効果を観察し、動的効果が同じで使用すると思われることがわかった、すなわちマウスが入ると、マウスを残すために、動的な変換効果です。

制作ソフトウェア:EASY GIFアニメーターV5.1.0.44

オリジナル素材:来Baiduの検索[者:Asion唐]元の材料最初の後、オープンソフトウェアで、元の素材には、各フレームの分解図を得ることができます。私は2つの静的なアイコンの小さな男のバッグにアイコンの高さを選びました。

次いで、そのトランジショントランジション効果2つの静的アイコン動的アイコンを変換します。そのバッグの最も低い点から悪役、ゆっくりと最高点に配置されたが、その後徐々に最高点から最低の配置しました。

最後に、我々は、4つの異なる資格のアイコンで作られました。

ダイナミック1 静的2 静的1 ダイナミック2


説明:2つの動的アイコンの遅延時間は同じである必要があります。私はここで0.6秒に画面6、サイクルタイムを使用していました。この時間を覚えて、それが実際に使用するコードを書くための時間です。

実際のコード:

1.新しい「ウィンドウフォームアプリケーション」プロジェクトを作成します。

1静的アイコン:2にPictureBoxコントロール、Imageプロパティを追加します。

:3にTimerコントロール、Intervalプロパティを追加します。ハーフタイムダイナミックアイコンサイクル Iが0.3秒、または300ミリ秒で設定し、。

4.ピクチャのMouseEnterイベントを追加します。

5.ピクチャのMouseLeaveイベントを追加します。

6. TIMERTICKイベントを追加します。

次のようにすべてのコードは次のとおりです。

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        int IconState = 0;//标记图标状态。
        private void pictureBox1_MouseEnter(object sender, EventArgs e)
        {
            timer1.Stop();
            this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态1;
            //this.pictureBox1.Image = Image.FromFile("动态1.gif");
            IconState = 1;
            timer1.Start();
        }

        private void pictureBox1_MouseLeave(object sender, EventArgs e)
        {
            timer1.Stop();
            this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态2;
            //this.pictureBox1.Image = Image.FromFile("动态2.gif");
            IconState = 2;
            timer1.Start();
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            timer1.Stop();
            switch (IconState)
            {
                case 1://图标状态1,将显示变为静态2图标
                    this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态2;
                    //this.pictureBox1.Image = Image.FromFile("静态2.gif");
                    break;
                case 2://图标状态2,将显示变为静态1图标
                    this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态1;
                    //this.pictureBox1.Image = Image.FromFile("静态1.gif");
                    break;
                default:
                    break;

            }
            IconState = 0;
        }
    }
}

画面表示は次のよう:

動的シミュレーションのサンダー7アイコンボタンの効果

ソースコードをダウンロードしてください

サンダー7アイコンボタンの動的シミュレーション.zipファイル

[者:Asion唐]
2011インディアン3越12 Riを午前14時二十四分48秒

ます。https://www.cnblogs.com/AsionTang/archive/2011/03/12/1982212.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_33825683/article/details/93894215