3

画像の不透明度をアニメーション化するために機能する次のものがありますが、私が本当にやりたいのは、画像を前後に移動して、たとえば右に100ピクセル、次に左に100ピクセル移動させることです。しかし、私はこの効果を達成することができませんでした。

<Image Source="MyImage.jpg" Width="2000" Height="800" x:Name="MyAnimatedImageGeometry">
<Image.Triggers>
    <EventTrigger RoutedEvent="Image.Loaded">
        <BeginStoryboard>
            <Storyboard Storyboard.TargetName="MyAnimatedImageGeometry" Storyboard.TargetProperty="Opacity">
                <DoubleAnimation To="0" AutoReverse="True" RepeatBehavior="Forever"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Image.Triggers>

4

1 に答える 1

4

これが画像です：

<Image x:Name="image" Source="/filename.png" RenderTransformOrigin="0.5,0.5" >
    <Image.RenderTransform>
        <CompositeTransform TranslateX="0"/>
    </Image.RenderTransform>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <eim:ControlStoryboardAction Storyboard="{StaticResource moveImage}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Image>

rendor変換の初期化は興味深いビットです。トリガーは、ストーリーボードの開始を示すためだけにあります。このようにアイテムをタップして移動すると、移動中にアイテムをタップすると混乱するため、実際のアプリではこれを行いません。（明らかに、これはコードで簡単に制御できます。）

もう1つの興味深い点、関連するストーリーボードは次のとおりです。

<Storyboard x:Name="moveImage" AutoReverse="True" RepeatBehavior="1x">
    <DoubleAnimation Duration="0:0:1"
                     To="-100"
                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                     Storyboard.TargetName="image"
        <DoubleAnimation.EasingFunction>
            <CubicEase EasingMode="EaseIn"/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

これにより、画像が100ピクセル左に移動し（1秒間）、再び元に戻ります。
もっと面白くするためにイージング機能を追加しました。

于 2012-05-21T20:04:21.743 に答える