2012年12月5日水曜日

Storyboard で飛び跳ねるボール

WPFのアニメーションの機能を使って、「飛び跳ねるボール」と同じようなアニメーションを実現しています。
ボールの動きは、それぞれ x座標、y座標 に対応する DoubleAnimation を使います。
y座標は、重力の影響を受けるように、PowerEase で 高さの2乗に比例させています。

Startボタンをクリックすると、ボールが動き出します。
ウィンドウサイズを変更して、再度Startボタンを押すと、ウィンドウ内いっぱいに飛び回ります。


MainWindow.xaml

<Window x:Class="BouncingBall2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="200" Width="300">
    <Window.Resources>
        <Storyboard x:Key="storyboard1">
            <DoubleAnimation Storyboard.TargetName="translateTransform1"
                             Storyboard.TargetProperty="X" From="0"
                             To="{Binding ElementName=canvas1,Path=ActualWidth}"
                             Duration="0:0:1" AutoReverse="true"
                             RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="translateTransform1"
                             Storyboard.TargetProperty="Y" From="0"
                             To="{Binding ElementName=canvas1,Path=ActualHeight}"
                             Duration="0:0:0.3" AutoReverse="true"
                             RepeatBehavior="Forever">
                <DoubleAnimation.EasingFunction>
                    <PowerEase Power="2" EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Canvas Name="canvas1">
        <Button Click="Button_Click">Start</Button>
        <Ellipse Width="10" Height="10" Fill="WhiteSmoke" Stroke="Black">
            <Ellipse.RenderTransform>
                <TranslateTransform x:Name="translateTransform1" X="0" Y="0" />
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>
</Window>

MainWindow.xaml

using System.Windows;
using System.Windows.Media.Animation;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((Storyboard)this.Resources["storyboard1"]).Begin();
        }
    }
}

0 件のコメント:

コメントを投稿