基于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,如需转载请自行联系原作者


相关文章
|
5天前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
19 1
|
3月前
|
Java
3D炫酷赛车游戏【附源码】设计实现
3D炫酷赛车游戏【附源码】设计实现
45 10
|
9天前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
18天前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
32 7
|
4月前
|
前端开发
六边形酷科技特效源码
基于canvas画布绘制多个六边形跟随鼠标,科技感的几何图形酷炫动画特效,
26 0
六边形酷科技特效源码
|
9月前
|
机器学习/深度学习 算法 图形学
Unity小游戏——无限滚动的背景的改良
Unity小游戏——无限滚动的背景的改良
|
4月前
|
vr&ar 图形学
【Unity 3D】VR飞机起飞喷火游戏案例实战(附源码和演示视频 超详细)
【Unity 3D】VR飞机起飞喷火游戏案例实战(附源码和演示视频 超详细)
167 0
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
|
前端开发 JavaScript 程序员
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
332 0
|
前端开发 C#
silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发) 这章有点长,所以我分成了两章。这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲的是blend中工具的使用,利用哪些工具做出哪些效果。
1216 0
下一篇
云函数