动画交互应用——神秘力量

一 前言

图片来源公众号“住在疯人院”，链接：https://mp.weixin.qq.com/s?__biz=MzUxOTg4ODI4NA==&mid=2247487501&idx=1&sn=aea4f6f06e3115689bbeef039b6af7ea&chksm=f9f39cfece8415e8be76c5483ec1a826a49c75d0316b6418a81e831746de8323ea3c46b711e5&mpshare=1&scene=23&srcid=#rd

言归正传，下面要介绍的是一个名为“神秘力量”的动画交互系统，系统使用processing开发，旨在为用户提供细腻生动的交互体验。

//系统界面截图

二 应用背景

正如上述漫画所言，我们的生活似乎总是被一种“神秘力量”控制着，“神秘力量”支配着我们拿起手机，并悄悄偷走我们的时间。而本文要介绍的《神秘力量》讲述了这样一个故事:故事的主角“蛋蛋”总是在人们面前晃来晃去的，不管对它做什么，它最终都会回到属于它自己的状态，游离在大家面前。自然界的一切真实力量都无法控制它，任何人都无法摆脱它的存在。似乎有一种神秘的力量，把它拴在每一个人面前，任何人都摆脱不了。
故事中“蛋蛋”的生性顽固与神秘的力量，暗喻现实生活中人们意志力薄弱，不是对“神秘力量”束手无策，而是在诱惑面前束手就擒。

三 主要功能及用法

本应用共分为三个章节，分别模拟三种物理系统，用户通过鼠标操作控制主角“蛋蛋”在物理系统中运动，但“蛋蛋”最终都会回到它原本的运动状态（随机游走）。
应用具有隐喻生活中的诱惑的现实意义，通过简单而又逼真的物理系统模拟让用户获得细腻的交互体验，同时引发对现实的思考。

场景一——一根橡皮绳

第一章以一根橡皮绳为道具，模拟橡皮绳对物体的拉力作用。用户点击屏幕即可用橡皮绳牵动“蛋蛋”，拖拽鼠标可以通过橡皮绳控制其移动。“蛋蛋”碰到地面及左右墙壁都会反弹，最终在重力和阻力作用下停止跳动，回到自由游走的状态。

场景二——一个跷跷板

第二章的道具为一个跷跷板，模拟木板以不同速度上升时对物体的弹力作用。跷跷板初始状态为平衡状态，用户点击鼠标后“蛋蛋”移动到跷跷板的左端，此时用户长按鼠标可以给跷跷板右端加力，使“蛋蛋”被弹飞。用户按鼠标持续时间越长，跷跷板右端的力越大，“蛋蛋”就会被弹得越远。此章节中“蛋蛋”碰到地面及左右墙壁同时会被施加弹力，同时受到重力及空气阻力，最终回到自由游走状态。

场景三——一座滑滑梯

第三章的道具为一座滑梯，模拟物体从不同粗糙程度的滑梯上滑下的过程。用户点击鼠标可使“蛋蛋”移动到滑梯上端，此时长按鼠标可增加滑梯与“蛋蛋”之间的摩擦力，释放鼠标后“蛋蛋”滑下。用户按鼠标的时间越长，滑梯与“蛋蛋”之间的摩擦力就会越大，“蛋蛋”就会下滑得越慢。最终“蛋蛋”同样会在空气阻力的作用下回归自由游走状态。

此外，用户点击左右按钮进行三个场景之间的切换。三个场景之间无缝连接，场景的转换不会改变“蛋蛋”当前的运动状态。

四 应用创意

本应用的创意点主要体现在以下几个方面：

1 视觉独特的故事背景

本应用的故事背景看似无厘头，却是对现实生活中某个真实存在的一个侧面（很多人经受不住生活中的小诱惑）加以修饰与包装而成的。背景故事以奇特的切入点吸引用户兴趣，而整个故事又很好的融入进整个应用系统中，让玩家在获得交互体验的同时获得对生活的思考。

2 真实的物理系统模拟

本应用的三个章节分别模拟橡皮绳、跷跷板、滑梯三个物理系统，虽然简单，却力求达到最真实的模拟效果，给用户以最真实而又细腻的交互体验。

3 简单的画风及操作

本应用的三个章节总共只出现了主角“蛋蛋”、跷跷板和滑梯三个物体，且都由2D形状组合而成，结构简洁，画风简单明了。应用中的所有操作都可由鼠标完成，用户只需点击鼠标、长按鼠标、拖动鼠标便可获得细腻的交互体验和轻松的娱乐体验。

五 关键技术

1 随机游走

系统中角色在开始和用户操作结束后总是保持自由游走状态。其中“蛋蛋”游走的方向和在同一方向上持续的时间（路程）都是随机的，为了产生比较平滑的随机效果，这里用了Perlin噪声。首先设置了一个时间变量（t），每次“蛋蛋”位置改变后更新t的值，根据processing的库函数noise(t)获得一个随机量tempx，然后将tempx在整个屏幕上做位置映射，更新“蛋蛋”的位置。
具体代码如下：

float t;
void walk(){
   //随机游走
    float n = noise(t);
    float tempx=map(n,0,1,0,width);
    if(pos.x-tempx>=2)//防止瞬移
      pos.x--;
    if(tempx-pos.x>=2)
      pos.x++;
    if(mousePressed == false&&pos.y==height - 70*scale-landh&&abs(speed.y)<0.5&&abs(pos.x-tempx)<2){