[silverlight基础]仿文字连接跑马灯效果-高手绕道
[silverlight基础]仿文字连接跑马灯效果-高手绕道
菩提树下的杨过
发布于 2018-01-23 11:40:39
发布于 2018-01-23 11:40:39
运行效果如下:
获取 Microsoft Silverlight
分析示意图：
代码:
<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 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云直播
云直播（Cloud Streaming Services，CSS）为您提供极速、稳定、专业的云端直播处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、快直播、云导播台三种服务，分别针对大规模实时观看、超低延时直播、便捷云端导播的场景，配合腾讯云视立方·直播 SDK，为您提供一站式的音视频直播解决方案。