设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

Web页面设计中的动画运用技巧

2014-9-1 16:20| 发布者: joejoe0332| 查看: 3497| 评论: 0|原作者: techug.com|来自: techug.com

摘要: 随着软硬件技术的发展,界面动画在我们的日常生活中随处可见。桌面软件、移动应用、云服务此刻回顾四周我相信你一定能发现他们。


  我们来分析一下呼吸函数。


  为什么看起来呼吸局促呢?请各位看官现在试试深呼吸,体会一下。你会发现在我们的在吸气的阶段,很快会就达到肺撑满的状态,然后吐气的阶段可以持续很久。大体上比例分布是这样的。


 


  融合入三角函数,将起始的渐增与收尾的减缓引入。感谢Don同学提供了一个完整的函数。


  这个函数的周期为6,峰值出现在2。整个变化起始与收尾都是渐变过渡。



让界面动画更自然


k=1/3,t=6, n={1,2,3,…}


大家感受一下


  之前我利用了些业余时间,在Arduino硬件上试了一下。大家可以看一下视频。我以为渐显、渐隐的动画的是这个样的:



简单三角函数的呼吸灯


  其实应该是这样的:



使用呼吸函数的呼吸灯


其他

  除了在动画变化过程中对客观规律的描述外,对于用户场景的还原也能增加自然感。


  比如这个站点的checkbox。我们在日常生活中,面对纸质的选项,我们会选择涂抹的方式来进行选择。



  或者这样删除



  更多效果,可以访问动态checkbox


写在最后的小工具

  如果使用 Mac 的小伙伴,Apple 提供了一个绘制函数图像的利器 Grapher。本文的函数均由此工具绘制。感兴趣的同学可以尝试用一下。


  本文最初发表在isux.tencent.com,文章内容属作者个人观点,不代表本站立场。


转自 http://www.techug.com/animation-factor


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部