[UWP]はコピー「CSS障害アート」のアニメーションをコピーします

1.はじめに

アート（グリッチアート風）の障害は何ですか？ロゴは、私たちの身近なビブラート芸術の断層表現の形態です。それは魔法の感覚を持って、ショックの効果を点滅しているように見える、非常に目を引きます。アート障害が、それは結像エラーへの映像信号障害リード感をシミュレートします。青色と赤色は偶然の一致がこの障害の現れであることはできません。フィルム時代の初めから今日のデジタル時代に、この障害は、観客は非常に身近な現象となっています。

先月鋸CSSの芸術失敗最近の気分を変換しようとしたこの記事のは、そのアニメーション（生活のプレート吊り庭をブログにUWPの道）をコピーし始めました。CSSはmix-blend-mode便利なようで、Win2DでUWPと今回BlendEffectはそれが遊ぶ真似します。

2. BlendEffect何ですか

Microsoft.Graphics.Canvas.Effects名前空間BlendEffect以下に示すように、複数のパターンを含む2枚の画像を合成する（フォアグラウンド及びバックグラウンドが入力ソースの通りです）。

BlendEffectを使用するには、それとの前景と背景のモードを設定する必要がありますCompositionEffectSourceParameter：

var blendEffect = new BlendEffect()
{
    Mode = BlendEffectMode.Screen,
    Foreground = new CompositionEffectSourceParameter("Main"),
    Background = new CompositionEffectSourceParameter("Tint"),
};

そして、BlendEffectブラシを作成するには、このを使用して、とのSetSourceParameterセットの前景色と2を混合する必要性の背景CompositionBrush：

var effectFactory = compositor.CreateEffectFactory(blendEffect);
var blendEffectBrush = effectFactory.CreateBrush();
blendEffectBrush.SetSourceParameter("Main", foregroundBrush);
blendEffectBrush.SetSourceParameter("Tint", backgroundBrush);

そのような混合は、指定されたモードに応じて前景と背景モードであろう。

種々のモードにおける前記テキストの混合効果

CompositionAPIはない私は、この機能を提供するために、したテキストの書き込み機能を提供していますが、Win2D追加実現Win2Dアウトライン文字を使用 Win2D含むテキストを作成する方法が説明しCompositionSurfaceBrush、一瞬のためにそれを再パッケージ化し、各を表示するには、次のコードを使用しますモードで効果を混合します。

private void AddTextToRoot(BlendEffectMode blendEffectMode)
{
    var redBrushWrapper = CreateTextToBrushWrapper(blendEffectMode.ToString(), Colors.Red);
    var blueBrushWrapper = CreateTextToBrushWrapper(blendEffectMode.ToString(), Colors.Cyan);
    blueBrushWrapper.Brush.Offset = new Vector2(-4f, 0);

    var textVisual = Compositor.CreateSpriteVisual();
    textVisual.Brush = CreateBrush(blueBrushWrapper.Brush, redBrushWrapper.Brush, blendEffectMode);
    textVisual.Size = new Vector2(400, 70);
    var background = new Rectangle { Height = 70, Width = 400 };

    ElementCompositionPreview.SetElementChildVisual(background, textVisual);
    Root.Children.Add(background);
}

private CompositionBrush CreateBrush(CompositionBrush foreground, CompositionBrush background, BlendEffectMode blendEffectMode)
{
    var compositor = Window.Current.Compositor;
    var effect = new BlendEffect()
    {
        Mode = blendEffectMode,
        Foreground = new CompositionEffectSourceParameter("Main"),
        Background = new CompositionEffectSourceParameter("Tint"),
    };
    var effectFactory = compositor.CreateEffectFactory(effect);
    var compositionBrush = effectFactory.CreateBrush();
    compositionBrush.SetSourceParameter("Main", foreground);
    compositionBrush.SetSourceParameter("Tint", background);

    return compositionBrush;
}

BlendEffectMode下混合赤と青のテキスト、様々な番組上の写真。

グリッチアート風の4の写真

BlendEffectの使用や役割を理解した後、今芸術を行うことができます失敗してみてください。以下、この画像を取得しようとします：

private (CompositionBrush compositionBrush, CompositionSurfaceBrush compositionSurfaceBrush) CreateBrush(string imageName, Color color)
{
    var compositor = Window.Current.Compositor;
    var loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/Images/" + imageName));
    var compositionSurfaceBrush = compositor.CreateSurfaceBrush();
    compositionSurfaceBrush.Surface = loadedSurface;
    var compositionBrush = CreateBrush(compositionSurfaceBrush, compositor.CreateColorBrush(color), BlendEffectMode.Lighten);
    return (compositionBrush, compositionSurfaceBrush);
}

それぞれ、上記のコードを使用し、この画像からColors.Red（255、0）およびColors.Cyan（0255255）を、それを作成するのCompositionColorBrush使用してBlendEffectMode.Lighten以下の結果を得るために混合：

var compositor = Window.Current.Compositor;
var (foreground, foregroundBrush) = CreateBrush(imageName, Colors.Cyan);
var (background, backgroundBrush) = CreateBrush(imageName, Colors.Red);
foregroundBrush.Offset = new Vector2(10, 0);

var brush = CreateBrush(foreground, background, BlendEffectMode.Darken);

使用されるBlendEffectMode.Darken2枚の画像を混合した後、次に10でオフセット図ピクセルが効果を得るため、このようなA障害芸術的画像分割は完了です。

動的なクラススタイルビブラート効果グリッチ

アニメーションは一緒でもタイトルをコピーし、コピーに続きます。2つの文字CompositionSurfaceBrushを使用はBlendEffectMode.Lighten混合され、その後、彼らは、Offsetアニメーションを実行します。

CreateBrush(backgroundWrapper.Brush, foregroundWrapper.Brush, BlendEffectMode.Lighten);

StartOffsetAnimation(backgroundWrapper.Brush, TimeSpan.FromSeconds(0.95), TimeSpan.Zero);
StartOffsetAnimation(foregroundWrapper.Brush, TimeSpan.FromSeconds(1.1), TimeSpan.FromSeconds(0.2));


private void StartOffsetAnimation(CompositionSurfaceBrush brush, TimeSpan duration, TimeSpan delay)
{
    var offsetAnimation = Compositor.CreateVector2KeyFrameAnimation();
    offsetAnimation.Duration = duration;
    offsetAnimation.DelayTime = delay;
    offsetAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

    void addKey(float key, float top, float left)
    {
        offsetAnimation.InsertKeyFrame(key, new Vector2(top * 2.5f, left * 2.5f));
    };
    addKey(.1f, -0.4f, -1.1f);
    addKey(.2f, 0.4f, -0.2f);
    addKey(.3f, 0f, .5f);
    addKey(.4f, -0.3f, -0.7f);
    addKey(.5f, 0, .2f);
    addKey(.6f, 1.8f, 1.2f);
    addKey(.7f, -1f, .1f);
    addKey(.8f, -0.4f, -0.9f);
    addKey(.9f, 0, 1.2f);
    addKey(1, 0, -1.2f);
    brush.StartAnimation(nameof(CompositionSurfaceBrush.Offset), offsetAnimation);
}

そして、移動の途中で黒い縦のラインを入れて、故障の影響が生じます。

6.その他の複雑なエフェクトグリッチ

アニメーションが完全にCSSをコピーすることはできません、私は大体得たコピーを意味し、容量を制限しました。

2白シェーディングブラック（作成BlurAmount = 0テキスト（以下に示す））であるが。

千鳥と数ピクセルの後BlendEffectMode.Multiply混合一緒に、より洗練されたアニメーションが完了し、芸術の失敗です。

そして、白文字に戻して、最初の二つは、テキスト、以下の結果の高さを調整しました。

次に、2つのテキストアニメーションのフロントハイトは、結果が出てきました：

StartHeightAnimation(redBrushWrapper, new List<(double, double)>() { (0, 1), (20, 80), (60, 15), (100, 105) }, TimeSpan.FromSeconds(1), TimeSpan.Zero);
StartHeightAnimation(blueBrushWrapper, new List<(double, double)>() { (0, 110), (20, 112.5), (35, 30), (50, 100), (60, 50), (70, 85), (80, 55), (100, 1) }, TimeSpan.FromSeconds(1.5), TimeSpan.Zero);

private void StartHeightAnimation(TextToBrushWrapper brush, List<(double, double)> keyFrames, TimeSpan duration, TimeSpan delay)
{
    var storyboard = new Storyboard();

    var animation = new DoubleAnimationUsingKeyFrames();
    animation.EnableDependentAnimation = true;
    Storyboard.SetTarget(animation, brush);
    Storyboard.SetTargetProperty(animation, nameof(TextToBrushWrapper.Height));

    foreach (var item in keyFrames)
    {
        animation.KeyFrames.Add(new LinearDoubleKeyFrame { KeyTime = duration / 100 * item.Item1, Value = item.Item2 });
    }

    storyboard.Children.Add(animation);
    storyboard.RepeatBehavior = RepeatBehavior.Forever;

    storyboard.BeginTime = delay;
    storyboard.Begin();
}

7.おわりに

私は特に新しい作成した場所からアニメーション大物をコピーするには、プロジェクトを。

そこを参照することができ、多くのオリジナルのアニメーションがありますが、私は目新しさを超えているの後に徹底的に一般的な原理を理解し、オフに左。CPUのように見えますが、GPU占有も放棄した疲れ、絵をカットし、高いものではなく、一時的に実用的なアプリケーションシナリオを考えることはできません、ブログにも書きました。

8.ソース

DinoChan_uwp_design_and_animation_labデザインとアニメーションプロジェクトUWPコレクション。