JavaScript DHTML/SmartClient/Animation

Материал из Web эксперт
Версия от 07:27, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Animation: minimize window

 
<!--
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.ru) 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.ru/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>
  <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: <span style="color:lightgreen;font-weight:bold">Normal</span>",
    canDragReposition: true,
    animateMinimize: true,
    items: [
        isc.HTMLFlow.create({
            padding:5,
            width: "100%",
            height: "100%",
            contents: "Staging: <span style="color:green;font-weight:bold">Normal</span><br>"+
                      "Production: <span style="color:green;font-weight:bold">Normal</span><br>"+
                      "Development: <span style="color:green;font-weight:bold">Normal</span><br>"
        })
    ]
});
</SCRIPT>
</BODY>
</HTML>



Animation: Move in and move out

 
<!--
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.ru) 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.ru/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>
  <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>



Animation: Show and hide

 
<!--
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.ru) 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.ru/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>
  <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>



Animation: slide in and slide out

 
<!--
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.ru) 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.ru/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>
  <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<br>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>



Animation: Zoom in and zoom out

 
<!--
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.ru) 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.ru/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>
  <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>



Control the animation sequence

 
<!--
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.ru) 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.ru/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>
  <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:"<span class="exampleDropTitle">Ajax&nbsp;&nbsp;</span> <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML (AJAX) is a Web development technique for creating interactive <b>web applications</b>. 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 <b>interactivity</b>, <b>speed</b>, and <b>usability</b>. (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>



Customized animation path: animateOrbit, animateOrbitStep

 
<!--
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.ru) 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.ru/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>
  <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>



Expand and resize animation

 
<!--
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.ru) 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.ru/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>
  <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:"<span class="exampleDropTitle">Ajax&nbsp;&nbsp;</span> <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML (AJAX) is a Web development technique for creating interactive <b>web applications</b>. 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 <b>interactivity</b>, <b>speed</b>, and <b>usability</b>. (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>



Image fade in and fade out

 
<!--
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.ru) 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.ru/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>
  <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>



Image zoom in and zoom out animation

 
<!--
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.ru) 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.ru/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>
  <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>



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.ru) 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.ru/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 &amp; 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>



Wipe in and wipe out

 
<!--
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.ru) 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.ru/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>
  <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<br>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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/Animation&oldid=3773»