Blendでさくらの花を散らせるアニメーションを作ってみました。
@okazukiさんが手順じゃなくて、Blendの作業風景を見たい！って言ってたので、動画にしてみました。
今回はAiの段階からやってみました。
一部試行錯誤して、わかりにくいとこもあるかもですが、ぜひマネしてみてください。
ちなみにStoryboardをXAMLにするとこんなふうになります。
<Page.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-444.906"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:4" Value="789.013"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:4" Value="152"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="-69"/> <EasingDoubleKeyFrame KeyTime="0:0:4" Value="74"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Page.Resources>
コントロール側はこんなかんじ
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Tapped"> <Media:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors> <Grid x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="1030,-328,43,0" RenderTransformOrigin="0.5,0.5"> <Grid.Projection> <PlaneProjection/> </Grid.Projection> <Grid.RenderTransform> <CompositeTransform/> </Grid.RenderTransform> <Path Data="F1M99.131,37.589C100.772,74.785 74.842,104.431 45.072,114.484 40.632,115.983 36.013,116.489 31.357,116.962 27.649,117.338 26.172,115.746 25.639,112.433 25.163,109.477 24.339,106.567 24.027,103.599 23.586,99.416 21.156,98.33 17.464,98.796 14.659,99.149 11.782,99.24 9.067,99.948 4.195,101.217 2.616,98.843 1.606,94.576 -1.333,82.157 -0.076,70.032 4.05,58.205 11.605,36.549 24.672,19.446 46.269,10.211 60.116,4.289 74.647,0.758 89.788,0.009 92.928,-0.146 93.734,1.628 94.418,4.07 97.531,15.181 99.525,26.438 99.131,37.589" Fill="#FFD17AAF" Stretch="None" Margin="43.67,161.689,150.17,0.513"/> <Path Data="F1M84.53,59.636C85.671,77.936 78.267,93.246 67.902,107.623 61.709,116.212 54.151,123.386 46.303,130.369 43.65,132.731 41.418,132.803 38.828,130.685 20.742,115.899 5.539,98.534 1.527,75.019 -3.112,47.83 2.414,22.625 23.626,2.752 26.935,-0.348 29.377,-0.493 32.764,3 42.687,13.231 42.832,13.091 52.822,3.355 57.383,-1.09 58.178,-1.194 62.955,3.5 76.679,16.987 83.241,33.676 84.509,52.644 84.664,54.965 84.53,57.305 84.53,59.636" Fill="#FFD17AAF" Stretch="None" Margin="104.201,0,104.197,147.009"/> <Path Data="F1M46.738,0.001C80.168,-0.099 104.044,15.696 120.326,44.142 123.804,50.217 126.968,56.439 129.692,62.896 130.94,65.856 130.435,67.924 127.688,69.669 106.818,82.931 84.67,92.458 59.376,87.854 33.094,83.07 12.46,69.673 0.87,44.502 -0.826,40.82 -0.108,38.575 3.588,36.969 7.096,35.443 10.442,33.541 13.954,32.022 17.058,30.68 17.372,28.782 15.738,26.101 14.18,23.542 12.732,20.916 11.192,18.344 7.714,12.53 8.23,10.846 14.522,7.647 24.886,2.377 35.05,-0.048 46.738,0.001" Fill="#FFD17AAF" Stretch="None" Margin="0,77.432,162.707,112.759"/> <Path Data="F1M99.055,79.05C99.211,84.292 98.845,88.905 97.965,93.521 97.249,97.274 95.558,99.161 91.56,98.651 88.098,98.21 84.606,98.001 81.132,97.642 77.23,97.239 75.044,98.772 75.049,102.881 75.05,103.047 75.035,103.214 75.018,103.379 73.465,118.723 75.1,117.441 60.15,114.803 41.517,111.515 27.789,100.103 16.041,85.868 1.694,68.485 -1.037,48.082 0.303,26.616 0.78,18.98 1.678,11.367 3.783,3.952 4.502,1.42 5.66,-0.122 8.619,0.007 28.726,0.884 48.002,4.91 65.084,16.076 81.925,27.086 91.243,43.548 96.936,62.352 98.637,67.967 99.456,73.727 99.055,79.05" Fill="#FFD17AAF" Stretch="None" Margin="150.726,162.795,43.163,0"/> <Path Data="F1M54.811,89.117C38.982,88.624 19.998,81.579 2.215,70.778 -0.06,69.396 -0.425,67.539 0.41,65.224 12.495,31.698 32.387,6.6 70.136,0.973 86.187,-1.419 101.615,0.448 116.128,8.229 119.992,10.301 121.813,12.391 119.004,16.782 116.961,19.977 115.709,23.674 114.069,27.131 112.622,30.185 113.345,32.16 116.69,33.243 119.69,34.215 122.586,35.505 125.55,36.592 130.859,38.539 131.091,39.161 128.799,44.575 122.795,58.762 112.703,69.302 99.563,76.985 87.352,84.125 74.442,89.276 54.811,89.117" Fill="#FFD17AAF" Stretch="None" Margin="162.867,75.838,0,114.26"/> </Grid> </Grid>
AiでPathでつくったので、このままコピペでうごいちゃいますね！
