SmartClient animation programming
<!-- Isomorphic SmartClient Copyright(c) 1998 and beyond Isomorphic Software, Inc. "SmartClient" is a trademark of Isomorphic Software, Inc. All rights reserved. Open Source License SmartClient source code, located under the source/ directory, and the resulting assembled modules in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are licensed under the terms of the GNU Lesser General Public License, version 3. The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html If your project precludes the use of this license, or if you'd like to support SmartClient LGPL, we encourage you to buy a commercial license. Icon Experience Collection Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection (http://www.iconexperience.com) and may be freely used with any SmartClient components without charge, but may not be used as part of screen designs separate from SmartClient components without a purchase of a license from Icon Experience. We are working to replace these icons as soon as possible. All other media found under the isomorphic/skins directory may be used under the LGPLv3. Commercial Licenses A number of commercial licenses are available for purchase. Please see http://smartclient.com/license. Warranty Disclaimer This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. --> <!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).--> <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:"<b>Destination</b> (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<br>2<br>3<br><b>Animated Object</b> (drag to move or resize)<br>3<br>2<br>1", left:100, top:250, width:100, height:100 }) var numberStackHTML = "0"; for (i=1; i<100; i++) numberStackHTML += "<br>"+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:"<b>Reset</b>", 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:"<b>", titleSuffix:"</b>", 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> Related examples in the same category
