使用 jQuery 创建动画卡通机器人

为什么？

除了作为一项有趣的练习之外，类似的东西有什么用途呢？没有明显的用途。它就像瓶中船一样无用。但它确实有潜在的用途。它可以激励人们超越网页设计师和开发人员的既定限制。

查看演示

 

概述

这个项目是通过将几个空的 div 叠加在一起，并使用透明的 PNG 作为背景图像创建的。

使用 Alexander Farkas 的 jQuery 插件以不同的速度对背景进行动画处理。此效果模拟了一种名为“视差效果”的伪 3D 动画背景，起源于老式的横向卷轴视频游戏。

机器人的组成方式与背景动画场景类似，通过将多个 DIV 叠加在一起创建不同的机器人部件。最后一步是使用一些 jQuery 对机器人进行动画处理。

标记

<div id="wrapper">
	
  <div id="cloud-01">
  <div id="cloud-02">
  <div id="mountains-03">	
  <div id="ground">
	
  <div id="full-robot">
    <div id="branding"><h1>Robot Head.</h1></div> 
    <div id="content"><p> Robot Chest.</p></div> 
    <div id="sec-content"><p> Robot Pelvis.</p></div> 
    <div id="footer"><p> Robot Legs.</p></div>
  </div>

  </div>
  </div>
  </div>
  </div>

</div>

div 的结构与我们的图表非常相似。没有一个 DIV 指定了 width 属性，因此它们将扩展以填充显示它们的任何浏览器窗口的大小。**注意：**构成背景场景视差效果的所有图像宽度均为 9999px。远远超过任何常用计算机显示器或电视的宽度。我们将使用 CSS 将背景图像准确地放置在每个特定 div 中我们想要的位置。

样式

此项目的 CSS 与标记一样简单。

h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         
                                                          
#cloud-02 {	background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding { 
	background: url(../images/robot-head.png) no-repeat center top;
	width: 271px;
	height: 253px;
	z-index: 4; 
	}

#content {
	background: url(../images/robot-torso.png) no-repeat center top;
	width: 271px;
	height: 164px;
	z-index: 3;
	margin-top: -65px;
	}

#sec-content {
	background: url(../images/robot-hips.png) no-repeat center top;
	width: 271px;
	height: 124px;
	z-index: 2;
	margin-top: -90px;
	}

#footer {
	background: url('../images/robot-legs.png') no-repeat center top;
	width: 271px;
	height: 244px;
	z-index: 1;
	margin-top: -90px;
	}

使用绝对定位将任何标题或段落文本拉到屏幕左侧 9999px。然后我们声明页面中的每个 DIV position: relative。通过将所有 DIV 设置为 position: relative;，我们现在可以使用 z-index 属性来反转机器人 DIV 的自然堆叠顺序。

jQuery JavaScript

免责声明：最初用于为机器人制作动画的脚本非常糟糕。编码机器人 的好人们很乐意清理并重写它。

$(document).ready(function(){ 
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

	$('#klicker').click(function(){
		$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
		$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
		$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
		$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);
	
	startHim();
	
	$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
	setTimeout("leaveScreen()",15000);
	});
		
});

var num = 1;

function startHim(){
	num++;
	$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
	$("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
	if(num<4){
		setTimeout("startHim()",300);
	} else {
		setTimeout("bounceHim()",300);
	}
}
	
function bounceHim(){
	$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
		$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
	setTimeout("bounceHim()",300);
}
	
function leaveScreen(){
	$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}

我们首先重新确认所有图像的原始背景位置。

点击 **‘#klicker’** div 时，一个函数告诉 jQuery 将背景从其当前位置动画到为每个 div 指定的坐标。通过将所有不同的图像层分成不同的 DIV，我们可以以不同的速度对背景元素进行动画处理。以不同的速度移动元素会产生 3D 的错觉。我们移动背景中的元素的速度比前景中的元素慢得多。请注意，在此动画中，背景中云的速度比山的速度慢。而山比地面慢，地面是所有元素中最快的。最后，在发出所有这些命令以使背景移动后，**‘#klicker’** 函数调用 **‘startHim()’** 函数。

**‘startHim()’** 函数，你猜对了，启动了我们的机器人。它开始他的小跳跃，并让他移动到 #wrapper div 的中心。**‘startHim()’** 函数调用 **‘bounceHim()’** 函数。然后它继续循环。

我们需要使机器人看起来像是正在崎岖的沙漠道路上弹跳。为了达到这种不规则的弹跳效果，我们将使用 **‘bounceHim()’** 函数。它定位单独的机器人 DIV 并将其“弹跳”5px 向上，然后 5px 向下。但这还不够，所有不同的机器人部件以相同的速率弹跳看起来太僵硬了。我们需要使其看起来更随机且更有趣。因此，我们将获取构成机器人胸部的 div，并以与头部和骨盆部件不同的速率移动它。我们将胸部部分“弹跳”8px 向上和 8px 向下。这使机器人产生了很好的不规则弹跳效果。

**‘leaveScreen()’** 函数是最后调用的函数。15 秒（15000）后，它将机器人向屏幕左侧移动 100%，从而使机器人移到屏幕右侧。

Anthony Calzadilla 是一位来自美国佛罗里达州迈阿密的独立网页设计师。

Chris 的说明

我认为这是一个非常酷的实验。我想说，对于大多数用户而言，最终结果与 Flash 没有区别。然而，与 Flash 相比，它的优势是巨大的。动画的每个部分都是独立的，并且可以轻松地更改/替换。可以通过 JavaScript 文件本身中的数字来调整动画样式，而不是必须更改原始 Flash 文档并重新导出/上传全新的版本。