首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >[silverlight基础]仿文字连接跑马灯效果-高手绕道

[silverlight基础]仿文字连接跑马灯效果-高手绕道

作者头像
菩提树下的杨过
发布于 2018-01-23 11:40:39
发布于 2018-01-23 11:40:39
8520
举报

运行效果如下:

分析示意图:

代码:

代码语言:js
复制
 <Canvas x:Name="a" Background="AliceBlue" MouseEnter="a_MouseEnter" MouseLeave="a_MouseLeave" Cursor="Hand" >
           <Canvas.Clip>
               <RectangleGeometry RadiusX="0" RadiusY="0" Rect="50,50, 300,50" />
           </Canvas.Clip>
           <Canvas.Triggers>
               <EventTrigger RoutedEvent="Canvas.Loaded" >
                   <BeginStoryboard>
                       <Storyboard x:Name="animation" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever" >
                           <DoubleAnimation Storyboard.TargetName="txt1" From="50" To="-500" Duration="0:0:10"  />
                           <DoubleAnimation Storyboard.TargetName="txt2" From="600" To="50" Duration="0:0:10"  />
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
           </Canvas.Triggers>
           <TextBlock x:Name="txt1"  FontSize="36" Foreground="Green" Text="1 2 3 4 5 6 7 8 9 0 a b c d e f " Canvas.Top="50" Width="550" Height="50"/>
           <TextBlock x:Name="txt2"  FontSize="36" Foreground="Red" Text="1 2 3 4 5 6 7 8 9 0 a b c d e f " Canvas.Top="50" Width="550" Height="50"/>
       </Canvas>

解释一下:

1.先创建了一个裁减区(起始坐标为50,50,宽度为300,高度为50)--这是必须的,否则超过这个区域的文字也会显示出来

2.Storyboard中对二段文字对象的Canvas.Left进行了变化,即完成左移

3.RepeatBehavior="Forever"表示这段动画将一直播放下去(即视觉上好象文字在一起向左滚动)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2009-09-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档