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 ...
随机推荐
- ThinkPHP框架配置自定义的模板变量(十)
原文:ThinkPHP框架配置自定义的模板变量(十) 模板替换(手册有详细介绍对应的目录) __PUBLIC__:会被替换成当前网站的公共目录 通常是 /Public/ __ROOT__: 会替换成当 ...
- 14.4.2 Configuring InnoDB for Read-Only Operation 配置InnoDB 永于只读操作:
14.4.2 Configuring InnoDB for Read-Only Operation 配置InnoDB 永于只读操作: 你可以查询InnoDB 表 MySQL 数据目录是在只读介质里,通 ...
- lucene4.4 索引的增删改查
package com.lucene.test; import java.io.File; import java.io.FileReader; import java.io.IOException; ...
- 沙朗javascript总结一下(一)---基础知识
我也听说过Javascript这东西.我一直感觉很神奇,但它并没有去太懂.今天,牛腩哥哥随后的初步研究,一些浅显的认识.就先总结一下. 首先,什么是javascript? javascript是一种直 ...
- Android万能适配器base-adapter-helper的源代码分析
项目地址:https://github.com/JoanZapata/base-adapter-helper 1. 功能介绍 1.1. base-adapter-helper base-adapter ...
- [Cocos2d-x]节点的生命周期
清楚的知道一个对象的生命周期,在开发时候是非常必要的,对于自身定义并且创建的对象而言,它的生命周期是由程序员控制,但是对于coco2d-x中的节点,我们必须弄清它的生命周期,这样才能在开发中得心应手. ...
- git/github初级运用自如 (转)
三 . 设置用户信息 这一步不是很重要,貌似不设置也行,但github官方步骤中有,所以这里也提一下. 在git中设置用户名,邮箱 $ git config --global user.name &q ...
- Just learn how to use the JNI
JNITestProject Just learn how to use the JNI Refer : 1. ant usage http://lmbj.net/blog/ant-build-and ...
- Android.mk编译.apk .so .jar .a第三方.apk .so .jar .a的方法
一.编译一个简单的APK LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) # Build all java files in the java s ...
- Python的Tkinter去除边框
from Tkinter import * class Application(Frame): def __init__(self,master=None, *args, **kwargs): Fra ...