當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

32.ExtJS简单的动画效果

發布時間：2025/3/20 javascript 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 32.ExtJS简单的动画效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉自：http://blog.sina.com.cn/s/blog_74684ec501015lhq.html

說明：這篇文章的大部分內容來源于網上，經過自己實現其效果后，整理如下：

在進行 Javascript 開發，有時會有一些動畫效果的實現需要，這往往浪費了開發人員不必要的精力。而 Ext 開發小組則提供了 Fx 類集中處理了大部分常用的 js 動畫特效，減少了我們自己手寫代碼的復雜度。

下面我給出一個簡單的實例代碼，其中囊括了大部分的 Ext 動畫效果：

（注意導入js和css文件的目錄，圖片自己設置）

CartoonExt.js

var WIDTH = 300; // 圖片寬

var HEIGHT = 300; // 圖片高

/**

? * 刷新

? */

function reset() {

??? // 以 Ext 獲得指定元素，并指定此元素左邊距、上方邊距、右邊距、下方邊距

??? Ext. get ( 'picture' ).highlight().setBounds(10, 10, WIDTH + 10, HEIGHT + 10);

}

/**

? * 逐漸放大

? */

function enlarge() {

??? reset();

??? // 在指定時間內移動到指定位置

??? Ext. get ( 'picture' ).setBounds(150, 80, WIDTH + 50, WIDTH + 80, { // 指定的位置

?????? duration : 1.0 //duration:Number? 事件完成時間（以秒為單位）

??? });

}

/**

? * 連續動畫

? */

function play() {

??? Ext. get ( 'picture' ).highlight().fadeOut().fadeIn().pause(2).switchOff().puff();

??? // IE 下不支持 switchOn() 方法，這是一個 Ext 的 bug

}

/**

? * 淡出

? */

function fadeout() {

??? // 設定最后不透明度為 0.0( 完全透明 ), 持續時間為 1.0 ，方式為 easeNone

??? Ext. get ( 'picture' ).setOpacity (0.0, {

?????? duration : 1.0,

?????? easing : 'easeNone' //easing:String? 行為方法默認值是 :easeOut

??? });

}

/**

? * 淡入

? */

function fadein() {

??? Ext. get ( 'picture' ).setOpacity (1.0, {

?????? duration : 1.0,

?????? easing : 'easeNone'

??? });

}

function execution() {

??? reset();

??? var easingMethod = document.getElementById( 'easing' ).value;

??? Ext. get ( 'picture' ).setLocation(150, 150, {

?????? duration : 1.0,

?????? easing : easingMethod

??? });

}

----------------------------------------------------------------------------------------------------------------

CartoonExt.html

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

??? < head >

?????? < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

?????? < title > CartoonExt </ title >

?????? < script type = "text/javascript" src = "../js/ext-base.js" ></ script >

?????? < script type = "text/javascript" src = "../js/ext-all.js" ></ script >

?????? < script type = "text/javascript" src = "../js/CartoonExt.js" ></ script >

??? </ head >

??? < body >

?????? < div style = "width: 300px; height: 300px;" >

??????????

?????????? < img id = "picture" src = "../images/test_1.jpg" >

?????? </ div >

?????? < div style = "text-align: center;" >

?????????? < input type = "button" value = " 刷新 " onclick = "reset()" >

?????????? < input type = "button" value = " 逐漸放大 " onclick = "enlarge();" >

?????????? < input type = "button" value = " 淡出 " onclick = "fadeout();" >

?????????? < input type = "button" value = " 淡入 " onclick = "fadein();" >

?????????? < input type = "button" value = " 連續動畫 " onclick = "play();" >

?????????? < 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 = "execution();" >

?????? </ div >

??? </ body >

</ html >
----------------------------------------------------------------------------------------------------------------

部分參數如下：
fadeIn ( [Object options] ) : Ext.Element 漸顯 options 參數有以下屬性
callback:Function??? 完成后的回叫方法
scope:Object?????? ? 目標
easing:String??????? 行為方法默認值是:easeOut, 可選值如下?? ??????

字段值	說明
easeNone	勻速
easeIn	開始慢且加速
easeOut	開始快且減速
easeBoth:	開始慢且減速
easeInStrong	開始慢且加速,t 的四次方
easeOutStrong	開始快且減速,t 的四次方
easeBothStrong	開始慢且減速,t 的四次方

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
});

標簽：
extjs /
object /
string /
input /
function /
javascript /

本文已收錄于以下專欄：

目前您尚未登錄，請登錄或注冊后進行評論

Extjs動畫效果(自定義動畫)

Ext Core 通過預置的動畫功能，可以讓輕松實現動畫功能。通過自定義動畫