Konva.js--矩形案例

效果图如下:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 移动端必须加上这句 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title></title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #f0f0f0;
			overflow: hidden;
		}
	</style>
	<script src="bower_components/konva/konva.min.js"></script>
</head>
<body>
	<div id="container">
	</div>
	<script type="text/javascript">
		var stage=new Konva.Stage({
			container:'container',
			width:window.innerWidth,
			height:window.innerHeight
		})
		//创建层
		var layer=new Konva.Layer();
		stage.add(layer);
		//中心坐标
		var centX=stage.width()/2;
		var centY=stage.height()/2;

		var x=1/8*stage.width();
		var y=centY;
		var height=1/12*stage.height();
		var maxWidth=3/4*stage.width();
		//绘制进度条
		var innerRect=new Konva.Rect({
			x:x,
			y:y,
			width:100,
			height:height,
			opacity:.7,
			fill:'lightblue',
			cornerRadius:height/3
		});
		//把矩形放入层中
		layer.add(innerRect);

		//外部边框
		var outRect=new Konva.Rect({
			x:x,
			y:y,
			width:maxWidth,
			height:height,
			stroke:'blue',
			strokeWidth:'4',
			cornerRadius:height/3

		})
		//把矩形放入层中
		layer.add(outRect);
		layer.draw();

		//Konva的动画状态
		innerRect.to({
			width:maxWidth,//动画最终的长度
			duration:1.4,//动画持续时间
			easing:Konva.Easings.StrongEaseIn//动画效果
		})


	</script>
</body>
</html>

动画效果的列项:

    * Konva.Easings.Linear            //线性
    * Konva.Easings.EaseIn            //缓动,先慢后快
    * Konva.Easings.EaseOut //先快后慢
    * Konva.Easings.EaseInOut //两头慢,中间快
    * Konva.Easings.BackEaseIn //往回来一点,然后往前冲,汽车启动类似...
    * Konva.Easings.BackEaseOut
    * Konva.Easings.BackEaseInOut 
    * Konva.Easings.ElasticEaseIn  //橡皮筋 英 [ɪ'læstɪk]   美 [ɪ'læstɪk] 
    * Konva.Easings.ElasticEaseOut 
    * Konva.Easings.ElasticEaseInOut 
    * Konva.Easings.BounceEaseIn   //弹跳;弹起,反跳;弹回  英 [baʊns]   美 [baʊns]
    * Konva.Easings.BounceEaseOut 
    * Konva.Easings.BounceEaseInOut 
    * Konva.Easings.StrongEaseIn //强力
    * Konva.Easings.StrongEaseOut 
    * Konva.Easings.StrongEaseInOut 




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值