Geek asks and answers

Image animation: move the image left and then back

I have the following that works to animate the opacity of an image, but what I really would like to do is move the image backward to say 100 pixels to the right and then 100 pixels to the left. But I could not achieve this effect.

<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>

+3
source share
1 answer

Here is the image:

<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>

. . , , , , . (, .)

, :

<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 ( ), .
, .

+4

More articles:


All Articles