JavaScript DHTML/SmartClient/Animation
Содержание
- 1 Animation: minimize window
- 2 Animation: Move in and move out
- 3 Animation: Show and hide
- 4 Animation: slide in and slide out
- 5 Animation: Zoom in and zoom out
- 6 Control the animation sequence
- 7 Customized animation path: animateOrbit, animateOrbitStep
- 8 Expand and resize animation
- 9 Image fade in and fade out
- 10 Image zoom in and zoom out animation
- 11 SmartClient animation programming
- 12 Wipe in and wipe out
Animation: minimize window
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Window.create({
ID: "exampleWindow", width: 300, height: 100, title: "System status - all systems: Normal", canDragReposition: true, animateMinimize: true, items: [ isc.HTMLFlow.create({ padding:5, width: "100%", height: "100%", contents: "Staging: Normal
"+ "Production: Normal
"+ "Development: Normal
" }) ]
}); </SCRIPT> </BODY> </HTML>
</source>
Animation: Move in and move out
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({
ID:"messageBox", styleName:"exampleTitle", showEdges:true, padding:5, backgroundColor:"#ffffd0", valign:"center", align:"center", width:200, top:50, left:-220, // start off-screen contents:"Vision is the art of seeing the invisible.", animateTime:1200 // milliseconds
}) isc.IButton.create({
title:"Move in", click:"messageBox.animateMove(10,50)"
}) isc.IButton.create({
title:"Move out", left:120, click:"messageBox.animateMove(-220,50)"
}) </SCRIPT> </BODY> </HTML>
</source>
Animation: Show and hide
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HStack.create({
ID:"starsLayout", top:50, membersMargin:10, layoutMargin:10, showEdges:true, animateMembers:true, members:[ isc.Label.create({contents: "a", ID:"greenStar"}), isc.Label.create({contents: "asdf"}), isc.Label.create({contents: "asdf"}) ]
}) isc.IButton.create({
title:"Hide", iconOrientation:"right", click: "starsLayout.hideMember(greenStar)"
}) isc.IButton.create({
title:"Show", left:120, iconOrientation:"right", click: "starsLayout.showMember(greenStar)"
}) </SCRIPT> </BODY> </HTML>
</source>
Animation: slide in and slide out
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({
ID:"messageBox", left:35, top:50, width:150, styleName:"exampleTitle", align:"center", valign:"center", padding:10, showEdges:true, contents:"Vision is the
art of seeing the invisible.", backgroundColor:"#ffffd0", visibility:"hidden", animateTime:1200
}) isc.IButton.create({
title:"Show", click:"messageBox.animateShow("slide")"
}) isc.IButton.create({
title:"Hide", left:120, click:"messageBox.animateHide("slide")"
}) </SCRIPT> </BODY> </HTML>
</source>
Animation: Zoom in and zoom out
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
ID:"magnifier", src:"http://www.wbex.ru/style/logo.png", left:100, top:125, width:48, height:48, animateTime:500
}) isc.IButton.create({
title:"Zoom", click:"magnifier.animateRect(0,50,248,248)"
}) isc.IButton.create({
title:"Shrink", left:120, click:"magnifier.animateRect(100,125,48,48)"
})
</SCRIPT> </BODY> </HTML>
</source>
Control the animation sequence
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({
ID:"ajaxDefinition", top:50, width:75, height:45, overflow:"hidden", styleName:"exampleTextBlock", showEdges:true, contents:"Ajax Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)", animateTime:800
}) isc.IButton.create({
ID:"expandBtn", title:"Expand", click: function () { this.disable(); ajaxDefinition.animateResize(310,45, // this script will execute when the first part of the animation completes "ajaxDefinition.animateResize(310,195); collapseBtn.enable();" ); }
}) isc.IButton.create({
ID:"collapseBtn", title:"Collapse", left:120, disabled:true, click: function () { this.disable(); ajaxDefinition.animateResize(310,45, // this script will execute when the first part of the animation completes "ajaxDefinition.animateResize(72,45); expandBtn.enable();" ); }
}) </SCRIPT> </BODY> </HTML>
</source>
Customized animation path: animateOrbit, animateOrbitStep
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
src:"http://www.wbex.ru/style/logo.png", width:48, height:48, top:0, left:100, animateOrbit : function () { isc.Animation.registerAnimation(this.animateOrbitStep, 2000, null, this); }, animateOrbitStep : function (ratio) { var angle = (Math.PI*2)*ratio-(Math.PI/2); this.moveTo(Math.cos(angle)*100+100, Math.sin(angle)*100+100); }, click: "this.animateOrbit()"
}) </SCRIPT> </BODY> </HTML>
</source>
Expand and resize animation
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({
ID:"ajaxDefinition", top:50, width:75, height:45, overflow:"hidden", styleName:"exampleTextBlock", showEdges:true, contents:"Ajax Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)", animateTime:800
}) isc.IButton.create({
title:"Expand", click:"ajaxDefinition.animateResize(310,195);"
}) isc.IButton.create({
title:"Collapse", left:120, click:"ajaxDefinition.animateResize(75,45);"
})
</SCRIPT> </BODY> </HTML>
</source>
Image fade in and fade out
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
ID:"eyesImg", width:360, height:188, src:"http://www.wbex.ru/style/logo.png", showEdges:true, animateTime:1200
}) isc.IButton.create({
title:"Fade out", left:60, top:200, click:"eyesImg.animateFade(0)"
}) isc.IButton.create({
title:"Fade in", left:200, top:200, click:"eyesImg.animateFade(100)"
})
</SCRIPT> </BODY> </HTML>
</source>
Image zoom in and zoom out animation
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> var zoomedObject = null; isc.defineClass("ZoomImg", "Img").addProperties({
width:48, height:48, appImgDir: "pieces/48/", zoomTime: 1000, shrinkTime: 300, click: function () { // remember original position if (this.originalLeft==null) this.originalLeft = this.left; if (!zoomedObject) { // nothing expanded, so just expand this.zoom(); } else if (zoomedObject == this) { // already expanded, so just shrink this.shrink(); zoomedObject = null; } else { // another object is expanded; shrink it and then expand this object zoomedObject.shrink(this.getID()+".zoom()"); } }, zoom: function () { this.animateRect(25, 100, 200, 200, null, this.zoomTime); zoomedObject = this; }, shrink: function (postShrinkScript) { this.animateRect(this.originalLeft, 0, 48, 48, postShrinkScript, this.shrinkTime); }
}) isc.ZoomImg.create({left:0, src:"http://www.wbex.ru/style/logo.png"}) isc.ZoomImg.create({left:100, src:"http://www.wbex.ru/style/logo.png"}) isc.ZoomImg.create({left:200, src:"http://www.wbex.ru/style/logo.png"})
</SCRIPT> </BODY> </HTML>
</source>
SmartClient animation programming
<source lang="html4strict">
<HTML> <HEAD> <TITLE>SmartClient animation programming</TITLE>
<SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY bgcolor=tan><SCRIPT> // // SmartClient animation programming // // Demonstrates the following public methods for component animations: // // animateMove (left, top, callback, time, acceleration) // animateResize (width, height, callback, time, acceleration) // animateRect (left, top, width, height, callback, time, acceleration) // animateFade (opacity, callback, time, acceleration) // animateShow (slideIn, callback, time, acceleration) // animateHide (slideOut, callback, time, acceleration) // animateScroll (scrollLeft, scrollTop, callback, time, acceleration) // // // interval 20ms = 50fps isc.Animation.interval = 20; Canvas.create({
ID:"dest", overflow:"hidden", align:"center", showEdges:true, edgeSize:5, edgeImage:"[SKIN]/rounded/frame/FFFFFF/5.png", backgroundColor:"#FFFFA0", canDragReposition:true, dragRepositionStop:"this.sendToBack()", canDragResize:true, dragResizeStop:"this.sendToBack()", dragAppearance:"target", contents:"Destination (drag to move or resize)", left:400, top:200, width:200, height:200
}) Canvas.create({
ID:"anim", overflow:"hidden", border:"1px solid black", backgroundColor:"#A0FFA0", canDragReposition:true, canDragResize:true, dragAppearance:"target", smoothFade:true, contents:"1
2
3
Animated Object (drag to move or resize)
3
2
1", left:100, top:250, width:100, height:100
})
var numberStackHTML = "0";
for (i=1; i<100; i++) numberStackHTML += "
"+i;
HTMLPane.create({
ID:"scroller", showEdges:true, edgeSize:5, edgeImage:"[SKIN]/rounded/frame/FFFFFF/5.png", backgroundColor:"#D0D0FF", canDragReposition:true, canDragResize:true, dragAppearance:"target", contents:numberStackHTML, left:640, top:10, width:100, height:160
}) Slider.create({
ID:"timeSlider", left:20, top:0, width:550, vertical:false, value:1000, minValue:250, maxValue:4000, numValues:16, title:"Duration (ms)", animateThumb:true, animateThumbInit:true
}) Button.create({
left:260, top:150, title:"Reset", click: function () { anim.setRect(100,250,100,100); anim.setOpacity(100); anim.scrollTo(0,0); anim.show(); dest.setRect(400,200,200,200); scroller.setRect(640,10,100,160); scroller.scrollTo(0,0); }
}) Button.create({
left:20, top:80, title:"Move", click: function () {anim.animateMove( dest.getLeft(), dest.getTop(), null, timeSlider.getValue() )}
}) Button.create({
left:20, top:110, title:"Resize", click: function () {anim.animateResize( dest.getWidth(), dest.getHeight(), null, timeSlider.getValue() )}
}) Button.create({
left:140, top:80, title:"Move & Resize", click: function () {anim.animateRect( dest.getLeft(), dest.getTop(), dest.getWidth(), dest.getHeight(), null, timeSlider.getValue() )}
}) Button.create({
left:140, top:110, title:"Move, Resize", click: function () {anim.animateMove( dest.getLeft(), dest.getTop(), "anim.animateResize(dest.getWidth(),dest.getHeight(),null,timeSlider.getValue())", timeSlider.getValue() )}
}) Button.create({
left:260, top:80, title:"Fade out",
// click: function () {anim.animateFade(0, null, timeSlider.getValue())}
click: function () {anim.animateHide("fade", null, timeSlider.getValue())}
}) Button.create({
left:260, top:110, title:"Fade in",
// click: function () {anim.animateFade(100, null, timeSlider.getValue())}
click: function () {anim.animateShow("fade", null, timeSlider.getValue())}
}) Button.create({
left:380, top:80, title:"Slide out", click: function () {anim.animateHide("slide", null, timeSlider.getValue())}
}) Button.create({
left:380, top:110, title:"Slide in", click: function () {anim.animateShow("slide", null, timeSlider.getValue())}
}) Button.create({
left:500, top:80, title:"Wipe out", click: function () {anim.animateHide("wipe", null, timeSlider.getValue())}
}) Button.create({
left:500, top:110, title:"Wipe in", click: function () {anim.animateShow("wipe", null, timeSlider.getValue())}
}) Button.create({
left:760, top:50, title:"Scroll top", click: function () {scroller.animateScroll(0, 0, null, timeSlider.getValue())}
}) Button.create({
left:760, top:80, title:"Scroll middle", click: function () {scroller.animateScroll(0, (scroller.getScrollHeight()-scroller.getHeight())/2, null, timeSlider.getValue())}
}) Button.create({
left:760, top:110, title:"Scroll end", click: function () {scroller.animateScroll(0, scroller.getScrollBottom(), null, timeSlider.getValue())}
}) FormLayout.create({
left:150, top:550, width:300, backgroundColor:"white", border:"1px solid black", titlePrefix:"", titleSuffix:"", items:[ {name:"Acceleration", type:"radioGroup", valueMap:["smoothStart", "smoothEnd", "smoothStartEnd", "none", "custom"], defaultValue:"smoothEnd", change:function (form, item, value, oldValue) { if (value == "custom") { // custom acceleration function isc.Canvas.addProperties({ animateAcceleration:function(ratio) { return Math.pow(ratio, 6) } }); } else { // built-in acceleration functions isc.Canvas.addProperties({animateAcceleration:value}) } } } ]
})
</SCRIPT></BODY></HTML>
</source>
Wipe in and wipe out
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({
ID:"messageBox", left:35, top:50, width:150, styleName:"exampleTitle", align:"center", valign:"center", padding:10, showEdges:true, contents:"Vision is the
art of seeing the invisible.", backgroundColor:"#ffffd0", visibility:"hidden", animateTime:1200
}) isc.IButton.create({
title:"Show", click:"messageBox.animateShow("wipe")"
}) isc.IButton.create({
title:"Hide", left:120, click:"messageBox.animateHide("wipe")"
})
</SCRIPT> </BODY> </HTML>
</source>