Android project Development to teach you to achieve Periscope point praise effect _android

Now the video application more and more fire, Periscope fire up, the domestic also appeared a lot of followers, the interface is almost the same as Periscope. Periscope is really good, the effect of the praise is also a bright, very beautiful, so, I think of their own realization.

The final effect figure is as follows:

Final effect diagram. gif

The recording effect is not very good, the mobile phone is still pretty good to run.
Not exactly the same, but that's about it,!~.

Practice:
What will you learn through this article?

• Some basic methods of customizing view and some points of attention
• The use of random numbers
• Use of the interpolation device
• Advanced usage of Property animations
• The implementation and application of Bezier curve in Android
  

OK, if interested, then follow me to see how this effect is achieved!

Take a closer look at the details of what this effect contains.
1, Love appears at the bottom and horizontally centered
2, love the color/type of random
3, love into the time there is a zoom animation
4, after zooming, start speed shift up, and accompanied by alpha gradient effect
5, the path of love movement is smooth, is a curve
OK, let's go through one of us to achieve it.

1. The first step, the bottom, the horizontal center
I believe it's easy to think about using relativelayout, right, so let's first define a class called Favorlayout, inherit from Relativelayout, overload the constructor, and define some variables.

public class Favorlayout extends relativelayout{private Random Random = new Random ();//To implement the random function private int dheight; Love the height of the private int dwidth;//love width private int mheight;//favorlayout height private int mwidth;//favorlayout width public Fav
  Orlayout (context) {super (context);
 Public Favorlayout (context, AttributeSet attrs) {Super (context, attrs);
In order to display the area, I set up a background color, random setbackgroundcolor (Getresources (). GetColor (r.color.bg));
Init () to do some initialization of the variable Operation init (); }//overriding onmeasure Get control width high @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onm
    Easure (Widthmeasurespec, Heightmeasurespec); Attention!!
    To obtain the width of its own need to be measured only after the width of high mwidth = Getmeasuredwidth ();
  Mheight = Getmeasuredheight ();

    }///defined to achieve the bottom, horizontal center://define a Layoutparams use it to control the location of the Child View private Layoutparams LP;
    Bottom and horizontally centered LP = new Layoutparams (dwidth, dheight); Lp.addrule (Center_horizontal, TRUE); The true note here is not true Lp.addrule (Align_parent_boTtom, TRUE);

 OK, then just give the child view settings Layoutparams can be implemented

2. Then realize the second step, random love
to implement random numbers on Android you can use the random class, where I've only prepared 3 different kinds of love to see how the code is implemented:

First, define 3 drawable that represent different kinds of love, and their and drawables
  private drawable red;
  Private drawable yellow;
  Private drawable Blue;
  Private drawable[] Drawables;

    Next we Initialize:
    //Initialize the displayed picture
    drawables = new Drawable[3];
    Red = Getresources (). getdrawable (r.mipmap.red);
    Yellow = Getresources (). getdrawable (R.mipmap.yellow);
    Blue = Getresources (). getdrawable (R.mipmap.blue);
    Assigning value to Drawables
    drawables[0]=red;
    Drawables[1]=yellow;
    Drawables[2]=blue;

In this way, the next time you take the value of the following code, you can get a random love:

Drawables[random.nextint (3)]//represents 0-2 random number, note that 3 is not to be taken, is an open interval

3. Okay, random love issues, then let's do zoom animation bar ~
when it comes to Android animations, we used to use animation, which usually meets our needs, but it's weak and not very useful. Fortunately 3.0 after the emergence of powerful property animations, Making animations easy to implement on Android. If you don't know how to use a property animation, get to know it!
(previously in EoE posted a post, very basic, objectanimator use, interested can look, in advance, it was written a long time ago!)

Nonsense do not say, then how to do it, look at the code:

I encapsulate a method that uses Objectanimator Animatorset to implement the zoom function of alpha and x,y axes
//target is love
private Animatorset Getenteranimtor (final View target) {

    Objectanimator alpha = objectanimator.offloat (Target,view.alpha, 0.2f, 1f);
    Objectanimator ScaleX = Objectanimator.offloat (target,view.scale_x, 0.2f, 1f);
    Objectanimator ScaleY = Objectanimator.offloat (target,view.scale_y, 0.2f, 1f);
    Animatorset Enter = new Animatorset ();
    Enter.setduration ();
    Enter.setinterpolator (New Linearinterpolator ());
    Enter.playtogether (Alpha,scalex, ScaleY);
    Enter.settarget (target);
    return enter;
  }

OK, zoom function has been added, the first stage is completed, we look at the effect bar:

I forgot to say that we set the Click event on the outside button and provided an external method call:

Mbtnstartanim.setonclicklistener (New View.onclicklistener () {
      @Override public
      void OnClick (View v) {
        Mfavorlayout.addfavor ();
      }
    );

public void Addfavor () {

    ImageView ImageView = new ImageView (GetContext ());
    Randomly select a
    imageview.setimagedrawable (Drawables[random.nextint (3)]);
    Set Bottom Horizontal Center
    imageview.setlayoutparams (LP);

    AddView (ImageView);
    LOG.V (TAG, "Add after child view number:" +getchildcount ());

    Animator set = Getenteranimtor (ImageView);
    Set.start ();

}

OK, this can be run to see the effect, you can see that the color of love is random, and also has a zoom animation.

To this, the simple function we have finished, then the next is the big head.

4. Realize Bezier Curve effect
How do we get love to move along the curve? and random?

OK, then it is the protagonist of this article Bezier Curve debut moment, this is my realization this effect learned the most important knowledge.

I'm looking at this article to learn about Bezier curves, recommend it.
In short, it is a given number of points to calculate a curve. (It's so complicated I can't read it)

After a simple understanding of Bezier curves, we found that the three-time Bezier curve meets our requirements
Formula:

Formula. png

Get the formula, don't worry first, let's think about it, and clarify what its parameters are:
The formula requires four p,p0, is our starting point, P3 is the end, P1,P2 is the way of the two points
And T is one of our factors, the value range is 0-1, familiar with animation students should understand, 0-1, the role of animation is how important!!! So see this, really laugh ~ ~

Because I need to implement Bezier myself, I think of the typeevaluator in the attribute animation, which is what we need.

Okay, next, let's do it.

We customize a Bezierevaluator implementation typeevaluator//Because our view moves need to control X y so just pass in the pointf as a parameter, is not the feeling fully fit?? public class Bezierevaluator implements typeevaluator<pointf> {Private PointF pointf1;//approach two points private point
  F pointF2;
    Public Bezierevaluator (PointF pointf1,pointf pointF2) {this.pointf1 = pointF1;
  THIS.POINTF2 = pointF2;  @Override Public PointF Evaluate (float time, PointF startvalue, PointF endvalue) {float timeleft
    = 1.0f-time;
    PointF point = new PointF ()//result PointF point0 = (PointF) startvalue;//start PointF Point3 = (PointF) endvalue;//Endpoint Surrogate Formula Point.x = Timeleft * Timeleft * timeleft * (point0.x) + 3 * timeleft * timeleft * time * (pointf1.x

    ) + 3 * timeleft * time * [pointf2.x] + time * time * (point3.x);  Point.y = timeleft * Timeleft * timeleft * (POINT0.Y) + 3 * timeleft * timeleft * time * (POINTF1.Y) + 3 * Timeleft * Time * (POINTF2.Y) + TiMe * Time * (POINT3.Y);
  return point;

 }
}

By this step, we can get a Bezier curve as soon as we pass in two ponitf. Next we define a way to get a Bezier animation in Favorlayout:

 private valueanimator Getbeziervalueanimator (View target) {//Initialize a bezierevaluator

    Bezierevaluator evaluator = new Bezierevaluator (getpointf (2), getpointf (1)); It's best to draw a picture here. Valueanimator Animator = Valueanimator.ofobject (evaluator,new PointF (mwidth-dwidth)/2,mheig
    Ht-dheight), New PointF (Random.nextint (GetWidth ()), 0);//Random Animator.addupdatelistener (new Bezierlistenr (target));
    Animator.settarget (target);
    Animator.setduration (3000);
  return animator; ///Here is another method: getpointf (), this is the two points I used to get the path here the value can be adjusted at will, adjust to the way you want to look good/** * Get the middle of the two points * @param scale * * privat
    e PointF getpointf (int scale) {PointF PointF = new PointF (); pointf.x = Random.nextint ((mWidth-100));//minus 100 is to control the X axis activity range, see the effect at random ~ ~ and then the Y axis to ensure that the second point above the first point, I divide y into the upper and lower half so that the animation effect is better
    Other methods can be used to POINTF.Y = Random.nextint ((mHeight-100))/scale;
  return PointF; }

You must have noticed. I added a monitor to the animation, only in the callback using the value of the calculation, can really do curve movement, otherwise no effect OH:

Private class Bezierlistenr implements Valueanimator.animatorupdatelistener {

    private View target;

    Public Bezierlistenr (View target) {
      this.target = target;
    }
    @Override public
    void Onanimationupdate (Valueanimator animation) {
      //here Gets the value of the X Y value computed by the Bezier curve to the view So that love can go with the curve
      PointF PointF = (PointF) animation.getanimatedvalue ();
      Target.setx (pointf.x);
      Target.sety (POINTF.Y);
      Here to steal a lazy, by the way to do an alpha animation, so that the alpha gradient is also complete
      target.setalpha (1-animation.getanimatedfraction ());
    }
  

Ok, this method is finished, let's test how it works!
By the way, we need to revise the Addfavor method.

public void Addfavor () {

    ImageView ImageView = new ImageView (GetContext ());
    Randomly select a
    imageview.setimagedrawable (Drawables[random.nextint (3)]);
    IMAGEVIEW.SETLAYOUTPARAMS (LP);
    AddView (ImageView);
    LOG.V (TAG, "Add after child view number:" +getchildcount ());
    Getbeziervalueanimator (ImageView). Start ();
  

OK, click here to see the effect!!!

Bézier effect diagram. gif

It's not bad???

Scaling effect we did, and the curve worked.
Then connect them together!! ~

5. Closure, Final effect
5.1 to achieve variable speed

I chose several kinds of interpolation for the speed-changing effect. Private Interpolator line = new Linearinterpolator ();/linear private Interpolator acc = new Acceler Ateinterpolator ()//accelerate private interpolator DCE = new Decelerateinterpolator ()/deceleration private interpolator Accdec = new

Acceleratedecelerateinterpolator ()////first acceleration, deceleration//initialization private interpolator[in Init interpolators;
    The final Init method is as long as this: private void init () {//initializing the displayed picture Drawables = new Drawable[3];
    Red = Getresources (). getdrawable (r.mipmap.red);
    Yellow = Getresources (). getdrawable (R.mipmap.yellow);

    Blue = Getresources (). getdrawable (R.mipmap.blue);
    drawables[0]=red;
    Drawables[1]=yellow;
    Drawables[2]=blue;
    Gets the width of the graph for the following calculation//note I have 3 pictures of the same size, so I only took a dheight = Red.getintrinsicheight ();

    Dwidth = Red.getintrinsicwidth ();
    Bottom and horizontally centered LP = new Layoutparams (dwidth, dheight);

    Lp.addrule (Center_horizontal, true);//Here's true to note that not true Lp.addrule (Align_parent_bottom, true); Initialize the interpolators of the interpolation device = new Interpolator[4];
    Interpolators[0] = line;
    INTERPOLATORS[1] = ACC;
    INTERPOLATORS[2] = DCE;

  INTERPOLATORS[3] = Accdec;

 }

5.2 Merge The first two kinds of animation, make final animation

Private animator Getanimator (View target) {
    Animatorset set = Getenteranimtor (target);

    Valueanimator beziervalueanimator = Getbeziervalueanimator (target);

    Animatorset finalset = new Animatorset ();
    Finalset.playsequentially (set);
    Finalset.playsequentially (set, beziervalueanimator);
    Finalset.setinterpolator (Interpolators[random.nextint (4)]);//Achieve Random speed
    finalset.settarget (target);
    return finalset;
  }

5.3 Last modified Addfavor method:

public void Addfavor () {

    ImageView ImageView = new ImageView (GetContext ());
    Randomly select a
    imageview.setimagedrawable (Drawables[random.nextint (3)]);
    IMAGEVIEW.SETLAYOUTPARAMS (LP);

    AddView (ImageView);
    LOG.V (TAG, "Add after child view number:" +getchildcount ());

    Animator set = Getanimator (ImageView);
    Set.addlistener (New Animendlistener (ImageView));
    Set.start ();

  }

While modifying the Addfavor method I added a listener to remove the love after the animation is over, otherwise, the child view only increases!!!!

Private class Animendlistener extends Animatorlisteneradapter {
    private View target;

    Public Animendlistener (View target) {
      this.target = target;
    }
    @Override public
    void Onanimationend (animator animation) {
      super.onanimationend (animation);
      Because constant add causes the number of child view to only increase, so remove
      Removeview ((target) After the view animation is finished;
      LOG.V (TAG, "Removeview after view number:" +getchildcount ());
    }
  

The above is to achieve the periscope point of the whole process of praise effect, very detailed, I hope that the study of everyone help, we can do a hands-on, apply to their own projects.