WPF 波紋ドロップアニメーション

Effect効果をちゃんと把握しておらず恥ずかしいエントリを先日公開したところで、Effectを確認しておこうと思いました;

1.RippleEffect

作成するのは画面上のImageに対してクリック(or ドロップ操作)をすると画像に波紋が描かれるようなもの。RippleEffectを使います、Blendから設定するか、VisualStudioからだとBlendのSDKをインストールした上でMicrosoft.Expression.Effectsを参照設定する必要があります。

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
        x:Class="WpfRippleEffectTest.MainWindow"
        Title="MainWindow" Height="245" Width="286">
	<Window.Resources>
		<Storyboard x:Key="RippleEffectStoryboard">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Magnitude)" Storyboard.TargetName="image">
				<EasingDoubleKeyFrame KeyTime="0" Value="0.4"/>
				<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Frequency)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
	</Window.Resources>
	<Grid>
		<Image x:Name="image" Source="Lighthouse.jpg" Stretch="UniformToFill" MouseDown="image_MouseDown">
			<Image.Effect>
				<ee:RippleEffect x:Name="rippleEffect" Frequency="0"/>
			</Image.Effect>
		</Image>

	</Grid>
</Window>

MainWindow.xaml.cs

namespace WpfRippleEffectTest
{
    using System.Windows;
    using System.Windows.Input;
    using System.Windows.Media.Animation;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var clickedPos = e.GetPosition(image);
            rippleEffect.Center = new Point(clickedPos.X / image.ActualWidth, clickedPos.Y / image.ActualHeight);
            var storyboard = FindResource("RippleEffectStoryboard") as Storyboard;
            storyboard.Begin();
        }
    }
}

dropeffect

Easingをうまく設定することや、Storyboardをいくつも作成して複数の波紋を再現するなどの凝る要素があります。RippleEffectはアニメーション内で使うのがほとんどかと思われます。ファイルがドロップされると波紋が浮き立つというソフトがありましたが、こちらはRippleEffectは使わず自作しているようですね。。

 

2.その他のEffect

Blend付属のEffect以外にもWPF Shader Effect Libraryというライブラリがあり、ごく簡単な手順で組込むことができます。ダウンロードするとわかりますが、HLSLでShaderが定義されており、著作権等を考慮して一部転載も避けますがRippleEffectのそれもあります。手順は、

HLSL(.fx)→コンパイル→.psファイル→C#からUriでファイル指定してロード

となっています。このライブラリを使うだけならEffectクラスがあるので不要ですが、カスタムEffectをHLSLから記述する場合の手順がこちらで紹介されています。

 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中