基于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 搜索推荐
UniApp TabBar的巅峰之作:个性化导航的魅力
UniApp TabBar的巅峰之作:个性化导航的魅力
119 0
|
3月前
|
vr&ar C# 图形学
【Unity 3D】VR飞机拆装后零件说明功能案例实战(附源码和演示视频 超详细)
【Unity 3D】VR飞机拆装后零件说明功能案例实战(附源码和演示视频 超详细)
25 0
|
3月前
|
vr&ar 图形学
【Unity 3D】VR飞机起飞喷火游戏案例实战(附源码和演示视频 超详细)
【Unity 3D】VR飞机起飞喷火游戏案例实战(附源码和演示视频 超详细)
16 0
|
3月前
|
机器学习/深度学习 算法 图形学
Unity小游戏——无限滚动的背景的改良
Unity小游戏——无限滚动的背景的改良
|
3月前
|
算法 图形学
Unity小游戏——武士击杀小怪兽(无限滚动的背景)
Unity小游戏——武士击杀小怪兽(无限滚动的背景)
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
|
前端开发
如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1159 0