Sliverlight之 特效
1,OpacityMask控件的部分渐隐(见Project16)
(1) 控件的OpacityMask有什么作用
说明:
设置所选区域不透明度的画笔,一般结合LinearGradientBrush或RadialGradientBrush使用
般用它来实现实现渐隐效果
将一个图片实现渐隐效果,需要在一个渐变点设置Color="Transparent"
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="red" Offset=""></GradientStop>
<GradientStop Color="Transparent" Offset=""></GradientStop>
</LinearGradientBrush>
</Image.OpacityMask>
另一种
<Image.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<GradientStop Color="Red" Offset=""></GradientStop>
<GradientStop Color="Transparent" Offset=""></GradientStop>
</RadialGradientBrush>
</Image.OpacityMask>
(2) OpacityMask是什么类型
说明:
OpacityMask是一个Brush类型
(3) 将一个TextBox实现一个渐隐效果
说明:
像TextBox可以直接用Background设置也能实现类似的渐隐效果,但像Image就没有Background设置了,通过OpacityMask就很方便
<TextBox Background="Gray">
<TextBox.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset=""></GradientStop>
<GradientStop Color="Transparent" Offset=""></GradientStop> </LinearGradientBrush> </TextBox.OpacityMask>
</TextBox>
2,两种效果Effect_模糊和投影(见Project17)
(1) Effect有哪两种效果
说明:
BlurEffect 模糊
DropShadowEffect 投影
(2)Effect是什么类型
说明:Effect就是Effect类型
(3)在一个TextBox中添加文字,并将其模糊(在中文帮助里查看BlurEffect怎么用)
说明:
通过Radius设置模糊程度
<TextBox.Effect>
<BlurEffect Radius=""></BlurEffect>
</TextBox.Effect>
(4)BlurEffect的一个重要属性是什么,怎么使用
说明:
通过Radius设置模糊程度,一般值的范围是1--100
(5)将一个Button添加一个投影效果(在中文帮助里查看DropShadowEffect怎么用)
说明:
<Button.Effect>
<DropShadowEffect Color="Red" Direction="" ShadowDepth="" BlurRadius="" Opacity=""></DropShadowEffect>
</Button.Effect>
(6)DropShadowEffect有哪几个重要属性,分别怎么使用
说明:
Color="Red" 设置投影的颜色
Direction="225" 投影的位置
ShadowDepth="7" 投影的距离
BlurRadius="20" 投影的模糊程度
Opacity="20" 设置边缘的不透明度
3,六种变换(见Project18)
(1) 有哪六种变换
说明:
RotateTransform 按一定角度旋转
ScaleTransform 等比例缩放
SkewTransform 扭曲歪斜
TranslateTransform 位移
TransformGroup 复合变换
MatrixTransform 矩阵变换
(2) RenderTransform是什么类型
说明:
RenderTransform是Transform类型
一般用作控件的属性,使控件发生变换
(3) 如何让一个按钮呈15度旋转(在中文帮助里查看RotateTransform怎么用)
说明:
<Button.RenderTransform>
<RotateTransform Angle="" CenterX="" CenterY=""></RotateTransform>
</Button.RenderTransform>
(4) RotateTransform有哪几个重要属性,分别怎么使用
说明:
RotateTransform使控件可以按一定角度旋转
Angel: 旋转角度,默认以左上角为旋转中心点.为正值则按顺时针方向旋转,为负值则按逆时针方向旋转
CenterX,CenterY 定义旋转的中心点
(5) 将一个TextBox持续不断的顺时针转动(用到定时器)
说明:
DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds();
dt.Tick += dt_Tick;
dt.Start(); void dt_Tick(object sender, EventArgs e)
{
myRotate.Angle += ; }
(6) 将一张图片按照中心点位置,进行缩放
说明:
将图片等比例放大为原来的2倍
<Image.RenderTransform>
<ScaleTransform ScaleX="" ScaleY="" CenterX="" CenterY=""></ScaleTransform>
</Image.RenderTransform>
(6) ScaleTransform,ScaleX和ScaleY的作用是什么,当为负值时有什么效果,它与CenterX,CenterY有什么关系(用示例演示说明)
说明:
ScaleTransform 等比例缩放
ScaleX和ScaleY 为控件在X和Y轴的缩放比例,值为原控件的缩放倍数.当为负值时,会先翻转例置再缩放
CenterX和CenterY为缩放的焦点
(7) 将一个视频倒影播放效果
说明:
<MediaElement.RenderTransform>
<ScaleTransform ScaleY="-1" CenterY=""></ScaleTransform>
</MediaElement.RenderTransform>
(8) 如何让一个图片做成倾斜的效果(在中文帮助里查看SkewTransform怎么用)
说明:
<Image.RenderTransform>
<SkewTransform AngleX="" AngleY="-30" CenterX="" CenterY=""></SkewTransform>
</Image.RenderTransform>
(9) SkewTransform有哪几个重要属性,分别怎么使用
说明:
SkewTransform使控件扭曲歪斜
AngleX:没X轴逆时针旋转
AngelY:沿Y轴顺时针旋转
CenterX和CenterY
(10) 如何将一个图片实现位移的效果(在中文帮助里查看TranslateTransform怎么用)
说明:
<Image.RenderTransform>
<TranslateTransform X="" Y=""></TranslateTransform>
</Image.RenderTransform>
(11) TranslateTransform有哪几个重要属性,怎么使用(如果为负值,有什么效果)
说明:
TranslateTransform 沿X和Y轴位移
X: 沿X轴位移,单位像素
Y: 沿Y轴位移,单位像素
注意:X和Y若为负值,则按相反方向位移
(12) 什么是复合变换,它用什么标签表示,用一个示例演示一下效果
说明:
复合变换使用标签TransformGroup,表示一个容器,可以将多种Transform效果放进去
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""></RotateTransform>
<SkewTransform AngleX=""></SkewTransform>
</TransformGroup>
</TextBlock.RenderTransform>
(13) 什么是3D投射效果,用什么标签表示
说明:
3D投射,可以使控件在三维空间旋转
用标签PlaneProjection实现
属性:RotationX,RotaionY,RotaionZ 分别以X轴,Y轴,Z轴旋转的角度,可以为负值
<Image.Projection>
<PlaneProjection RotationX="" RotationY="" RotationZ=""></PlaneProjection>
</Image.Projection>
(14) 将一个图片实现3D翻转的效果(使用定时器修改RotationX)
说明:
前端:
<Image.Projection>
<PlaneProjection RotationX="" RotationY="" RotationZ="" x:Name="myPlan"></PlaneProjection>
</Image.Projection>
代码:
DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds();
dt.Tick += dt_Tick;
dt.Start(); void dt_Tick(object sender, EventArgs e)
{
myPlan.RotationY += ;
myPlan.RotationX += ;
myPlan.RotationZ += ;
}
(15) 用MatrixTransform演示一下矩阵变换的效果
说明:
矩阵变换,有点复杂
<Rectangle.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix >
<Matrix OffsetX="" OffsetY="" M12="0.3" />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
Sliverlight之 特效的更多相关文章
- 一些WPF中的滤镜特效——Effect Library
WPF支持类似PhotoShop的滤镜功能,称之为Effect.在.Net 4.0中,WPF就废弃了对BitMapEffect的支持,转向使用支持GPU加速的Effect类,例如,我们可以使用如下代码 ...
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- Carousel 旋转画廊特效的疑难杂症
疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- 原生js可爱糖果数字时间特效
效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
随机推荐
- pv操作 生产者消费者
#include <iostream> #include <stdlib.h> #include <pthread.h> #include <semaphor ...
- [Android]Eclipse的使用
1.取消Eclipse拼写检查 General -> Editors -> Text Editors -> Spelling 取消enable spell checking 前面的勾 ...
- 事务不提交,也有可能写redo和数据文件
事务不提交,也有可能写redo和数据文件
- UDP vs. TCP
UDP vs. TCP 原文:UDP vs. TCP,作者是Glenn Fiedler,专注于游戏网络编程相关工作多年. 说在最前面的话 翻译这篇文章的初衷:我在工作中根本接触不到网络游戏编程,但是我 ...
- JAVA - 优雅的记录日志(log4j实战篇) (转)
写在前面 项目开发中,记录错误日志有以下好处: 方便调试 便于发现系统运行过程中的错误 存储业务数据,便于后期分析 在java中,记录日志有很多种方式: 自己实现 自己写类,将日志数据,以io操作方式 ...
- PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区
PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区 PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具
- Servlet(七)生成验证码
1.ImageCode.java package com.hunhun.utils; import java.awt.Color; import java.awt.Font; import java. ...
- adm下载器
netdisk;5.2.7;PC;PC-Windows;6.2.9200;WindowsBaiduYunGuanJia
- SE 2014年5月28日
R1模拟总部,R2 与R3模拟分部 如图配置 (1)网络中目前只有两站点, R1 和R2 .同时R2为动态获取IP地址一方,要求使用要求使用 GRE over IPSec VPN 野蛮模式,保证R1和 ...
- java中浮点数的比较(double, float)(转)
问题的提出:如果我们编译运行下面这个程序会看到什么? public static void main(String args[]){ System.out.println(0.05+0.01); Sy ...