2016/08/06

レインボーアニメーション

一発ネタっぽいですがww

某天国.xaml より(わかりやすいように背景のみにしています)
元ネタ Rainbow color Animation by GradientStops[index].offset : Color « Windows Presentation Foundation « VB.Net Tutorial
<Rectangle Margin="15,50,15,15">
  <Rectangle.Fill>
    <LinearGradientBrush x:Name="brush">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="Red"/>
        <GradientStop Color="Orange"/>
        <GradientStop Color="Yellow"/>
        <GradientStop Color="Green"/>
        <GradientStop Color="Blue"/>
        <GradientStop Color="Indigo"/>
        <GradientStop Color="Violet"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Rectangle.Fill>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard SpeedRatio="3" TargetName="brush">
          <DoubleAnimation Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[0].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:1"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[1].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:2"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[2].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:3"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[3].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:4"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[4].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:5"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[5].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:6"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[6].Offset"
                            To="1"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>
コピペコードですが スキンロード時に タイミングをずらしながら7色の基準位置を変更するアニメーションを開始して 虹スクロールするようになっています
そのため最初は単色なのと 左右両端で色が変わる時に ちょっと期待(画像を無限スクロールするようなイメージ)と違う動作になっていますが まあそんなに目立たないでしょう
単独で使う場合は何か他の方法がいいかもしれませんが 思いついていませんw

EventTrigger と Storyboard は非常に強力なので何かいいアイデアを思いついたら どんどん活用したいですね

0 件のコメント :

コメントを投稿