首页 关于MONA 成功案例 服务范围 新闻中心 联系方式
QQ联系
电话联系
手机联系
QQ联系
电话联系
手机联系

网站设计中动态效果的应用

发布时间:2020-12-23 14:39
发布者:墨娜数字互动
浏览次数:
  网站设计中动态效果的应用
  
  在一般的业务开发环境下,是否所有的动态效果都是通过程序实现的,需要根据不同的情况来判断。一个小小的特效让前端日夜堆积代码,是一种性价比极低的方法。在很多情况下,对于不需要太多交互的动态效果,其实前端提供了一个画布区域。设计师可以通过逐帧动画设计来实现他们的效果,这将更有效地提高产品开发效率。这里有三种对每个人都有成本效益的方法:
网站设计中动态效果的应用
  
  1.PNG序列。
  
  最后,我们来看看PNG序列。对于游戏类可以预加载的web应用,如果开发时间短,可以使用PNG序列来展现应用想要呈现的效果,通过时间点和动态周期的细化,用户可以有非常流畅的交互体验。比如我们在拳击体感游戏“啪嗒”项目中尝试使用PNG序列实现一个体感游戏。用户可以通过手机连接电脑,通过手势控制进行战斗。具体的动态设计是通过Sprite图实现的。
  
  2.webM视频。
  
  与webM相比,它是一种视频格式,是一个可以控制播放的容器。其体积是GI的1/3,与响应式设计兼容。其优点是降低设计成本,与浏览器完全兼容,硬件要求低。尽量在B营销场景中插入动态背景视频。原视频367MB压缩到6.9MB的GIF,转换成1.8MB的webM。音量完全满足用户要求,图像丢失也可控。在产品领域的应用中,由于可控播放的优势,我们的产品未来可以360度展示。
  
  3.GIF动画。
  
  大家对GF图片的应用并不陌生。今天主要普及GIF的压缩技巧。我们在访问用户时,发现很多B级用户没有高速带宽,所以一定要考虑GIF的大小。就拿我们父亲节做的一个情绪化的小动作效果来说,没有PS压缩的67k。我们可以压缩帧速率,每两帧减去一帧。为了保持循环周期不变,每一帧的新时长需要设置为原时长的两倍,这样压缩后音量会降低到原时长的1/2,但相比效果感觉有点卡,效果不如原时长流畅。
  
  在这里,我们推荐另一种方法。平面动态效果设计可以适当压缩色彩和损失,删除循环中重复或非常相似的帧。删除某一帧后,需要替换加载时间,使循环周期不变,也能有效压缩GF体积。但是需要注意的是,颜色压缩只能用于动态效果,不能渐变。GIF的应用范围比较小,因为回放很难控制,所以基本用在不需要太多操作的区域,比如LOGO区域。
  
  这些都是我们网站无法比拟的。设计网页的动态效果,一定要考虑带宽。两种主流操作系统使用的最小时间单位是毫秒,所以我们的帧间隔单位是按照毫秒四舍五入的。