您现在的位置是:首页 > 正文

一步一步学Silverlight 2系列(32):图形图像综合实例—“功夫之王”剧照播放...

2024-01-30 23:30:40阅读 0

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。 http://terrylee.blog.51cto.com/342737/68194

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。
本文我们再实现一个图形图像实例——图片播放,并利用Storyboard实现一些动画效果。
今天我也当一回“标题当”:),其实就是实现一个简单的图片播放器,跟“功夫之王”剧照半点关系也没有,只不过我上网找了几张即将播出的的电影《功夫之王》的剧照,作为我们的示例图片。

实现效果

最终我们实现的效果如下,初始界面
 
点击左边或者右边小图片播放
 
再来一张播放中的
 

主要实现

在单击时动态改变图片的Source属性:
void Play()
            {
            currentImg.Source = new BitmapImage(new Uri(index.ToString() + ".png", UriKind.Relative));
            int left = index == MIN ? MAX : index - 1;
            leftImg.Source = new BitmapImage(new Uri(left.ToString() + ".png", UriKind.Relative));
            int right = index == MAX ? MIN : index + 1;
            rightImg.Source = new BitmapImage(new Uri(right.ToString() + ".png", UriKind.Relative));
            }
并通过Storyboard来改变Transform的一些值实现动画效果:
<Canvas.Resources>
            <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
            Storyboard.TargetName="myTransform"
            Storyboard.TargetProperty="AngleY"
            From="0" To="180" Duration="0:0:5" RepeatBehavior="1x"/>
            <DoubleAnimation
            Storyboard.TargetName="leftScaleTransform"
            Storyboard.TargetProperty="ScaleX"
            From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>
            <DoubleAnimation
            Storyboard.TargetName="leftScaleTransform"
            Storyboard.TargetProperty="ScaleY"
            From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>
            <DoubleAnimation
            Storyboard.TargetName="rightScaleTransform"
            Storyboard.TargetProperty="ScaleX"
            From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>
            <DoubleAnimation
            Storyboard.TargetName="rightScaleTransform"
            Storyboard.TargetProperty="ScaleY"
            From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>
            </Storyboard>
            </Canvas.Resources
大家可以从这里 下载完整示例代码。

结束语

本文实现了一个简单的图片播放器,并利用Storyboard实现一些动画效果。

本文出自 “TerryLee技术专栏” 博客,请务必保留此出处http://terrylee.blog.51cto.com/342737/68194

转载于:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361424.html

网站文章

  • 如何使用js来编写vue组件?

    如何使用js写vue组件?3分钟看懂,简单示例代码。完整代码。可复制直接进行运行

    2024-01-30 23:30:33
  • PAT 1039 Course List for Student (25 分)

    PAT 1039 Course List for Student (25 分)

    1039 Course List for Student (25 分) Zhejiang University has 40000 students and provides 2500 courses...

    2024-01-30 23:29:54
  • windows安装配置git和ToriseGit

    windows安装配置git和ToriseGit

    --------------------------安装完成,接下在是配置---------------------------------完成后,点击,下面的save public key和save...

    2024-01-30 23:29:45
  • springboot集合aciviti报错sun.reflect.annotation.TypeNotPresentExceptionProxy

    import org.activiti.spring.boot.SecurityAutoConfiguration;@SpringBootApplication(exclude = SecurityAutoConfiguration.class)

    2024-01-30 23:29:36
  • SPFA——路障Roadblocks

    将每条无向边拆成两条有向边 建图分别以1、n为原点SPFA求最短路 分别记为dis1[i]、dis2[i]枚举每一条有向边i(起点为u 终点为v 长度为w)经过该有向边i的最短路长即为 dis1[u]+w+dis2[v]求这些“最短路长”中比“真·最短路”长的最短长度

    2024-01-30 23:29:30
  • element-ui upload组件完美适配oss 解决方案

    element-ui upload组件完美适配oss 解决方案

    oss 存储方案1 oss 基础配置1 .1创建bucket1.2 创建子账户创建用户并授予编程访问权限:创建用户成功后的样式:1.3 授权完成oss所有的权限2 oss 官方文档地址2.1 官方帮助...

    2024-01-30 23:28:59
  • 解决a标签点击失效问题

    解决a标签点击失效问题

    问题描述:当鼠标移动到退出时,不发生变化且点击没有效果,在我更改样式后。 原因:a标签被其他层级覆盖了 设置a标签样式 a{ z-index: 9999; position: relative; display: inline-block; } 成功

    2024-01-30 23:28:52
  • android快速开发ui框架!整理几个重要的Android知识,吐血整理

    很多程序员都有这样的觉悟;找工作学历是敲门砖,没有211,985起步的学历,想进一家大公司不太可能。 举个例子好了; 如果你是大厂面试官,参与面试的有10个刚刚毕业没有工作经验的普通学校应届生,还有1...

    2024-01-30 23:28:44
  • windows10安装tensorflow-gpu1.13.1与tensorflow-gpu2.0.0教程

    windows10安装tensorflow-gpu1.13.1与tensorflow-gpu2.0.0教程

    我安装tensorflow-gpu时总是出现问题,特别是tensorflow-gpu、cuda、cudnn的版本不对应会出现很多奇怪的错误提示,希望这篇记录对我以后也有所帮助。

    2024-01-30 23:28:15
  • 网页动态线条特效

    网页动态线条特效

    首先,附上作者的链接:https://github.com/hustcc/canvas-nest.js 然后:最好使用方法二,方法二可以在本地的文件中修改一些参数,使线条达到我们想要达到的效果,而且可以把js放到js的文件中,不占用html或者jsp页面中的内容等,一般来说,js单独另存,在页面中引用js存在的位置即可。 &amp;...

    2024-01-30 23:28:07