「フェード」トランジション用の2つのイメージをマージして不透明度を変更しますか？ （C＃/ PNG）

Question

まず、THIS質問の複製ではないことをお伝えしたいと思います。少なくとも私の意見です:)

私が達成したいのは、アニメーションを「フェードイン」する一連のフレームです。

私は例えば2つのPNGファイル（」彼らは同じサイズであるとしましょう）、を選択します。私はレイヤーのようにそれらをマージ "シミュレート" したい

• Picture 1
• Picture 2

をグラフィックエディタで。私は最初に不透明度255のPic1を、不透明度0の下のPic2を配置します。最初はPic1しか表示されません。それから私はこのように、彼らの不透明度を変更します。そのための任意の簡単な方法は、

• Pic1-200, Pic2-150
• Pic1-150, Pic2-200
• Pic1-100, Pic2-230

ありますか？

Answer 1

winformsアプリでこれはかなり簡単に行うことができます。いくつかのプロパティでユーザーコントロールを作成します。

public Image FromImage { get; set; } 
public Image ToImage { get; set; } 

private float opacity = 1; 

は、今すぐコントロール上にタイマーをドロップのOnPaint

protected override void OnPaint(PaintEventArgs e) 
    { 
     if (FromImage != null && ToImage != null) 
     { 
      ColorMatrix matrix1 = new ColorMatrix(); 
      matrix1.Matrix33 = opacity; 
      ImageAttributes attributes1 = new ImageAttributes(); 
      attributes1.SetColorMatrix(matrix1, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); 


      ColorMatrix matrix2 = new ColorMatrix(); 
      matrix2.Matrix33 = 1 - opacity; 
      ImageAttributes attributes2 = new ImageAttributes(); 
      attributes2.SetColorMatrix(matrix2, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); 

      e.Graphics.DrawImage(FromImage, new Rectangle(0, 0, this.Width, this.Height), 0, 0, this.Width, 
           this.Height, GraphicsUnit.Pixel, attributes1); 
      e.Graphics.DrawImage(ToImage, new Rectangle(0, 0, this.Width, this.Height), 0, 0, this.Width, 
           this.Height, GraphicsUnit.Pixel, attributes2); 
     } 
     base.OnPaint(e); 
    } 

を上書きし、設定された100ミリ秒のようなものの経過時間を有効に。ダニイベントを処理します。

private void timer_Tick(object sender, EventArgs e) 
    { 
     if(opacity == 0) 
     { 
      this.timer.Stop(); 
      return; 
     } 

     this.opacity -= 0.01f; 
     this.Invalidate(); 
    } 

et voilaしかし、知っておくべきことが1つあります。編集に基づいて

this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint,true); 

---

更新：これは、コントロールのコンストラクタで、このラインでややalieviatedすることができ、非常にflickery遷移を、作るあなたは多くを使用して、2枚の画像をとり、ユーティリティにこれを回すことができます同じコードは、各ステップを新しいイメージに出力します。以下のように気にいら：

public class ImageUtility 
{ 
    private Image image1; 
    private Image image2; 

    public ImageUtility(Image image1, Image image2) 
    { 
     this.image1 = image1; 
     this.image2 = image2; 
    } 

    public void SaveTransitions(int numSteps, string outDir) 
    { 
     var opacityChange = 1.0f/(float) numSteps; 

     for(float opacity = 1,i=0;opacity>0;opacity-=opacityChange,i++) 
     { 
      using(var image = new Bitmap(image1.Width,image2.Width)) 
      { 
       Graphics g = Graphics.FromImage(image); 
       ColorMatrix matrix1 = new ColorMatrix(); 
       matrix1.Matrix33 = opacity; 
       ImageAttributes attributes1 = new ImageAttributes(); 
       attributes1.SetColorMatrix(matrix1, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); 


       ColorMatrix matrix2 = new ColorMatrix(); 
       matrix2.Matrix33 = 1 - opacity; 
       ImageAttributes attributes2 = new ImageAttributes(); 
       attributes2.SetColorMatrix(matrix2, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); 

       g.DrawImage(image1, new Rectangle(0, 0, image1.Width, image1.Height), 0, 0, image1.Width, 
            image1.Height, GraphicsUnit.Pixel, attributes1); 
       g.DrawImage(image2, new Rectangle(0, 0, image2.Width, image2.Height), 0, 0, image2.Width, 
            image2.Height, GraphicsUnit.Pixel, attributes2); 

       image.Save(Path.Combine(outDir,"Image" + i + ".png"),ImageFormat.Png); 
      } 
     } 
    } 

使用法：

ImageUtility util = new ImageUtility(Image.FromFile(@"C:\path\pic1.png"), Image.FromFile(@"C:\path\pic2.png")); 
util.SaveTransitions(100, @"C:\path\output"); // saves 100 images 

Answer 2

winformsを使用すると、ImageAttributesパラメータをとるオーバーロードを使用してGraphics.DrawImageを使用できます。そのクラスは、色（とアルファベット）の値に対する操作を指定できます。

ImageAttributesページの例は、ほぼあなたが望むものです。オリジナルと変形されたものを同じ場所に描画し、カラーマトリックスを変更してアルファレベルのみを変更します。