仿Periscope，映客用贝塞尔曲线实现点赞送爱心。

因为项目需要，开始研究动画。这是为了实现直播平台的点赞功能特效而做的，参阅了很多资料，大家想看 一些关于安卓的高机动画内容可以去关注一下他的[刘某人]http://http://my.csdn.net/qq_26787115的博客，相信会有一些收获的。

 首先我们来看一下效果：（因为自己还不太熟gif动态录制工具，就先拿的别人的效果图过来了）

首先我们要知道什么是贝塞尔曲线。告诉你们一个方法贝塞尔曲线

现在我们开始正题

首先我们想要去规划爱心的轨迹，我们需要通过贝塞尔曲线公式来进行一个计算！

 

 BezierEvaluator.java

  在这里面我们可以通过修改pointF1,pointF2等参数来修改我们的爱心运行时候的轨迹

package com.lgl.heartfaom;import android.animation.TypeEvaluator;import android.graphics.PointF;import android.util.Log;public class BezierEvaluator implements TypeEvaluator<PointF> {private PointF pointF1;private PointF pointF2;public BezierEvaluator(PointF pointF1, PointF pointF2) {this.pointF1 = pointF1;this.pointF2 = pointF2;}  //公式：B(t)=P(0)(1-t)^3+3P(1)t（1-t）*（1-t）@Override//求开始到结束时候的平滑过度的值//pointF1.y 运行曲线的高度public PointF evaluate(float time, PointF startValue, PointF endValue) {float timeLeft = 1.0f - time;PointF point = new PointF();// 结果//  float p0=startValue.x;//  float p1=pointF1.x;//  point.x=p0+(p1-p0)*timeLeft;  point.x = timeLeft * timeLeft * timeLeft * (startValue.x) + 3* timeLeft * timeLeft * time * (pointF1.x+450) + 3 * timeLeft* time * time * (pointF2.x) + time * time * time * (endValue.x);System.out.println("startValue.x"+startValue.x+"pointF1.x"+pointF1.x+"pointF2.x的值"+pointF2.x+"point.x的值"+point.x+"endValue.x"+endValue.x);      point.y = timeLeft * timeLeft * timeLeft * (startValue.y) + 3* timeLeft * timeLeft * time * (pointF1.y) + 3 * timeLeft* time * time * (pointF2.y) + time * time * time * (endValue.y);System.out.println("stratvalue.y的值" +startValue.y+"pointF1.y的值"+pointF1.y+"pointF2.y的值"+pointF2.y+"endValue.y的值"+endValue.y);return point;}}

<strong>下面这个PeriscopeLayout.java才是真正的大头</strong>

<div>package com.lgl.heartfaom;</div><div></div><div>import java.util.Random;</div><div></div><div>import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.AnimatorSet;import android.animation.ObjectAnimator;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.PointF;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.util.Log;import android.view.View;</div><div></div><div>import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.view.animation.LinearInterpolator;import android.widget.ImageView;import android.widget.RelativeLayout;</div><div></div><div>public class PeriscopeLayout extends RelativeLayout {</div><div></div><div>// private Interpolator line = new LinearInterpolator();// 线性// private Interpolator acc = new AccelerateInterpolator();// 加速// private Interpolator dce = new DecelerateInterpolator();// 减速// private Interpolator accdec = new AccelerateDecelerateInterpolator();// 先加速后减速// private Interpolator[] interpolators;  /**缩小动画**/    Animation mLitteAnimation = null;   Context content; private int mHeight;//整个布局的高度 private int mWidth;//整个布局的宽度 private LayoutParams lp; private Drawable[] drawables; private Random random = new Random(); private int dHeight;//爱心的高度 private int dWidth;//爱心的宽度   //content 上下文  //AttributeSet 属性集 //defStyleAttr 预设样式属性集 //defStyleRes 预设样式资源属性集 public PeriscopeLayout(Context context) {  super(context);   init(); } public PeriscopeLayout(Context context, AttributeSet attrs) {  super(context, attrs);  init(); } public PeriscopeLayout(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  init(); }  public PeriscopeLayout(Context context, AttributeSet attrs,   int defStyleAttr, int defStyleRes) {  super(context, attrs, defStyleAttr);  init(); }private void init() {  // 初始化显示的图片  drawables = new Drawable[3];  Drawable red = getResources().getDrawable(R.drawable.pl_red);  Drawable yellow = getResources().getDrawable(R.drawable.pl_yellow);  Drawable blue = getResources().getDrawable(R.drawable.pl_blue);  drawables[0] = red;  drawables[1] = yellow;  drawables[2] = blue;  // 获取图的宽高 用于后面的计算  // 注意 我这里3张图片的大小都是一样的,所以我只取了一个  dHeight = red.getIntrinsicHeight()/5*3;  dWidth = red.getIntrinsicWidth()/5*3;  // 底部 并且 水平居中  lp = new LayoutParams(dWidth, dHeight); //rightMargin设置爱心离父布局相对边缘的位置，可以通过这个属性来自由调节图片的位置  lp.rightMargin=80;  //center_Horizontal,allgn_parent_right  //lp.addRule(CENTER_IN_PARENT,TRUE);// 这里的TRUE 要注意 不是true     lp.addRule(ALIGN_PARENT_RIGHT, TRUE);       lp.addRule(ALIGN_PARENT_BOTTOM, TRUE);  // 初始化插补器//  interpolators = new Interpolator[4];//  interpolators[0] = line;//  interpolators[3] = acc;//  interpolators[1] = dce;//  interpolators[2] = accdec; }</div><div></div><div> @Override //获取view的宽，高。 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  mWidth = getMeasuredWidth();  mHeight = getMeasuredHeight();  super.onMeasure(widthMeasureSpec, heightMeasureSpec);//  mWidth = getMeasuredWidth();//  mHeight = getMeasuredHeight(); }  //添加心跳图片，在此处添加等级对应的图片资源 public  void addHeart() { //缩小动画  mLitteAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.scalelitte);  //动画  // 随机选一个    ImageView imageView = new ImageView(getContext());    imageView.startAnimation(mLitteAnimation);            imageView.setImageDrawable(drawables[random.nextInt(1)]);            imageView.setLayoutParams(lp);              //缩小  addView(imageView);  Animator set = getAnimator(imageView);  set.addListener(new AnimEndListener(imageView));  set.start(); }  //获得动画器 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)]);  /*Random.nextint() 和Math.random()的区别                    前者生成的随机数效率高于后者,时间上前者大约是后者50%到80%的时间.                     造成这个原因如下:          Math.random()是Random.nextDouble（）的一个内部方法.          Random.nextDouble（）使用Random.next（）两次，均匀的分布范围为0到1 - （2 ^ -53）.          Random.nextInt（n）的使用Random.next（）不多于两次, 返回值范围为0到n - 1的分布         ****         *nextInt(4)将产生0,1,2,3这4个数字中的任何一个数字，注意这里不是0-4，而是0-3。                         但下限总是零，不能更改   *    * */     finalSet.setTarget(target);  return finalSet; }  //字面上的意思 获取进入的动画器 private AnimatorSet getEnterAnimtor(final View target) {  //关于这边的内容 可以去 参考 郭大神的博客  //http://blog.csdn.net/guolin_blog/article/details/43816093       //大概意思是获取一个float类型数值的动画（target：是对象，假如我们是textview的动画，我们就传入其对象名字）  //View.ALPHA 是我们用到的动画  //0.2f，lf 跟我们动画的透明值。  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();  //这里要设置成0，不然的话在右上角也会出现一个爱心  enter.setDuration(0);  enter.setInterpolator(new LinearInterpolator());  enter.playTogether(alpha, scaleX, scaleY);  enter.setTarget(target);  return enter; } /*  *   *   * */ private ValueAnimator getBezierValueAnimator(View target) {</div><div></div><div>  // 初始化一个贝塞尔计算器- - 传入  BezierEvaluator evaluator = new BezierEvaluator(getPointF(2),    getPointF(1));</div><div></div><div>  // 这里最好画个图 理解一下 传入了起点 和 终点  //mHeight - dHeight-200  //mWidth - dWidth) / 7*6 代表的心跳的起点位置在靠右边占整个屏幕的七分之六  ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(    (mWidth - dWidth) / 7*6, mHeight - dHeight-200),    new PointF((mWidth - dWidth) / 7*6, getMeasuredHeight()/2));  animator.addUpdateListener(new BezierListenr(target));  animator.setTarget(target);  //设置心跳动画的持续时间  animator.setDuration(4000);  return animator; }</div><div></div><div> /**  * 获取中间的两个 点  *  * @param scale  */ private PointF getPointF(int scale) {</div><div></div><div>  PointF pointF = new PointF();  int Startpx=(mWidth - dWidth) / 7*6;  //pointF.x = random.nextInt(getMeasuredWidth()-(mWidth - dWidth) / 7*6);//这里是 是为了控制 x轴活动范围,看效果 随意~~  //pointF.x=random.nextInt(getMeasuredWidth());  pointF.x = random.nextInt(Startpx+getMeasuredWidth()/100+25);   Log.i("x", "随机值");  pointF.y =  getMeasuredHeight()/2;  // 再Y轴上 为了确保第二个点 在第一个点之上,我把Y分成了上下两半 这样动画效果好一些 也可以用其他方法  //pointF.y = random.nextInt((mHeight - 100))/scale;    // pointF.x = random.nextInt((mWidth - 100));  //        //pointF.y = random.nextInt((mHeight - 100))/scale;  return pointF; }</div><div></div><div> private class BezierListenr implements ValueAnimator.AnimatorUpdateListener {</div><div></div><div>  private View target;</div><div></div><div>  public BezierListenr(View target) {   this.target = target;  }</div><div></div><div>  @Override  public void onAnimationUpdate(ValueAnimator animation) {   // 这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让爱心随着曲线走啦   PointF pointF = (PointF) animation.getAnimatedValue();   target.setX(pointF.x);   target.setY(pointF.y);   // 这里顺便做一个alpha动画   target.setAlpha((float) (1-animation.getAnimatedFraction()));  // target.setAlpha(1 - animation.getAnimatedFraction());  } }</div><div></div><div> private class AnimEndListener extends AnimatorListenerAdapter {  private View target;</div><div></div><div>  public AnimEndListener(View target) {   this.target = target;  }</div><div></div><div>  @Override  public void onAnimationEnd(Animator animation) {   super.onAnimationEnd(animation);   // 因为不停的add 导致子view数量只增不减,所以在view动画结束后remove掉   removeView((target));  } }}</div>

大家耐心的看下注释，跟着这个照着葫芦画瓢 也能做出这样一个动画的

为了实现点击屏幕出现这个爱心 所有 我们 要另外在一个类里面实现他的屏幕点击事情。

 

public boolean onTouchEvent(MotionEvent event) {
  // TODO Auto-generated method stub
  int touchEvent = event.getAction(); 
   switch (touchEvent)
   {
   //监听屏幕被按下
   case MotionEvent.ACTION_DOWN:
   //调用添加泡泡的方法
    periscopeLayout.addHeart();

    break;
   }
  return super.onTouchEvent(event);
 }

我们需要实现一个图片缩小到大的动画，就需要在res文件下新建一个anim 文件夹 写我们的xml动画

<?xml version="1.0" encoding="utf-8"?>
<scale
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromXScale="0.0"
   android:toXScale="1.0"
   android:fromYScale="0.0"
   android:toYScale="1.0"
   android:pivotX="50%"
   android:pivotY="50%"
   android:duration="2000">
</scale>

我们实现点赞的代码也就是这么简单了，demo下载地址：demo下载链接（配合博客一起看）

对这个编辑器还是不太懂，写出来的东西可读性没有人家那些好。不过后面多写了，也就会慢慢熟悉了。

http://download.csdn.net/detail/ningzhouxu/9528218