有一些任务与动画的图形有关. 首先,我们的团队需要将机器人的图像替换为新的机器人的图像. 我们拍摄了Botvac™Connected的宣传媒体图片,这张照片是从与前一个机器人相同的角度拍摄的,并掩盖了图像, 使背景透明. 我们还对背景进行了修改, 由不同类型的表面组成, 为了更好地展示机器人是如何在它们上面导航的. 最后, 我们想展示这个新产品最令人印象深刻的部分——智能手机应用程序集成.
因为机器人可以通过应用程序远程清洁, 我们想添加一个动画,显示某人通过按下应用程序中的一个按钮开始清理. 我们将手指触摸智能手机屏幕的视频与手指触摸屏幕时发生变化的应用程序的图像结合起来. 为了显示它,我们创建了一个由视频帧组成的图像精灵. 当用户开始滚动时,动画被触发. 一旦智能手机的新动画激活完成, 页面动画本质上和更新之前运行的一样.
我们在D系列机器人中使用的动画已经完成了大部分的开发工作. 然而, 随着关键帧动画的添加, 我们的团队需要让精灵中的帧看起来像一个视频,并触发动画的其余部分. 我们的开发团队使用Javascript和CSS添加了这个新场景,并做了一些小的调整,使其与新机器人的图像一致.