Hello, Guo and shameless to code hydrological, the year will come, and be other people’s program monkey year-end brush screen (year-end bonus and I have a Context relationship (Blue ಠ beneficial ಠ) Blue’s ring and loot added). So, today let’s talk about something interesting. < ~ ~ / : “soft” popup menu, broken. That’s right, that’s how short the opening credits are today, because they’re also short.

Here I get out of here. github.com/CarGuo/Anim…

Wait a minute. My second pop up is clickable

rebound

Amway Facebook’s open-source spring animation library simulates the effects of a physical spring, making straight men feel soft and product managers no longer need to worry about being interactive tough (✿◡‿◡).

Put it in the ball and put it in the ball. Put it in the ball. Put it in the ball and put it in the ball. The greater the Tension, the greater the elastic effect, very logical is it (~ o ~); The greater the Friction, the greater the resistance, the elastic effect will be reduced. What pays attention here is, although elasticity is good, but friction force is also necessary yo, had learned physics you should know, without friction force, can’t stop at all, friction force is too big, again enter not ·· pooh-pooh, again elasticity is not good.

Using the default F and T coefficients, create a Spring to animate your animation by setting the start/end coefficients, using getCurrentValue while listening, and setting the desired move/enlarge/transparency effects, etc. Does it feel like ValueAnimation? It’s easy to use.

If you are interested, go to download the official rebound demo. If you find the official rebound demo does not work, you can try my revised demo: github.com/CarGuo/rebo…

// 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.5 f); myView.setScaleX(scale); myView.setScaleY(scale); }});// Set the spring in motion; moving from 0 to 1
spring.setEndValue(1);Copy the code

Animation pop-up box

To get down to business:

1. First we define a layout with four circular tabs that look like the image below. And then set them all to GONE.

2. Create a Spring to perform animations.

  • So here we’re usingSpringChainFrom left to right are the main tension, the main friction, the auxiliary tension, the auxiliary friction.
  • According to the number of tabs, we add each View to the queue via springchain-addspring, and set the corresponding listener.
  • SetCurrentValue sets the initialization start value to the height of the parent layout, so that each item pops up from the bottom of the screen.
  • springChain.setControlSpringIndex(0).getControlSpring().setEndValue(0); The setting is dominated by the first TAB, and the final terminating data is 0, where it was before.
  • Convert the position and size of the TAB using getCurrentValue in onSpringUpdate.

Look at the bottom, the top of the pile of nonsense, the idiot said so much, wow, the code is so simple (^o^)/, do you feel proud to stand on the shoulders of giants. Retracting the animation is just turning the popover over, no problem.

SpringChain springChain = SpringChain.create(40.6.50.7);

for (int i = 0; i < list.size(); i++) {

    final View view = list.get(i);

    springChain.addSpring(new SimpleSpringListener() {
        @Override
        public void onSpringActivate(Spring spring) {
            super.onSpringActivate(spring);
            view.setVisibility(VISIBLE);
        }

        @Override
        public void onSpringUpdate(Spring spring) {
            view.setTranslationY((float) spring.getCurrentValue());
            float scale = (1 + 2 * (float) spring.getCurrentValue() / mainView.getHeight()); view.setScaleX(scale); view.setScaleY(scale); }}); } List<Spring> springs = springChain.getAllSprings();for (int i = 0; i < springs.size(); i++) {
    springs.get(i).setCurrentValue(mainView.getHeight());
}

springChain.setControlSpringIndex(0).getControlSpring().setEndValue(0);Copy the code

Finally, we extra to a side dish, since the pop-up \ pack up have effect, then “touch” up to have effect, here we refer to the weibo menu, when the click to perform the final animation effect.

This is much simpler. We use the AnimationSet of the system to zoom in on the TAB and transparently animate it, zoom in and transparently animate all other tabs, and hide the TAB when the animation ends. (. Blue is not so short ah, all said short.

AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0 f.2.0 f.1.0 f.2.0 f,
        Animation.RELATIVE_TO_SELF, 0.5 f, Animation.RELATIVE_TO_SELF, 0.5 f);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0 f.0.0 f);

animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(alphaAnimation);

animationSet.setInterpolator(new AccelerateInterpolator());
animationSet.setDuration(200);
animationSet.setFillAfter(false);

animationSet.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {}@Override
    public void onAnimationEnd(Animation animation) {
        view.setVisibility(GONE);
        ButtonClickLogin(view);

    }

    @Override
    public void onAnimationRepeat(Animation animation) {}}); view.startAnimation(animationSet);Copy the code

One last word

The two words.

Chou finished!