Rebound-Android的弹簧动画库

简介

官方网站

github

Rebound是facebook出品的一个弹簧动画库,与之对应的iOS版本有一个pop动画库,也是非常的强大给力。Facebook真是互联网企业中的楷模,开源了很多的实用开源库,大赞一个!!!

讲解Rebound之前,先看看我们根据Rebound高仿的新浪微博弹出菜单,看效果图:

话说回来,facebook为啥推出这个库呢?主要就是现有的动画离真实物理世界差别比较明显,为了让动画看起来真实自然,带有力量的效果,Rebound应运而生。两个比较重要的参数,一个是拉力Tension,一个是摩擦力Friction,拉力越大,弹簧效果越明显;摩擦力越大,弹框效果阻力越大、越不明显。如果这个摩擦力的值设置为0,就像真实世界中处于真空状态,一点摩擦力都没有,这个弹簧效果会一直无限制重复下去,根本停不下来,不信看效果图:

我们把摩擦力的值改成1试试:

初级用法

Rebound提供了非常简洁的api方法来供我们调用,我们只需要配置一些简单的参数就可以使用了,下面看看官网给出的例子:

// Create a system to run the physics loop for a set of springs.
SpringSystem springSystem = SpringSystem.create();

// Add a spring to the system.
Spring spring = springSystem.createSpring();

// Add a listener to observe the motion of the spring.
spring.addListener(new SimpleSpringListener() {

  @Override
  public void onSpringUpdate(Spring spring) {
    // You can observe the updates in the spring
    // state by asking its current value in onSpringUpdate.
    float value = (float) spring.getCurrentValue();
    float scale = 1f - (value * 0.5f);
    myView.setScaleX(scale);
    myView.setScaleY(scale);
  }
});

// Set the spring in motion; moving from 0 to 1
spring.setEndValue(1);

我们看下对应的效果图:

你们发现,好像弹簧效果不明显,Rebound默认的拉力和摩擦力参数分别是40和7,我们看下Rebound里面有个defaultConfig

public static SpringConfig defaultConfig = SpringConfig.fromOrigamiTensionAndFriction(40, 7);

为了让弹簧效果更明显,我们修改下SpringConfig的值,代码如下:

spring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(100,1));

我们将拉力值改成100,摩擦力值改成1,效果图如下:

效果很赞了吧!

高级用法:多个view连锁动画

如果想要做很多view的连锁动画怎么办?Rebound也提供了SpringChain这个接口。直接看代码吧:

SpringChain springChain = SpringChain.create(40,6,50,7);

int childCount = viewGroup.getChildCount();
for (int i = 0; i < childCount; i++) {
    final View view = viewGroup.getChildAt(i);

    springChain.addSpring(new SimpleSpringListener() {
        @Override
        public void onSpringUpdate(Spring spring) {
            view.setTranslationY((float) spring.getCurrentValue());
        }
    });
}

List<Spring> springs = springChain.getAllSprings();
for (int i = 0; i < springs.size(); i++) {
    springs.get(i).setCurrentValue(400);
}

springChain.setControlSpringIndex(2).getControlSpring().setEndValue(0);

效果图如下:

我们来看看SpringChain这个类,创建它有两个create方法:

  1. 默认无参数create()
  2. 有参数的create(int mainTension,int mainFriction,int attachmentTension,int attachmentFriction)

其中带参数的第一个参数表示起主导作用spring的拉力系数,第二个参数表示起主导作用Spring的摩擦力系数,第三个和第四个表示附属的拉力和摩擦力系数

SpringChain需要设置一个起主导控制作用的Spring,通过setControlSpringIndex方法来设置

高仿新浪弹出菜单

先看下高仿后的效果图:

这里给出示例代码:

PopMenu popMenu = new PopMenu.Builder().attachToActivity(MainActivity.this)
                .addMenuItem(new PopMenuItem("文字", getResources().getDrawable(R.drawable.tabbar_compose_idea)))
                .addMenuItem(new PopMenuItem("照片/视频", getResources().getDrawable(R.drawable.tabbar_compose_photo)))
                .addMenuItem(new PopMenuItem("头条文章", getResources().getDrawable(R.drawable.tabbar_compose_headlines)))
                .addMenuItem(new PopMenuItem("签到", getResources().getDrawable(R.drawable.tabbar_compose_lbs)))
                .addMenuItem(new PopMenuItem("点评", getResources().getDrawable(R.drawable.tabbar_compose_review)))
                .addMenuItem(new PopMenuItem("更多", getResources().getDrawable(R.drawable.tabbar_compose_more)))
                .setOnItemClickListener(new PopMenuItemListener() {
                    @Override
                    public void onItemClick(PopMenu popMenu, int position) {
                        Toast.makeText(MainActivity.this, "你点击了第" + position + "个位置", Toast.LENGTH_SHORT).show();
                    }
                })
                .build();
popMenu.show();

这里由于篇幅原因,就暂时先不讲解实现原理了,如需要看源码去我的github上下载,下载地址为:高仿新浪弹出菜单

时间: 2024-10-12 04:25:14

Rebound-Android的弹簧动画库的相关文章

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

introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reboundRebound是facebook推出的一个弹性动画库,可以让动画看起来真实自然,像真实世界的物理运动,带有力的效果,使用的参数则是facebook的origami中使用的.官网上有一个简单的JS版本来做demo,如果说到evernote.LinkedIn.flow等应用也在使用这个动画库,是

Facebook Rebound 弹性动画库 源码分析

Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的,这里提供一个demo apk. 今天看到了tumblr发布了基于rebound的Backboard,本想直接分析一下Backboard对rebound做了些什么,不过考虑到rebound还没有仔细分析过,所以这里做一下源码分析. 对外部来说,首先接触的就是SpringSystem了,但在说它之前,先

Android的Activity切换动画特效库SwitchLayout,视图切换动画库,媲美IOS

由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动画的Android视图切换动画特效库!SwitchLayout!可以说是目前Android上第一个,也是唯一的一个强大的视图切换动画库引擎! 作者:谭东 QQ:852041173 项目开源!推荐使用jar包形式! 没有经过作者允许,不可修改项目库源码自行发布. 如果你的项目中使用了SwtichLay

打造简易NineoldAndroids动画库,深入理解Android动画原理

简介 NineoldAndroids是Github上一个著名的动画库,简单来说,NineOldAndroids是一个向下兼容的动画库,主要是使低于API 11的系统也能够使用View的属性动画. 网上已经有一些文章,介绍了这个库的设计,包括类结构和思想,例如 NineOldAnimations 源码解析 NineoldAndroids动画库源码分析 上面两篇文章都比较详细的介绍了NineoldAndroids的源码,可以说为大家看源码带来很大的方便. 那为什么我还要写这篇文章呢? 我们来看Nin

Facebook开源动画库 POP-POPBasicAnimation运用

动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest POP默认支持三种动画 但同时也支持自定义动画 POPBasicAnimation //基本动画 POPSpringAnimation //类似弹簧一般的动画效果 POPDecayAnimation //过阻尼效

NineoldAndroids动画库源码分析

简介 做Android开发的同学很多都知道或者使用过一个动画库,那就是NineOldAndroids,它的作者及其牛X,好几个著名的开源库都是他的作品,具体大家可以看他的JakeWharton.简单来说,NineOldAndroids是一个向下兼容的动画库,主要是使低于API 11的系统也能够使用View的属性动画.以下是个其官网的简述 : Android library for using the Honeycomb (Android 3.0) animation API on all ver

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Learning Three.js - Tween.js for Smooth Animation tween.js 用户指南tween.js u

前端能力模型-动画类型及动画库的介绍

一.背景: 合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥. 二.动画技术分类: 按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解. 1)JS动画 通过一个定时器setInterval间隔来改变元素样式,动画结束时clearInterval即可.(早期类库:jquery.prototype.mootools) 优缺点: 优点:可控性很强,兼容性较好

Velocity.js动画库使用

1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2.兼容性 可兼容到 IE8 和 Android 2.3. 若需要兼容 IE8,就必须引入 jQuery 1.x 3.示例代码(注意文件引用路径) (1)index.html <!DOCTYPE html> <html lang="zh"> <head>