搜索
查看: 3901|回复: 1

[教程] CSSS! 变形动画函数 morph() 使用方法

[复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2012-7-2 11:38:38 | 显示全部楼层 |阅读模式

在CSSS!脚本中,使用 ltEle.start-animation() 启动动画以后,
在执行动画的 animation-step! 事件内,可选使用 morph() 函数来实现动画变形效果。

语法:
  1. morph("ease-function-name", start-value, end-value )
复制代码
ease-function-name 指定一种动画效果的名称,
而 每一种动画效果,都会从一个指定的CSS初始属性值  start-value 过渡变化到 en-value;

可选的 ease-function-name 有以下几种:
"bounce-in"
"bounce-out"
"bounce-in-out"

"back-in"
"back-out"
"back-in-out"

"elastic-in"
"elastic-out"
"elastic-in-out"

"circ-in"
"circ-out"
"circ-in-out"

"expo-in"
"expo-out"
"expo-in-out"

"sine-in"
"sine-out"
"sine-in-out"

"quint-in"
"quint-out"
"quint-in-out"

"quart-in"
"quart-out"
"quart-in-out"

"cubic-in"
"cubic-out"
"cubic-in-out"

"quad-in"
"quad-out"
"quad-in-out"

下面是一个简单的示例:



import win.ui;
/*DSG{{*/
winform = ..win.form( text=
"HTMLayout 变形动画函数 morph() 演示";bottom=399;parent=...;right=599;border="resizable" )
winform.add(
layoutWindow={ dr=1;dl=1;notify=1;right=580;left=10;dt=1;top=12;z=1;db=1;bottom=382;multiline=1;cls=
"edit" }
)
/*}}*/

import web.layout;
wbLayout = web.layout(winform.layoutWindow);

wbLayout.html =
/***
<div id="myDiv" >请用鼠标点击这里</div>  
***/


wbLayout.css =
/**
#myDiv{
  width:200px;
  border:1px solid #DDD;
  background:#EEE;
  margin:10px;
  padding:5px;
  font:system;
  
  //鼠标点击事件
  active-on!:
    self.start-animation( 0.4s )
  ;
  
  //动画事件
  animation-step!:
    self::height = morph("cubic-out" //指定动画函数名
      , self.min-intrinsic-height() //指定变形初始值
      , 300px //指定变形完成后的值
    )
  ;
}

**/


winform.show()
win.loopMessage();




回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-9-15 22:30:04 | 显示全部楼层

CSS 中的 transition 也能实现类似过渡效果,用法更简洁一些 参考: aardio范例->HTMLayout->界面预览工具->transiti

CSS 中的  transition 也能实现类似过渡效果,用法更简洁一些
参考: aardio范例->HTMLayout->界面预览工具->transition 分类。

一个简单例子

  1. {
  2.   width:100px;
  3.   height:100px;
  4. }
  5. div:hover
  6. {
  7.   width:200px;
  8.   height:200px;
  9.   transition: width(linear,400ms)
  10.               height(linear,400ms);
  11. }

复制代码
在 div:hover 状态中使用transition定义了变换效果,那么从其他状态切换到hover状态时将会应用该变换效果。

transition可以指定一个名多个值,多个值使用空格分格,每个值的格式如下:
CSS属性名( 状态变换函数,  动画持续时长, 动画间隔延时 )

CSS属性名( 渐入状态变换函数,  渐入动画持续时长, 渐入动画间隔延时,
        渐出状态变换函数,  渐出动画持续时长, 渐出动画间隔延时
)
       
CSS属性名( 渐入该状态变换函数, 渐入动画持续时长,渐入动画间隔延时,
        none
)
       
CSS属性名( none,
        渐出该状态变换函数, 渐出动画持续时长,渐出动画间隔延时
)
       
上面的间隔延时参数都可以省略,


下面是范例:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="transition 变换效果";right=599;bottom=399)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. var wbLayout = web.layout( winform )

  8. wbLayout.html = /**
  9. <html>
  10. <head>
  11.   <style>
  12.    
  13.     div.container
  14.     {
  15.       flow:horizontal-flow;
  16.       width:*;
  17.       height:*;
  18.     }
  19.     div.cell
  20.     {
  21.       width:*;
  22.       overflow:hidden;
  23.     }
  24.     div.cell:nth-child(4n)
  25.     {
  26.       clear:left; /* four in the row; */
  27.     }
  28.    
  29.     div.test
  30.     {
  31.       background-color: gold;
  32.       color: black;
  33.       width:100px;
  34.       padding:4px;
  35.       margin:4px;
  36.       white-space:nowrap;
  37.       overflow:hidden;
  38.       
  39.     }
  40.     div.test:hover
  41.     {
  42.       background-color: red;
  43.       width:200px;
  44.     }
  45.    
  46.     div.test:hover[ease="linear"]         { transition: width(linear,0.5s)      background-color(linear,0.5s,0.5s); }
  47.     div.test:hover[ease="quad-in"]        { transition: width(quad-in,0.5s)     background-color(quad-in,0.5s,0.5s); }
  48.     div.test:hover[ease="quad-out"]       { transition: width(quad-out,0.5s)    background-color(quad-out,0.5s,0.5s); }
  49.     div.test:hover[ease="quad-in-out"]    { transition: width(quad-in-out,0.5s) background-color(quad-in-out,0.5s,0.5s); }
  50.     div.test:hover[ease="cubic-in"]       { transition: width(cubic-in,0.5s)    background-color(cubic-in,0.5s,0.5s); }
  51.     div.test:hover[ease="cubic-out"]      { transition: width(cubic-out,0.5s)   background-color(cubic-out,0.5s,0.5s); }
  52.     div.test:hover[ease="cubic-in-out"]   { transition: width(cubic-in-out,0.5s)background-color(cubic-in-out,0.5s,0.5s); }
  53.     div.test:hover[ease="quart-in"]       { transition: width(quart-in,0.5s)    background-color(quart-in,0.5s,0.5s); }
  54.     div.test:hover[ease="quart-out"]      { transition: width(quart-out,0.5s) background-color(quart-out,0.5s,0.5s); }
  55.     div.test:hover[ease="quart-in-out"]   { transition: width(quart-in-out,0.5s) background-color(quart-in-out,0.5s,0.5s); }
  56.     div.test:hover[ease="quint-in"]       { transition: width(quint-in,0.5s) background-color(quint-in,0.5s,0.5s); }
  57.     div.test:hover[ease="quint-out"]      { transition: width(quint-out,0.5s) background-color(quint-out,0.5s,0.5s); }
  58.     div.test:hover[ease="quint-in-out"]   { transition: width(quint-in-out,0.5s) background-color(quint-in-out,0.5s,0.5s); }
  59.     div.test:hover[ease="sine-in"]        { transition: width(sine-in,0.5s) background-color(sine-in,0.5s,0.5s); }
  60.     div.test:hover[ease="sine-out"]       { transition: width(sine-out,0.5s) background-color(sine-out,0.5s,0.5s); }
  61.     div.test:hover[ease="sine-in-out"]    { transition: width(sine-in-out,0.5s) background-color(sine-in-out,0.5s,0.5s); }
  62.     div.test:hover[ease="expo-in"]        { transition: width(expo-in,0.5s) background-color(expo-in,0.5s,0.5s); }
  63.     div.test:hover[ease="expo-out"]       { transition: width(expo-out,0.5s) background-color(expo-out,0.5s,0.5s); }
  64.     div.test:hover[ease="expo-in-out"]    { transition: width(expo-in-out,0.5s) background-color(expo-in-out,0.5s,0.5s); }
  65.     div.test:hover[ease="circ-in"]        { transition: width(circ-in,0.5s) background-color(circ-in,0.5s,0.5s); }
  66.     div.test:hover[ease="circ-out"]       { transition: width(circ-out,0.5s) background-color(circ-out,0.5s,0.5s); }
  67.     div.test:hover[ease="circ-in-out"]    { transition: width(circ-in-out,0.5s) background-color(circ-in-out,0.5s,0.5s); }
  68.     div.test:hover[ease="elastic-in"]     { transition: width(elastic-in,0.5s) background-color(elastic-in,0.5s,0.5s); }
  69.     div.test:hover[ease="elastic-out"]    { transition: width(elastic-out,0.5s) background-color(elastic-out,0.5s,0.5s); }
  70.     div.test:hover[ease="elastic-in-out"] { transition: width(elastic-in-out,0.5s) background-color(elastic-in-out,0.5s,0.5s); }
  71.     div.test:hover[ease="back-in"]        { transition: width(back-in,0.5s) background-color(back-in,0.5s,0.5s); }
  72.     div.test:hover[ease="back-out"]       { transition: width(back-out,0.5s) background-color(back-out,0.5s,0.5s); }
  73.     div.test:hover[ease="back-in-out"]    { transition: width(back-in-out,0.5s) background-color(back-in-out,0.5s,0.5s); }
  74.     div.test:hover[ease="bounce-in"]      { transition: width(bounce-in,0.5s) background-color(bounce-in,0.5s,0.5s); }
  75.     div.test:hover[ease="bounce-out"]     { transition: width(bounce-out,0.5s) background-color(bounce-out,0.5s,0.5s); }
  76.     div.test:hover[ease="bounce-in-out"]  { transition: width(bounce-in-out ,0.5s) background-color(bounce-in-out ,0.5s,0.5s); }
  77.    
  78.   </style>  
  79. </head>
  80. <body>
  81.   <h1>transition 变换效果</h1>
  82.   <div .container>
  83.     <div .cell><div .test  ease="linear"        >linear</div></div>
  84.     <div .cell><div .test  ease="quad-in"       >quad-in</div></div>
  85.     <div .cell><div .test  ease="quad-out"      >quad-out</div></div>
  86.     <div .cell><div .test  ease="quad-in-out"   >quad-in-out</div></div>
  87.     <div .cell><div .test  ease="cubic-in"      >cubic-in</div></div>
  88.     <div .cell><div .test  ease="cubic-out"     >cubic-out</div></div>
  89.     <div .cell><div .test  ease="cubic-in-out"  >cubic-in-out</div></div>
  90.     <div .cell><div .test  ease="quart-in"      >quart-in</div></div>
  91.     <div .cell><div .test  ease="quart-out"     #test   >quart-out</div></div>
  92.     <div .cell><div .test  ease="quart-in-out"  >quart-in-out</div></div>
  93.     <div .cell><div .test  ease="quint-in"      >quint-in</div></div>
  94.     <div .cell><div .test  ease="quint-out"     >quint-out</div></div>
  95.     <div .cell><div .test  ease="quint-in-out"  >quint-in-out</div></div>
  96.     <div .cell><div .test  ease="sine-in"       >sine-in</div></div>
  97.     <div .cell><div .test  ease="sine-out"      >sine-out</div></div>
  98.     <div .cell><div .test  ease="sine-in-out"   >sine-in-out</div></div>
  99.     <div .cell><div .test  ease="expo-in"       >expo-in</div></div>
  100.     <div .cell><div .test  ease="expo-out"      >expo-out</div></div>
  101.     <div .cell><div .test  ease="expo-in-out"   >expo-in-out</div></div>
  102.     <div .cell><div .test  ease="circ-in"       >circ-in</div></div>
  103.     <div .cell><div .test  ease="circ-out"      >circ-out</div></div>
  104.     <div .cell><div .test  ease="circ-in-out"   >circ-in-out</div></div>
  105.     <div .cell><div .test  ease="elastic-in"    >elastic-in</div></div>
  106.     <div .cell><div .test  ease="elastic-out"   >elastic-out</div></div>
  107.     <div .cell><div .test  ease="elastic-in-out">elastic-in-out</div></div>
  108.     <div .cell><div .test  ease="back-in"       >back-in</div></div>
  109.     <div .cell><div .test  ease="back-out"      >back-out</div></div>
  110.     <div .cell><div .test  ease="back-in-out"   >back-in-out</div></div>
  111.     <div .cell><div .test  ease="bounce-in"     >bounce-in</div></div>
  112.     <div .cell><div .test  ease="bounce-out"    >bounce-out</div></div>
  113.     <div .cell><div .test  ease="bounce-in-out" >bounce-in-out </div></div>
  114.                                             
  115.   </div>

  116. </body>
  117. </html>
  118. **/

  119. winform.show()
  120. win.loopMessage();
复制代码
还可以使用 transition: blend; 用来实现渐入渐出的混合效果。
或者使用 transition:sound( in: url(sound1.wav) ,out: url(sound2.wav) ) 用来指定切换状态的音响效果,其中out部分可省略。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2020-11-24 19:55 , Processed in 0.046875 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表