0

添付の画像を参照して、wpf で円形アニメーションを使用してグラフィカル アニメーションを実装しています (明らかに、私はアーティストではありません...)。正方形は目に見えるフォームを表し、画像全体はページからページへと移動するキャンバスを表します。アニメーションは、右方向に 1 -> 2 -> 3 -> 4 -> 1、左方向に 4 -> 3 -> 2 -> 1 -> 4 とスクロールして折り返します。

写真の色付きの矢印からわかるように、以前の実装では、必要な写真と同じフロント ポーチとバック ポーチを使用できます。アニメーションが表または裏の絵に移動するとき、ユーザーが知らないうちに実際のページにすばやく移動するために、瞬間的なアニメーションが使用されます。

これまでのところ、これはうまく機能しており、非常にスムーズです。問題は、私の実装が単なるイメージではないことにあります。各ページには、複雑なアニメーション自体があります。同じ実装を使用すると、4 つの実際のページですべてのアニメーションをミラーリングする必要があります。これは、滑らかなアニメーションをロールオーバーするためだけに存在する最後のページで行う必要があるためです。

明らかに、これは非常に無駄が多く、多くの理由で理想的ではありません...

私が考えていたのは、フロントページ 1 と 4 から画像を作成し、その画像を別のキャンバスを使用してフロントポーチとバックポーチに重ねることです。しかし、これはまだ難しすぎるようで、もっと簡単な方法があるはずです。

これよりも優先または簡単な方法はありますか? これについて心配する必要がないように、他のキャンバスを模倣するある種のキャンバスを探しています。それか、最後のページをラップするまったく新しいアルゴリズムのいずれかです。

このスクロール ルーチンについてインターネットを調べましたが、まだ何も見つかりませんでした。助けてくれてありがとう！長い投稿で申し訳ありません。

ここに画像の説明を入力

4

1 に答える 1

0

VisualBrush を使用してキャンバスにバインドすることで、質問に対する答えを見つけたようです。

    <Canvas Name="backgroundCanvas" Visibility="Visible"  Height="{StaticResource animHeight}" Width="6144">

        <Canvas Name="menuFrontCanvas" Visibility="Visible" Margin="0,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="{StaticResource animWidth}" Height="{StaticResource animHeight}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding ElementName=menu4Canvas}" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

        <Canvas Name="menu1Canvas"  Visibility="Visible" Margin="1024,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="alpsLogoImage" Canvas.ZIndex="99"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" 
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/ALPSLogo.png" />
            <Image Name="menu1Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu1Image.png" />
        </Canvas>

        <Canvas Name="menu2Canvas" Visibility="Visible" Margin="2048,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu2Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu2Image.png" />
        </Canvas>

        <Canvas Name="menu3Canvas" Visibility="Visible" Margin="3072,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu3Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu3Image.png" />
        </Canvas>

        <Canvas Name="menu4Canvas" Visibility="Visible" Margin="4096,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu4Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu4Image.png" />  
        </Canvas>

        <Canvas Name="menuBackCanvas" Visibility="Visible"   Margin="5120,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="{StaticResource animWidth}" Height="{StaticResource animHeight}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding ElementName=menu1Canvas}" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

    </Canvas>
于 2013-04-23T14:35:33.320 に答える