단, <animateTransform ... /> 은 사용 안한다.
|
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
> <head> <layout> <root-layout width="200" height="200" background-color="yellow" /> <region id="pic1" left="20" top="10" width="120" height="160" /> <region id="pic2" left="70" top="30" width="110" height="150" /> </layout> </head> <body> <par> <img src="june-1.jpg" id="img1" region="pic1" dur="8s" > <animate attributeName="top" from="-100" to="0" dur="4s"/> <animate attributeName="left" from="0" to="-100" dur="4s" begin="4s"/> </img> <img src="june-2.jpg" id="img2" region="pic2" dur="5s" begin="4s" > <animate attributeName="left" from="80" to="0" dur="4s"/> </img> </par> </body> </smil> |
|
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
> <head> <transition id="trans1" type="barWipe" dur="3s"/> <transition id="trans2" type="fade" fadeColor="yellow" dur="5s"/> <layout> <root-layout width="200" height="200" background-color="yellow" /> <region id="pic1" left="20" top="10" width="120" height="160" /> <region id="pic2" left="70" top="30" width="110" height="150" /> </layout> </head> <body> <seq> <img src="june-1.jpg" transIn="trans1" transOut="trans1" region="pic1" dur="5s"> <animate attributeName="top" from="-50" to="0" dur="4s"/> </img> <img src="june-2.jpg" fill="transition" transIn="trans2" region="pic2" dur="5s" /> </seq> </body> </smil> |
|
<transition id="fadein" type="fade" subtype="fadeFromColor" dur="2s" fadeColor="yellow" startProgress="0.2" endProgress="0.8" /> <transition id="fadeout" type="fade" subtype="fadeToColor" dur="2s" fadeColor="red" startProgress="0" endProgress="0.4" /> <transition id="starBegin" type="starWipe" subtype="fivePoint" dur="4s" /> <transition id="starReverse" type="starWipe" subtype="fivePoint" dur="4s" direction="reverse" /> |
|
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
> <head> <transition id="fadein" ... /> <transition id="fadeout" ... /> <transition id="starBegin" ... /> <transition id="starReverse" ... /> <layout> <root-layout width="200" height="200" background-color="yellow" /> <region id="pic1" left="40" top="20" width="140" height="160" /> <!-- region 하나만 설정 --> </layout> </head> <body> <seq> <img src="june-1.jpg" region="pic1" dur="6s" fill="transition" transIn="fadein" /> <img src="june-2.jpg" region="pic1" dur="6s" fill="transition" transIn="fadein" /> <img src="june-1.jpg" region="pic1" dur="8s" fill="transition" transIn="starBegin" transOut="fadeout" /> <img src="june-2.jpg" region="pic1" dur="8s" fill="transition" transIn="starReverse" transOut="fadeout" /> </seq> </body> </smil> |
|
Transition type |
Transition subtypes (first is the default subtype) |
| "barWipe" | "leftToRight", "topToBottom" |
| "boxWipe" | "topLeft", "topRight", "bottomRight", "bottomLeft", "topCenter", "rightCenter", "bottomCenter", "leftCenter" |
| "fourBoxWipe" | "cornersIn", "cornersOut" |
| "barnDoorWipe" | "vertical", "horizontal", "diagonalBottomLeft", "diagonalTopLeft" |
| "diagonalWipe" | "topLeft", "topRight" |
| "bowTieWipe" | "vertical", "horizontal" |
| "miscDiagonalWipe" | "doubleBarnDoor", "doubleDiamond" |
| "veeWipe" | "down", "left", "up", "right" |
| "barnVeeWipe" | "down", "left", "up", "right" |
| "zigZagWipe" | "leftToRight", "topToBottom" |
| "barnZigZagWipe" | "vertical", "horizontal" |
|
Transition type |
Transition subtypes |
| "irisWipe" | "rectangle", "diamond" |
| "triangleWipe" | "up", "right" , "down" , "left" |
| "arrowHeadWipe" | "up", "right" , "down" , "left" |
| "pentagonWipe" | "up", "down" |
| "hexagonWipe" | "horizontal", "vertical" |
| "ellipseWipe" | "circle", "horizontal" , "vertical" |
| "eyeWipe" | "horizontal", "vertical" |
| "roundRectWipe" | "horizontal", "vertical" |
| "starWipe" | "fourPoint", "fivePoint" , "sixPoint" |
| "miscShapeWipe" | "heart", "keyhole" |
|
Transition type |
Transition subtypes |
| "clockWipe" | "clockwiseTwelve" , "clockwiseThree" , "clockwiseSix" , "clockwiseNine" |
| "pinWheelWipe" | "twoBladeVertical" , "twoBladeHorizontal" , "fourBlade" |
| "singleSweepWipe" | "clockwiseTop", "clockwiseRight", "clockwiseBottom", "clockwiseLeft", "clockwiseTopLeft", "counterClockwiseBottomLeft", "clockwiseBottomRight", "counterClockwiseTopRight" |
| "fanWipe" | "centerTop" , "centerRight" , "top" , "right" , "bottom" , "left" |
| "doubleFanWipe" | "fanOutVertical" , "fanOutHorizontal" , "fanInVertical" , "fanInHorizontal" |
| "doubleSweepWipe" | "parallelVertical", "parallelDiagonal", "oppositeVertical", "opposite Horizontal", "parallelDiagonalTopLeft", "parallelDiagonalBottomLeft" |
| "saloonDoorWipe" | "top" , "left" , "bottom" , "right" |
| "windshieldWipe" | "right" , "up" , "vertical" , "horizontal" |
|
Transition type |
Transition subtypes |
| "snakeWipe" | "topLeftHorizontal", "topLeftVertical", "topLeftDiagonal", "topRightDiagonal", "bottomRightDiagonal" , "bottomLeftDiagonal" |
| "spiralWipe" | "topLeftClockwise", "topRightClockwise", "bottomRightClockwise", "bottom LeftClockwise", "topLeftCounterClockwise", "topRightCounterClockwise", "bottomRightCounterClockwise", "bottomLeftCounterClockwise" |
| "parallelSnakesWipe" | "verticalTopSame" , "verticalBottomSame" , "verticalTopLeftOpposite" , "verticalBottomLeftOpposite", "horizontalLeftSame", "horizontalRightSame", "horizontalTopLeftOpposite" , "horizontalTopRightOpposite" , "diagonalBottomLeftOpposite" , "diagonalTopLeftOpposite" |
| "boxSnakesWipe" | "twoBoxTop", "twoBoxBottom" , "twoBoxLeft" , "twoBoxRight" , "fourBoxVertical , "fourBoxHorizontal" |
| "waterfallWipe" | "verticalLeft" , "verticalRight" , "horizontalLeft" , "horizontalRight" |
|
Transition type |
Transition subtypes |
| "pushWipe" | "fromLeft" , "fromTop", "fromRight", "fromBottom" |
| "slideWipe" | "fromLeft" , "fromTop", "fromRight", "fromBottom" |
| "fade" | "crossfade" , "fadeToColor", "fadeFromColor" |