<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>CartoonExt</title>
<!--加载ExtJs资源-->
<script type="text/javascript" src="ext-base.js">
</script>
<script type="text/javascript" src="ext-all.js">
</script>
<!--我的js-->
<script type="text/javascript">
//图片宽
var WIDTH=300;
//图片高
var HEIGHT=262;
function reset() {
//以Ext获得指定元素,并指定此元素左边距、上方边距、右边距、下方边距
Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);
}
function act() {
//刷新
reset();
//在指定时间内移动到指定位置
Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,{duration:1.0});
}
/**//**
* 播放连续动作
*/
function Anime(){
Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();
//IE下不支持switchOn()方法,这是一个Ext的bug
}
/**//**
* 淡出
*/
function fadeout() {
//设定最后不透明度为0.0(完全透明),持续时间为1.0,方式为easeNone
Ext.get('target').setOpacity(0.0,{ duration:1.0,easing:'easeNone'});
}
/**//**
* 淡入
*/
function fadein() {
Ext.get('target').setOpacity(1.0,{duration:1.0,easing:'easeNone'});
}
function act2() {
reset();
var easingMethod=document.getElementById('easing').value;
Ext.get('target').setLocation(150,150,{
duration:1.0,
easing:easingMethod
});
}
</script>
</head>
<body>
<div style="width:300px; height:450px;">
<!--被移动的元素-->
<img id="target" src="a.jpg">
</div>
<div style="text-align: center;">
<input type="button" value="刷新" onclick="reset();">
<input type="button" value="逐渐放大" onclick="act();">
<input type="button" value="淡出" onclick="fadeout();">
<input type="button" value="淡入" onclick="fadein();">
<input type="button" value="连续动画" onclick="Anime();">
<BR>
<BR>
效果列表
<select id="easing">
<option value="easeNone">easeNone</option>
<option value="easeIn">easeIn</option>
<option value="easeOut">easeOut</option>
<option value="easeBoth">easeBoth</option>
<option value="easeInStrong">easeInStrong</option>
<option value="easeOutStrong">easeOutStrong</option>
<option value="easeBothStrong">easeBothStrong</option>
<option value="elasticIn">elasticIn</option>
<option value="elasticOut">elasticOut</option>
<option value="elasticBoth">elasticBoth</option>
<option value="backIn">backIn</option>
<option value="backOut">backOut</option>
<option value="backBoth">backBoth</option>
<option value="bounceIn">bounceIn</option>
<option value="bounceOut">bounceOut</option>
<option value="bounceBoth">bounceBoth</option>
</select>
<input type="button" value="执行" onclick="act2();">
</div>
</body>
</html>
---------------------------------------------------------------------------------------------
fadeIn( [Object options] ) : Ext.Element 渐显 options参数有以下属性
callback:Function 完成后的回叫方法
scope:Object 目标
easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
afterCls:String 事件完成后元素的样式
duration:Number 事件完成时间(以秒为单位)
remove:Boolean 事件完成后元素销毁?
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化
concurrent:Boolean 顺序还是同时执行
stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除
fadeOut( [Object options] ) : Ext.Element 渐隐
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean 指示元素是否当前有特效正在活动
hasFxBlock() : Boolean 是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element 暂停
puff( [Object options] ) : Ext.Element 元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element 缩放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx() 特效序列
shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element 淡入
slideOut( [String anchor], [Object options] ) : Ext.Element 淡出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element 停止特效
switchOff( [Object options] ) : Ext.Element 收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element 异步特效
分享到:
相关推荐
VC模仿酷狗7动画效果界面,给窗口加上WS_EX_LAYERED样式,使用Gdiplus画出图片,然后UpdateLayeredWindow。处理WM_MOUSEHOVER、WM_MOUSELEAVE消息,鼠标进入或移出画出不同状态。
3. 动画效果:Ex_Dui支持各种动画效果,如淡入淡出、滑动、旋转等,这使得界面交互更加生动有趣。 4. 高性能:Ex_Dui优化了渲染引擎,确保在不同硬件环境下都能提供流畅的用户体验,减少了界面绘制对系统资源的占用...
在C# WinForm开发中,实现酷狗音乐那样的关闭、拉伸和动画效果,需要对Windows API、GDI+以及自定义控件有深入的理解。本文将详细讲解如何利用C#来模仿酷狗音乐的这些高级特性。 首先,酷狗音乐的关闭效果通常涉及...
"Ex_Ui高仿QQ登录界面(含H5动画)" 这个标题揭示了我们讨论的主题是关于一个使用Ex_Ui框架设计的QQ登录界面的仿制品,其中包含了HTML5(H5)动画效果。Ex_Ui通常指的是一个用于构建用户界面的扩展框架,它可能提供了...
在动画制作过程中,设计者需要确定哪些对象需要设置动画效果,并通过设置操作控制地址和显示条件来控制对象的隐现过程。这在强调特定信息或控制界面元素的可见性方面非常有用。 3. 颜色动画:颜色动画允许设计者...
5. **动画效果**:通过内置的动画引擎,开发者可以轻松实现窗口和组件的动态效果,如淡入淡出、滑动、旋转等,增强软件的视觉吸引力。 6. **资源管理**:Ex_DirectUI 内置资源管理器,支持图片、字体、声音等资源的...
2. **高级动画效果**:随着硬件加速的增强,2.0版本可能会支持更多复杂的动画效果,让UI更加生动和吸引人。 3. **更好的触控支持**:考虑到触摸设备的普及,DirectUI2.0可能增强了对触控输入的支持,使得在触摸设备...
API函数通常是由操作系统提供的,开发者可以通过它们来执行一些低级别的任务,如控制窗口的位置、大小、透明度等,从而实现复杂的动画效果。 在描述中提到的"深动画效果"可能指的是具有更丰富视觉层次和流畅过渡的...
在201805.26#1版中,控件的动画效果和交互体验得到了进一步优化,增强了用户的视觉享受和操作感知。 在事件处理方面,EX_UI界面库采用了基于事件驱动的编程模型。开发者只需要为控件指定相应的事件处理函数,当用户...
卡西欧EX-10的功能远不止于此,它还支持使用超广角拍摄、全景摄影以及特定的艺术效果拍摄,例如使用HDR艺术时保存第二幅普通影像。用户可以根据个人喜好和需求,选择适合的拍摄模式和设置。 最后,用户应当了解本...
2. **高效渲染**:Ex_DirectUI3.0利用DirectUI的底层绘图机制,提供高效的图形渲染,确保用户界面的流畅性,尤其在处理大量数据或复杂动画时表现优异。 3. **事件驱动**:该模块支持事件驱动编程,开发者可以通过...
标题中的“使用windows api演示动画的例子”表明这是一个利用Windows API(Application Programming Interface)来实现动画效果的编程示例。Windows API是微软操作系统提供的一系列函数和接口,供开发者使用,以便与...
一、题目 1、参考课堂示例Ex10_1,通过绘制直线、矩形(填充与非填充)、多边形、圆和文本,绘制一个如附图1所示的简易式样的小车(注:图中的标注是...说明:实际动画效果,自行创意设计,可以更复杂一些,并且还可以
VC模仿酷狗7(Kugou7) UI界面源码,有动画效果,原创作者:邓学彬(泪闯天涯) 源码说明:内含VC++源码、易语言源码各一份.包含所有图片源码(使用Fireworks编辑) 开发环境:VC版--VS2005、Gdiplus;易语言版--...
这涉及到对WXML和WXSS的理解,以及如何利用微信提供的动画和过渡效果。 6. **数据缓存与离线访问**: 为了提高用户体验,小程序通常会缓存部分数据,以便在离线状态下也能查看之前加载过的内容。微信小程序提供了...
Ex_ui界面支持库2018.05.26版本可能包括了如按钮、输入框、滑块、进度条、下拉菜单等常见控件,同时也可能提供了自定义主题、动态效果和动画的支持。 在使用Ex_ui界面支持库时,开发者首先需要确保他们的开发环境与...
动画效果可以通过定时器(SetTimer)实现,定时更新窗口的位置、大小或透明度,以产生移动或变换的效果。在消息处理函数中响应WM_TIMER消息,执行相应的动画逻辑。 总结,通过上述步骤,我们可以使用Visual C++创建...
VC模仿酷狗7(Kugou7) UI界面源码,有动画效果,原创作者:邓学彬(泪闯天涯) 源码说明:内含VC 源码、易语言源码各一份.包含所有图片源码(使用Fireworks编辑) 开发环境:VC版--VS2005、Gdiplus;易语言版--易语言5,...
5. **框架和库**: 使用像ex_ui这样的库可以大大简化开发过程,因为它们通常预封装了常见UI元素和动画效果,提供了统一的样式和API,使得开发者能快速实现半透明效果和其他高级功能。 6. **动画效果**: 半透明登录...
6. **注册自绘控件**:在父窗口类中,我们需要使用CreateWindowEx函数创建自定义的CAVIButton控件,并设置WS_EX_TRANSPARENT风格,以便于动画效果更好地呈现。 7. **测试与调试**:最后,编译运行程序,观察动画...