ExtJS2.0开发与实践笔记[4]——Ext中的动画处理
下面我给出一个简单的实例代码,其中囊括了大部分的Ext动画效果:
效果图如下:
操作图片如下:
CartoonExt.js
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
});
}
CartoonExt.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CartoonExt</title>
<!--加载ExtJs资源-->
<script type="text/javascript" src="adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-all.js">
</script>
<!--我的js-->
<script type="text/javascript" src="CartoonExt.js">
</script>
</head>
<body>
<div style="width:300px; height:450px;">
<!--被移动的元素-->
<img id="target" src="sprite1.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 异步特效
本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/129937
ExtJS2.0开发与实践笔记[4]——Ext中的动画处理相关推荐
- 敏捷开发scrum学习笔记(更新中)
敏捷开发宣言.原则和方法(20/05/12更新) 开发宣言 个体和交互胜于过程和工具 可以工作的软件过程胜过面面俱到的文档 用户合作胜过合同谈判 响应变化胜过遵循变化 在每组对比中,后者并非全无价值, ...
- 从0开发游戏引擎之游戏引擎中2D序列帧动画控制器的实现
这种序列帧动画要求每一帧的宽高必须一一致,否则动画播起来会出问题. 需要的图片类似图1.1 会把所有的动作拼接到一张图上,这样做也是为了节省内存和减少DrawCall,切换动作的时候只需要重新计算图片 ...
- 《微信公众平台开发最佳实践》——第3章 基 础 接 口 3.1 接收用户消息
本节书摘来自华章出版社<微信公众平台开发最佳实践>一 书中的第3章,第3.1节,作者:方倍工作室,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 第3章 基 础 ...
- 《Web前端开发最佳实践》——1.2 Web前端开发现状
本节书摘来自华章计算机<Web前端开发最佳实践>一书中的第1章,第1.2节,作者:党 建 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 1.2 Web前端开发 ...
- 【iOS开发每日小笔记(一)】UIPickerView 自动选择某个component的某个row
这篇文章是我的[iOS开发每日小笔记]系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧.它们可能会给用户体验.代码效率得到一些提升,或是之前自己 ...
- 《微信公众平台开发最佳实践》——2.1 新浪SAE应用
本节书摘来自华章出版社<微信公众平台开发最佳实践>一 书中的第2章,第2.1节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2.1 新浪SA ...
- 【iOS开发每日小笔记(七)】UITextView UITextField 检测并过滤Emoji表情符号
这篇文章是我的[iOS开发每日小笔记]系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧.它们可能会给用户体验.代码效率得到一些提升,或是之前自己 ...
- 《微信公众平台开发最佳实践》——2.4 本章小结
本节书摘来自华章出版社<微信公众平台开发最佳实践>一 书中的第2章,第2.4节,作者:方倍工作室,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2.4 本章小 ...
- 【iOS开发每日小笔记(二)】gitHub上的开源“瀑布流”使用心得
这篇文章是我的[iOS开发每日小笔记]系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧.它们可能会给用户体验.代码效率得到一些提升,或是之前自己 ...
- 《微信公众平台开发最佳实践》—— 1.3 微信公众平台的使用
本节书摘来异步社区<微信公众平台开发最佳实践>一书中的第1章,第1.3节,作者:方倍工作室,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.3 微信公众平台的使 ...
最新文章
- 2021-2027年中国一次成型光学玻璃行业市场分析及投资潜力研究报告
- 实战讲解Python函数参数
- keras中merge用法总结的言简意赅的
- hive连接mysql的配置_Dbeaver连接Hive和Mysql的配置
- CSP认证201312-2 ISBN号码[C++题解]:简单题
- Android mediaRecorder框架简述(二)
- 第三十一期:大数据分析师学习入门,10个数据可视化技巧
- vue 时区转换_vue---时间戳转换
- php oracle 操作 sql语句中能不能添加数组_如何在PHP中使用Oracle数据库_php
- js从数组中删除指定值(不是指定位置)的元素
- 50-20-200-配置-checkpoint配置
- 数据结构上机实践第九周项目1 - 二叉树算法库
- 对称加密算法和非对称加密算法速度对比
- cass怎么多级放坡_cass土方计算考虑放坡
- 高等数学(第七版)同济大学 习题7-3 个人解答
- win7安装英语语言包
- Qt自带mingw使用
- python绘制ROC曲线图,并计算面积
- 学习-Java循环while之求非负数之和
- tf.train.Saver()