首页 新闻 会员 周边 捐助

WPF 请教多张图片，动画拼凑LOGO

0
悬赏园豆：100 [待解决问题]

若干张图片一张一张以动画效果飞入，贴满预先设计好的LOGO（任意一个形状），如下图，直到贴满。
图片张数足以贴满LOGO。
请问这是一个什么思路？它是用canvas还是grid布局呢或其它方法？谢谢

参考视频地址：[url=http://www.tudou.com/programs/view/4IqOOWUg8-w/]

 

wseven的主页 wseven | 初学一级 | 园豆：102
提问于：2013-11-14 23:01
< >
分享
所有回答(2)
0

用哪个布局都可以，我用Grid布局用三个button写了一个小例子

你看一下

<Window x:Class="FlyWin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="OnLoaded1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="145"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="228"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="21"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="42"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="155"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="335"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="71"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="60"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button2">
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="70"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="154"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="190"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button2">
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="44"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="80"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="82"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="-182,20,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="-206,4,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
        <Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Margin="-142,15,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
        
    </Grid>
</Window>
li-peng | 园豆：954 (小虾三级) | 2013-11-15 11:10

首先谢谢你的回答。嘿嘿，还有一个问题：

如果拼满LOGO需要200张图片，是不是得预先设置好200个坐标呢？或者有其它方法自动判断各个图片的目标坐标。

 

支持(0) 反对(0) wseven | 园豆：102 (初学一级) | 2013-11-15 11:29

@-标准: 你用Blend吧

如果图太多你就写一个公共方法

支持(0) 反对(0) li-peng | 园豆：954 (小虾三级) | 2013-11-15 11:36

@bluejance: 恩，图片是比较多，可是LOGO的形状也不是规则的，这个公共方法可以用什么来生成坐标呢？困扰好久了  :)

支持(0) 反对(0) wseven | 园豆：102 (初学一级) | 2013-11-15 11:44
0

有一个比较笨的办法：

　　把Logo需要填充的部分弄成透明的（镂空），其它不透明，把用来填充的图片放在Logo的后面。这样就不需要设置坐标，而且能满足任意形状Logo的要求。 缺点是需要的图片比实际需求多。

德年 | 园豆：1010 (小虾三级) | 2013-11-15 11:40

 恩，是的，现在就是用的这种方法，但总感觉不太科学，一张图片滑过来结果贴到了看不到的位置。呵呵 

支持(0) 反对(0) wseven | 园豆：102 (初学一级) | 2013-11-15 11:59
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。