今は仕事でAIRを利用しています。
その比較というわけではありませんが、WPFも勉強中です。
とりあえず、跳ねるボールを書いてみました。
ボヨ~ンっていう感じを出すのに苦労しましたw
細かい点はまだまだの状態ですが、なかなか面白いです。
個人的にはWPF(XAMLによる定義)の方が好みかなぁ
AutoReverseって便利ですねぇ
<Window x:Class="Ball"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ball" Height="450" Width="450">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="400" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Canvas Name="gradation" Grid.Column="1">
<Ellipse Height="100" Width="100" Name="ellipse">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,1.5">
<GradientStop x:Name="gradientStop1" Color="White" Offset="1.2"/>
<GradientStop x:Name="gradientStop2" Color="Black" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
<Button Name="animatedButton" Height="50" HorizontalAlignment="Center" Grid.Column="0">
Click !
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- 落ちる -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="0" To="300" Duration="0:0:1" AccelerationRatio="0.9"/>
<!-- つぶれる/元に戻る -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="350" Duration="0:0:.05" BeginTime="0:0:1" AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Height"
From="100" To="50" Duration="0:0:.05" BeginTime="0:0:1" AutoReverse="True"/>
<!-- はねかえる/落ちる -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="100" Duration="0:0:.7" BeginTime="0:0:1.1" DecelerationRatio="0.9" AutoReverse="True"/>
<!-- つぶれる/元に戻る -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="330" Duration="0:0:.05" BeginTime="0:0:2.5" AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Height"
From="100" To="70" Duration="0:0:.05" BeginTime="0:0:2.5" AutoReverse="True"/>
<!-- はねかえる/落ちる -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="230" Duration="0:0:.5" BeginTime="0:0:2.6" DecelerationRatio="0.8" AutoReverse="True"/>
<!-- つぶれる/元に戻る -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="320" Duration="0:0:.1" BeginTime="0:0:3.6" AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Height"
From="100" To="80" Duration="0:0:.1" BeginTime="0:0:3.6" AutoReverse="True"/>
<!-- つぶれる/元に戻る -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="310" Duration="0:0:.1" BeginTime="0:0:3.8" AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Height"
From="100" To="90" Duration="0:0:.1" BeginTime="0:0:3.8" AutoReverse="True"/>
<!-- つぶれる/元に戻る -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Top)"
From="300" To="305" Duration="0:0:.1" BeginTime="0:0:4" AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Height"
From="100" To="95" Duration="0:0:.1" BeginTime="0:0:4" AutoReverse="True"/>
<!-- 慣性の法則 -->
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="150" Duration="0:0:4.5" DecelerationRatio=".5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>