# aardio 范例: Lottie 动画演示



```aardio
//Lottie 动画
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
var winform = win.form(text="Lottie 动画演示";right=759;bottom=469;bgcolor=0xFFFFFF)
winform.add(
bnPause={cls="plus";text="播放";left=480;top=384;right=609;bottom=434;align="left";font=LOGFONT(h=-24);iconStyle={align="left";font=LOGFONT(h=-21;name='FontAwesome');padding={top=5}};iconText='\uF04B ';notify=1;textPadding={left=27};z=2};
static={cls="static";left=42;top=41;right=451;bottom=272;bgcolor=0xFFFFFF;z=1}
)
/*}}*/

import web.form;
var wb = web.form(winform.static);

//支持 IE10，IE11（Win10，Win11 自带）
wb.html = /**
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
    html,body{ height:100%; margin:0; overflow:hidden } 
    </style> 
    <script src="http://lib.baomitu.com/lottie-web/5.10.0/lottie.min.js"></script> 
</head>
<body>
<script>
	var lottieSample = lottie.loadAnimation({
  		container: document.body,
  		renderer: 'svg',
  		loop: true,
  		autoplay: true,
  		path: "http://download.aardio.com/demo/lottie/1.json" // the path to the animation json
	});
    </script>
</body>
</html>
**/

winform.bnPause.skin({
	color={
		active=0xFF00FF00;
		default=0xFF000000;
		disabled=0xEE666666;
		hover=0xFFFF0000
	};
	checked={
		iconText='\uF04C';
		text="暂停";
	}
})
winform.bnPause.checked = true;

winform.bnPause.oncommand = function(id,event){
	if(owner.checked) wb.script.lottieSample.play(); 
	else wb.script.lottieSample.pause(); 
}

winform.show();
win.loopMessage();
```

