人工智能简史

请长按/扫描下方二维码

了解AI简史

完整欣赏此案例大约需要2分钟

案例：AI简史

出品：人民日报

技术实现：Three.js + jQuery

亮点：

策划上，纵向长图滑动。案例以盘点大事件的形式，讲述了自1950年以来AI的进化以及发展。Loading完毕后，进入案例，向下滑动来观看案例，滑动到每个AI大事件的特定位置，会有动画自动播放来过渡。最后，可以关于人类与AI的未来写一句“未来寄语”并分享给好友，懒得写也可以直接三句预设中选一个，点击确定按钮提示分享，点击重置按钮重置寄语。

设计上，渐变色的背景，每个年份都有不同的配色主题，配合背景音乐，整体科技感十足。案例最亮眼的还是其动画效果，滑到特定位置时，屏幕上的元素会被打碎成无数个碎片并下落，镜头随碎片移动，碎片也会重新组合成新的元素。文案方面，也非常精炼，一句概括，没有多余的介绍或叙述，所以画面显得非常干净。右侧的时间尺随内容变化而变化，在显示年份的同时，也巧妙地给用户提示了整体进度，非常友好。

除此之外，案例中某些元素有3D属性，用户可以通过滑动来查看。

体验上，很赞的事件盘点型的案例，小五个人非常喜欢这样的动画效果。不过，炫酷的效果以及清晰的画面，往往会伴随着很长的loading时间，即使处在wifi环境下，小五也看了蛮久的loading，在电脑模拟器上打开亦是如此。其次，Loading完毕后的首屏，小五并没有看到任何的交互提示，相信有不少人也会在首屏愣一会儿。