html怎么做水流地图

html-css011

html怎么做水流地图,第1张

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>地图</title>

<style type="text/css">

html{height:100%}

body{height:100%margin:0pxpadding:0px}

#container{height:100%}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GbLBG0iSnUi7hvBVdWxAm0qCvK46SsFu">//2.0版本

</script>

</head>

<body>

<div id="container"></div>

<script type="text/javascript">

var map = new BMap.Map("container") // 创建地图实例

var point = new BMap.Point(119.3,26.08) // 创建点坐标

map.centerAndZoom(point, 15)// 初始化地图,设置中心点坐标和地图级别

var marker = new BMap.Marker(point) // 创建标注

map.addOverlay(marker)//将标注添加到地图中

var opts1 = {type: BMAP_NAVIGATION_CONTROL_LARGE}

map.addControl(new BMap.NavigationControl(opts1))

var opts2 = {offset: new BMap.Size(150, 5)}

map.addControl(new BMap.ScaleControl(opts2))

map.addControl(new BMap.OverviewMapControl())

map.addControl(new BMap.MapTypeControl())

map.setCurrentCity("福州")

</script>

</body>

把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了,具体的democan参见demo。

循环动画由几幅画面构成,要根据动作的循环规律确定。但是,只有三张以上的画面才能产生循环变化效果,两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况,就是反向循环。比如鞠躬的过程,可以只制作弯腰动作的画面,因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法,可以减轻工作量,大大提高工作效率。因此在动画制作中,要养成使用循环动画的习惯。

物体的变化,可以分解为连续重复而有规律的变化。因此在动画制作中,可以尽制作几幅画面,然后像走马灯一样重复循环使用,长时间播放,这就是循环动画。

动画中的常用方法:

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑,鸟飞翔,轮子的转动,机械运动以及有规律的曲线运动、圆周运动等等,都可以采用循环动画。

但事情总是一分为二的,循环动画的不足之处就是动作比较死板,缺少变化。为此,长时间的循环动画,应该进一步采用多套循环动画的方式进行处理。