Facebook-Rebound弹簧效果

在 Android 使用动画,除了属性动画比较好用,还有 Facebook-Rebound 的动画效果,今天就来通过几个小的动画效果来初步了解以下 Facebook-Rebound 。下面是效果图:

效果十分的酷炫,下面就来看一下如何实现的;上面一共有三个动画效果,下面就来分别看一下

Facebook-Rebound 官网:http://facebook.github.io/rebound/

GitHub 下载地址:https://github.com/wuqingsen/Facebook-Rebound

1.  Facebook-Rebound 第一种动画效果

在使用前~需要添加 Gradle :

compile 'com.facebook.rebound:rebound:0.3.8'
    //Facebook-Rebound
    private void One() {
        ViewGroup viewGroup = (ViewGroup) findViewById(R.id.chain_layout);
        viewGroup.setVisibility(View.VISIBLE);
        //创建SpringChain对象
        SpringChain springChain = SpringChain.create();
        //获取到子控件
        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) {
                    float value = (float) spring.getCurrentValue();
                    //只设置沿X轴
                    view.setTranslationX(value);
                }
            });
        }

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

        //setControlSpringIndex:从第几个子view开始
        springChain.setControlSpringIndex(0);
        //设置结束的位置,
        springChain.getControlSpring().setEndValue(0);
    }

代码中加入上面方法并调用方法即可;

2.  Facebook-Rebound 第二种动画效果:弹簧效果

    //Facebook-Rebound弹簧
    private void Two() {
        //创建SpringSystem对象
        SpringSystem springSystem = SpringSystem.create();
        //添加到弹簧系统
        Spring spring = springSystem.createSpring();
        spring.setCurrentValue(1.0f);
        //tension(拉力)值改成100(拉力值越小,晃动越慢),friction(摩擦力)值改成1(摩擦力越小,弹动大小越明显)
        spring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(100, 1));
        //与上面一样,回弹效果更明显,但速度慢
//        spring.setSpringConfig(new SpringConfig(100, 1));
        spring.addListener(new SimpleSpringListener() {
            @Override
            public void onSpringUpdate(Spring spring) {
                float value = (float) spring.getCurrentValue();
                float scale = 1f - (value * 0.5f);
                imageView.setScaleX(scale);
                imageView.setScaleY(scale);
            }
        });
        spring.setEndValue(0.1f);
    }

复制上面的方法并调用即可,上面的大部分属性在注释中已经写明白了,还有很多属性,我也并不是很懂,要深入探索~~

3. 属性动画实现弹簧的效果

在上面效果图中就可以看出,Facebook-Rebound 弹簧效果要比属性动画实现的效果要好多了,所以这里也不多说了,但属性动画还是比较常用的,想了解更多属性动画,可以看下面的链接:https://blog.csdn.net/wuqingsen1/article/details/82352567

    //属性动画
    private void Three() {
        /**
         * 五个参数:
         * 1.要放大/缩小的控件
         * 2.方向:scaleX为沿X轴缩放,scaleY为沿Y轴缩放
         * 3.开始的大小:1.0f为原图开始
         * 4.放大/缩小的倍数:1.5f为放大1.5倍
         * 5.结束的大小:1.0f为原图结束
         */
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 1.5f, 1f);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 1.5f, 1f);
        AnimatorSet set = new AnimatorSet();
        //动画持续时间
        set.setDuration(1000);
        //动画弹动的速度,越大越慢
        set.setInterpolator(new SpringScaleInterpolator(0.3f));
        //X轴和Y轴同时开始
        set.playTogether(animatorX, animatorY);
        //动画开始
        set.start();
    }

代码中加入上面方法并调用方法即可;

猜你喜欢

转载自blog.csdn.net/wuqingsen1/article/details/84635115