基于Rebound制造绚丽的动画效果-入门篇

简介:

Rebound是什么?

Rebound是一个来自 Facebook 公司的 Java物理和动画库。Rebound spring 模型可用于创建动画,让你感觉很自然。

Rebound的运作原理是什么?

Rebound拥有两个参数:tensionfriction

  • tension是张力,拉力。
  • friction是摩擦力。

演示:

  • tension:50,friction:1

    rebound_t50_f1.gif

拉力为50时,摩擦为1。摩擦对拉力的损耗十分小,可以看出图片是经历了弹簧式的来回放大缩小,直到拉力耗尽到停止。同理,当摩擦力为0的时候,力不会被损耗,将会一直运动下去。

  • tension:50,friction:15

    rebound_t50_f15.gif

拉力为50时,摩擦为15。我们模拟将图片缩小到最小,在某一个瞬间释放。会看到摩擦对拉力的损耗十分大,甚至没有回弹。

代码编写

MainActivity关键代码

/**
 * 弹簧动画
 *
 * @param v        动画View
 * @param from     开始参数
 * @param to       结束参数
 * @param tension 拉力系数 * @param friction 摩擦力系数 */ private void animateViewDirection(final View v, float from, float to, int tension, int friction) { //从弹簧系统创建一个弹簧 Spring spring = springSystem.createSpring(); //设置弹簧的开始参数 spring.setCurrentValue(from); //查看源码可知 //public static SpringConfig defaultConfig = fromOrigamiTensionAndFriction(40.0D, 7.0D); //弹簧的默认拉力是40,摩擦是7。这里设置为我们seekBar选择的拉力和摩擦参数 spring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(tension, friction)); //给弹簧添加监听,动态设置控件的状态 spring.addListener(new SimpleSpringListener() { @Override public void onSpringUpdate(Spring spring) { //设置图片的X,Y的缩放 //还可以设置setAlpha,setTranslationX...综合形成复杂的动画 v.setScaleX((float) spring.getCurrentValue()); v.setScaleY((float) spring.getCurrentValue()); } }); //设置结束时图片的参数 spring.setEndValue(to); }

Demo展示


rebound_demo.gif

然而你们觉得


image

看看github大牛用rebound做的动画


rebound_demo_2.gif

Rebound只是一个简单的物理模型,最终想法和效果由我们自己控制

参考资料

Github:Rebound Github
官网:Rebound

源码下载

coding公开项目地址:https://git.coding.net/fanming/rebound-demo.git


    本文转自 一点点征服   博客园博客,原文链接:http://www.cnblogs.com/ldq2016/p/7079822.html,如需转载请自行联系原作者


相关文章
|
7月前
|
编解码 前端开发 JavaScript
|
3月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
69 11
|
3月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
93 9
|
4月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
4月前
|
前端开发
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
|
4月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
116 0
|
4月前
|
图形学 C# 开发者
Unity粒子系统全解析:从基础设置到高级编程技巧,教你轻松玩转绚丽多彩的视觉特效,打造震撼游戏画面的终极指南
【8月更文挑战第31天】粒子系统是Unity引擎的强大功能,可创建动态视觉效果,如火焰、爆炸等。本文介绍如何在Unity中使用粒子系统,并提供示例代码。首先创建粒子系统,然后调整Emission、Shape、Color over Lifetime等模块参数,实现所需效果。此外,还可通过C#脚本实现更复杂的粒子效果,增强游戏视觉冲击力和沉浸感。
270 0
|
3月前
|
图形学 开发者
【独家揭秘】Unity游戏开发秘籍:从基础到进阶,掌握材质与纹理的艺术,打造超现实游戏视效的全过程剖析——案例教你如何让每一面墙都会“说话”
【8月更文挑战第31天】Unity 是全球领先的跨平台游戏开发引擎,以其高效性能和丰富的工具集著称,尤其在提升游戏视觉效果方面表现突出。本文通过具体案例分析,介绍如何利用 Unity 中的材质与纹理技术打造逼真且具艺术感的游戏世界。材质定义物体表面属性,如颜色、光滑度等;纹理则用于模拟真实细节。结合使用两者可显著增强场景真实感。以 FPS 游戏为例,通过调整材质参数和编写脚本动态改变属性,可实现自然视觉效果。此外,Unity 还提供了多种高级技术和优化方法供开发者探索。
58 0
|
6月前
|
编解码 前端开发 JavaScript
响应式Web设计:适应所有屏幕的艺术与科学
【6月更文挑战第11天】响应式Web设计是适应各种屏幕尺寸和分辨率的网站设计方法,利用CSS3媒体查询、流动布局、弹性图片和JavaScript等技术实现。其原则包括灵活性、可用性和可访问性。最佳实践包括优先考虑移动设备体验、简化布局、优化资源、多设备测试和遵循Web可访问性标准。随着设备多样化,响应式设计成为现代Web设计的关键趋势。
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果

热门文章

最新文章