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

Posted 一点点征服

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于Rebound制造绚丽的动画效果-入门篇相关的知识,希望对你有一定的参考价值。

基于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









以上是关于基于Rebound制造绚丽的动画效果-入门篇的主要内容,如果未能解决你的问题,请参考以下文章

Rebound动画框架简单介绍

让动画不再僵硬:Facebook Rebound Android动画库介绍

让动画不再僵硬:Facebook Rebound Android动画库介绍

15 个超绚丽的 HTML5 时钟动画

WPF绚丽仪表盘动画

Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing