手游动效之美(一)

69 篇文章 0 订阅
61 篇文章 0 订阅

        游戏中的动感交互效果在游戏中运用的越来越多,它好比繁星点缀夜空,给人以很舒服的感觉,动感的效果其实就是增加用户对于流畅和生动有趣效果的感知。

1.空间转换

空间动效是被设计师所普遍重视的一种特效,它的作用也是引导用户,让用户更好地能够理解页面跳转,知道自己在终端的位置。下图所示一则动效就是一个漂亮的转场动效,为了避免两个页面之间的跳转过于生硬,利用动效填补上了页面跳转的中间过程,使得体验更加流畅和自然。



2.模拟惯性

现实中物体的运动是有惯性的,比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面动效,图像在变化的末端都会“超出”一点再立即“反弹”回来,如此的处理方法使得整个动效充满活力,显得真实生动,其实任何的效果都来源于生活,谁说不是呢!



3.匀速变速

一个优秀的动效肯定不会是匀速运动的,那样会显得死板,更会使人产生烦躁不安的情绪。仔细观察现在机器人的动作,你就会有同感。要想让一个图像运动的有活力,就需要对其运动的速度进行“设计”。仔细观察下图2张图所示动效,虽然界面中不同元素的运动速度不尽相同,但其运动均遵循一定的原则,其中之一就是均匀变速,切记急会生乱!就是说界面元素在运动时的初始速度要为0,以匀加速开始运动,而在运动结束阶段往往是可以急停的。



做产品关注细节,希望与一同关注细节的产品同仁共勉!持续更新中!


  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个使用 Vue 实现雪花动效的示例代码: ```html <template> <div class="snowflake-container"> <div v-for="i in num" :key="i" class="snowflake" :style="styles[i]"></div> </div> </template> <script> export default { data() { return { num: 50, // 雪花数量 styles: [], // 雪花样式 }; }, mounted() { this.init(); }, methods: { init() { for (let i = 0; i < this.num; i++) { this.styles.push({ top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, animationDelay: `${Math.random() * 5}s`, animationDuration: `${Math.random() * 5 + 5}s`, }); } }, }, }; </script> <style> .snowflake-container { position: relative; width: 100%; height: 100%; overflow: hidden; } .snowflake { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: snowflake 10s linear infinite; } @keyframes snowflake { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } </style> ``` 上述代码使用了 Vue 的组件化思想,将雪花动效封装为一个组件。在 `data` 中定义了雪花数量和样式数组,在 `mounted` 生命周期中调用 `init` 方法初始化雪花样式。`init` 方法中使用 `Math.random()` 随机生成每个雪花的位置、延迟和持续时间,并将其添加到 `styles` 数组中。最后在模板中使用 `v-for` 循环渲染每个雪花,并将样式绑定到 `style` 属性中。 在样式中,雪花容器使用 `position: relative`,并设置了 `overflow: hidden`,以隐藏超出容器的部分。雪花使用 `position: absolute` 定位,并设置了圆形背景和动画效果动画使用 `@keyframes` 定义,并通过 `animation` 属性绑定到元素上,实现雪花从上到下飘落的效果。 需要注意的是,以上代码仅为简单示例,实际生产环境中需要考虑更多的兼容性和性能问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值