FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: スポンサー広告

WPFでくるくる回してみたい(前編)

長い時間がかかりそうな処理の時は、処理が終わるまで、マウスカーソルを砂時計にしている。がしかし、jQueryとかなら、マウスではなく画面上にくるくる回るアレが表示される。
Waiting Spinnerだっけかな。WPFにはないのか!?と思って調べた。

待ち時間にクルクル回るアレ

2013年かぁ。5年前の記事ですねぇ。でも、かなり作りこまれていて、便利そう。
だが使わない。上の記事でも書いているが、まずは自分で組んでみる事にする。
とりあえず、くるくる回れば良いので、違う方法で。

〇画像を用意する。
WPFは、その気があれば、なんでも"描く"ことができるが、かなりの修練が必要となる。なので、できあいの画像をくるくる回すことにする。しかし、ネットに上がっている画像を下手に使うと、チョサクケンという一子相伝的なアレにやられる可能性が高いので、OpenClipartから探す。

〇画像をWPFで使う
プロジェクトに画像を含めたら、BitmapImageとして使えるように、Resourcesに記述する。
 <BitmapImage x:Key="Spinner_Png"
UriSource="pack://application:,,,/WpfApp1;component/spinner.png" />

〇XAMLだけでくるくる回す。
下の記述でくるくる回る。XAMLだけ。コード無用。
 <Image Grid.Row="1"
Source="{StaticResource Spinner_Png}"
Width="150" Height="150" >
<Image.RenderTransform>
<RotateTransform CenterX="75" CenterY="75"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
To="-360" Duration="0:0:3"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<PowerEase Power="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
相変わらず階層が深い。
・RederTransFormのAngleプロパティの値を変えていくので、
 ImageのRenderTransformには、RotateTransformを設定する。
 回転軸は、画像の中心。
・EventTriggerのRoutedEventでLoadを指定。起動したらアニメーション開始。
・BeginStoryBoard内に、開始するアニメーションを記述。
・DoubleAnimationは、数値系のプロパティに対するAnimation。
  今回は、回転角度。
 -Toを-360(一回転)にしているので、逆時計周りで回転する。
  360にすれば、時計回りで回転。
 -Durationで、一回転するまでに掛ける時間を決める。
  短いほど回転速度は上がる。
 -RepeatBehaviorを"Forever"にしているので、画面を閉じる迄継続される。
・EasingFunctionは、アニメーションの流れに緩急や他の効果を付与する。
 -PowerEaseは、加速に緩急をつける。
 -Powerは、加速度の度合い。高い数値ほど加速が急激になる。
これでとりあえず、起動から延々と回るアレができる。

20180810.png
おっと、静止画ではわからない。Orz。

〇問題点
画面起動時から永遠にアニメーションを続ける。そう、要らないから隠しても、延々と。
必要な時だけで良いんだよね。
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


サイドバー背後固定表示サンプル

当ブログに書かれたソースコードは流用自由です。

バグ、スペルミス等はありうる事です。

ご利用の際は自己責任でお願いしますm(_ _)m

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。