introduction

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

具体效果,可以看看QQ空间 Android独立版客户端中,抽屉打开的icon效果,以及底部加号点开后的icon效果,是我当年在的时候做的。

usage

1
2
3
4
5
6
7
8
9
10
Spring spring = mSpringSystem
.createSpring()
.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(86, 7))
.addListener(new SimpleSpringListener() {
@Override
public void onSpringUpdate(Spring spring) {
float value = (float) spring.getCurrentValue();
ViewHelper.setTranslationX(view, value);
}
});

上面的短短代码就可以给一个view加上自然的从左向右进入回弹效果。

类似地

1
2
3
4
5
6
7
8
9
10
11
12
Spring spring = mSpringSystem
.createSpring()
.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(86, 7))
.addListener(new SimpleSpringListener() {
@Override
public void onSpringUpdate(Spring spring) {
float value = (float) spring.getCurrentValue();
float scale = 1f - value;
ViewHelper.setScaleX(mItemIconViewList.get(index), scale);
ViewHelper.setScaleY(mItemIconViewList.get(index), scale);
}
});

就可以给view加上一个从小变大然后略有回弹的效果。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
for (int i = 0; i < viewCount; i++) {
final View view = new View(context);
view.setLayoutParams(
new TableLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
1f));
mSpringChain.addSpring(new SimpleSpringListener() {
@Override
public void onSpringUpdate(Spring spring) {
float value = (float) spring.getCurrentValue();
view.setTranslationX(value);
}
});
int color = (Integer) evaluator.evaluate((float) i / (float) viewCount, startColor, endColor);
view.setBackgroundColor(color);
view.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return handleRowTouch(v, event);
}
});
mViews.add(view);
rootView.addView(view);
} getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
getViewTreeObserver().removeOnGlobalLayoutListener(this);
List<Spring> springs = mSpringChain.getAllSprings();
for (int i = 0; i < springs.size(); i++) {
springs.get(i).setCurrentValue(-mViews.get(i).getWidth());
}
postDelayed(new Runnable() {
@Override
public void run() {
mSpringChain
.setControlSpringIndex(0)
.getControlSpring()
.setEndValue(0);
}
}, 500);
}
});

就做出了一个view和view的牵引位移动画效果。

让动画不再僵硬:Facebook Rebound Android动画库介绍的更多相关文章

  1. Facebook Rebound 弹性动画库 源码分析

    Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的, ...

  2. rebound是facebook的开源动画库

    网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...

  3. 一个使用openGL渲染的炫丽Android动画库二(碎片化曲面动画)

    续一个使用openGL渲染的炫丽Android动画库 MagicSurfaceView v1.1.0发布, 新增碎片化曲面动画 地址:https://github.com/gplibs/android ...

  4. Animate.css_css3动画库介绍

    插件描述:Animate.css内置了很多典型的css3动画,兼容性好使用方便. Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animat ...

  5. 一个使用openGL渲染的炫丽Android动画库

    android-magic-surface-view 这是一个 android 动画特效库, 可以实现各种炫酷动画. github地址: https://github.com/gplibs/andro ...

  6. Facebook的Pop动画库相关资料

    https://github.com/facebook/pop http://www.cocoachina.com/industry/20140507/8339.html http://www.ui. ...

  7. 【轮子】发现一个效果丰富酷炫的Android动画库

    没有什么比发现一个好轮子更让人开心的了. 这个库分分钟提高交互体验 :AndroidViewAnimations 一张图说明一切 配置和使用也相当简单 GitHub地址

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

    由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动 ...

  9. Facebook开源动画库 POP-POPBasicAnimation运用

    动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...

随机推荐

  1. Checkbox 全选、反选

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></t ...

  2. linux中的常用命令

    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...

  3. 【原创】关于MVC自己新建的 action,Controller提示找不到页面的问题

    一.实例: 1.比如我自己新建了一个~/view/Shop  文件夹下的IndexShop.aspx,那么在Controllers文件夹下就要对应一个ShopController.cs的Control ...

  4. ZOJ 2411 Link Link Look(BFS)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1411 题目大意:连连看,给出每次连线的两个坐标,求能消去多少方块,拐 ...

  5. 374. Guess Number Higher or Lower

    We are playing the Guess Game. The game is as follows: 我们来玩一个游戏,规则如下: I pick a number from 1 to n. Y ...

  6. ubuntu12.04 U盘自动挂载配置

    Ubuntu12.04禁止U盘等设备的自动挂载方法如下: 在图形界面(字符界面无效)内进入系统终端,ctrl+alt+T或者gnome-terminal 禁止自动挂载:$ gsettings seto ...

  7. 跟我一起学Vim补全神级插件--YouCompleteMe

    最近重拾Vim,编译部署来补全插件YCM,这个插件的补全效果和在写C代码的时候的自动提示错误信息等还是十分棒的,写点心得下来,也算给自己做个备忘. 快速安装: 首先参考我的.vimrc配置,用Vund ...

  8. Linux C 程序 两变量值交换(FIVE)

    example:1.运算符: #include<stdio.h> int main(){ int a , b , c ,d ; a = ; b = a++;//先赋值给b,a再自增 c = ...

  9. Git 安装与使用(一)

    一.简介 1.集中式版本控制系统(CVS):Svn     * 版本库是集中存放在中央服务器中的,客户端需要先从中央服务器取得最新的版本,然后再干活,活干完后,再把自己的代码推送给中央服务器.    ...

  10. .NET研发人员面试题(一)

    1.简述javascript中的“=.==.===”的区别? =赋值 ==比较是否一般相等   "3"==3 //会做类型的隐式转换,true ===比较是否严格相等 " ...