Android特效专辑（六）——仿QQ聊天撒花特效，无形装逼，最为致命

我的关于特效的专辑已经在CSDN上申请了一个专栏——http://blog.csdn.net/column/details/liuguilin.html
日后我所写的特效专辑也会以一添加在这个专栏上，今天写的这个特效，是关于聊天的，你肯定遇到过，就是你跟人家聊天的时候，比如发送应（么么哒），然后屏幕上全部就是表情了，今天我们就是做这个，撒花的特效，国际惯例，上图

截图

  1.       实现这样的效果，你要知道贝塞尔曲线，何谓贝塞尔曲线？其实就是曲线，嘿嘿，关于曲线的概念大家可以去
  2.

Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

中看下，我们这里就直接写了

1.activity_main.xml

  1.       <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  6.     //撒花的区域
  7.     <RelativeLayout
  8.         android:id="@+id/rlt_animation_layout"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent" >
  11.     </RelativeLayout>
  13.     <Button
  14.         android:id="@+id/btn_start"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:layout_alignParentBottom="true"
  18.         android:layout_centerHorizontal="true"
  19.         android:layout_marginBottom="23dp"
  20.         android:text="开始撒花" />
  22. </RelativeLayout>
  23.

2.Fllower

  1.       传参类
  2.     
  1.       package com.lgl.test;
  3. import android.graphics.Bitmap;
  4. import android.graphics.Path;
  6. import java.io.Serializable;
  8. public class Fllower implements Serializable {
  10.     private static final long serialVersionUID = 1L;
  11.     private Bitmap image;
  12.     private float x;
  13.     private float y;
  14.     private Path path;
  15.     private float value;
  17.     public Bitmap getResId() {
  18.         return image;
  19.     }
  21.     public void setResId(Bitmap img) {
  22.         this.image = img;
  23.     }
  25.     public float getX() {
  26.         return x;
  27.     }
  29.     public void setX(float x) {
  30.         this.x = x;
  31.     }
  33.     public float getY() {
  34.         return y;
  35.     }
  37.     public void setY(float y) {
  38.         this.y = y;
  39.     }
  41.     public Path getPath() {
  42.         return path;
  43.     }
  45.     public void setPath(Path path) {
  46.         this.path = path;
  47.     }
  49.     public float getValue() {
  50.         return value;
  51.     }
  53.     public void setValue(float value) {
  54.         this.value = value;
  55.     }
  57.     @Override
  58.     public String toString() {
  59.         return "Fllower [ x=" + x + ", y=" + y + ", path=" + path + ", value="
  60.                 + value + "]";
  61.     }
  63. }
  64.

3.FllowerAnimation

  1.       动画类
  2.     
  1.       package com.lgl.test;
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. import java.util.Random;
  7. import android.animation.ObjectAnimator;
  8. import android.animation.ValueAnimator;
  9. import android.animation.ValueAnimator.AnimatorUpdateListener;
  10. import android.content.Context;
  11. import android.graphics.Bitmap;
  12. import android.graphics.BitmapFactory;
  13. import android.graphics.Canvas;
  14. import android.graphics.Paint;
  15. import android.graphics.Path;
  16. import android.graphics.PathMeasure;
  17. import android.util.Log;
  18. import android.util.TypedValue;
  19. import android.view.View;
  20. import android.view.WindowManager;
  21. import android.view.animation.AccelerateInterpolator;
  23. /**
  24.  * 撒花 用到的知识点： 1、android属性动画 2、Path路径绘制 3、贝塞尔曲线
  25.  */
  26. public class FllowerAnimation extends View implements AnimatorUpdateListener {
  28.     /**
  29.      * 动画改变的属性值
  30.      */
  31.     private float phase1 = 0f;
  32.     private float phase2 = 0f;
  33.     private float phase3 = 0f;
  35.     /**
  36.      * 小球集合
  37.      */
  38.     private List<Fllower> fllowers1 = new ArrayList<Fllower>();
  39.     private List<Fllower> fllowers2 = new ArrayList<Fllower>();
  40.     private List<Fllower> fllowers3 = new ArrayList<Fllower>();
  42.     /**
  43.      * 动画播放的时间
  44.      */
  45.     private int time = 4000;
  46.     /**
  47.      * 动画间隔
  48.      */
  49.     private int delay = 400;
  51.     int[] ylocations = { -100, -50, -25, 0 };
  53.     /**
  54.      * 资源ID
  55.      */
  56.     // private int resId = R.drawable.fllower_love;
  57.     public FllowerAnimation(Context context) {
  58.         super(context);
  59.         init(context);
  60.         // this.resId = resId;
  61.     }
  63.     @SuppressWarnings("deprecation")
  64.     private void init(Context context) {
  65.         WindowManager wm = (WindowManager) context
  66.                 .getSystemService(Context.WINDOW_SERVICE);
  67.         width = wm.getDefaultDisplay().getWidth();
  68.         height = (int) (wm.getDefaultDisplay().getHeight() * 3 / 2f);
  70.         mPaint = new Paint();
  71.         mPaint.setAntiAlias(true);
  72.         // mPaint.setStrokeWidth(2);
  73.         // mPaint.setColor(Color.BLUE);
  74.         // mPaint.setStyle(Style.STROKE);
  76.         pathMeasure = new PathMeasure();
  78.         builderFollower(fllowerCount, fllowers1);
  79.         builderFollower(fllowerCount, fllowers2);
  80.         builderFollower(fllowerCount, fllowers3);
  82.     }
  84.     /**
  85.      * 宽度
  86.      */
  87.     private int width = 0;
  88.     /**
  89.      * 高度
  90.      */
  91.     private int height = 0;
  93.     /**
  94.      * 曲线高度个数分割
  95.      */
  96.     private int quadCount = 10;
  97.     /**
  98.      * 曲度
  99.      */
  100.     private float intensity = 0.2f;
  102.     /**
  103.      * 第一批个数
  104.      */
  105.     private int fllowerCount = 4;
  107.     /**
  108.      * 创建花
  109.      */
  110.     private void builderFollower(int count, List<Fllower> fllowers) {
  112.         int max = (int) (width * 3 / 4f);
  113.         int min = (int) (width / 4f);
  114.         Random random = new Random();
  115.         for (int i = 0; i < count; i++) {
  116.             int s = random.nextInt(max) % (max - min + 1) + min;
  117.             Path path = new Path();
  118.             CPoint CPoint = new CPoint(s, ylocations[random.nextInt(3)]);
  119.             List<CPoint> points = builderPath(CPoint);
  120.             drawFllowerPath(path, points);
  121.             Fllower fllower = new Fllower();
  122.             fllower.setPath(path);
  123.             Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
  124.                     R.drawable.lift_flower);
  125.             fllower.setResId(bitmap);
  126.             fllowers.add(fllower);
  127.         }
  129.     }
  131.     /**
  132.      * 画曲线
  133.      *
  134.      * @param path
  135.      * @param points
  136.      */
  137.     private void drawFllowerPath(Path path, List<CPoint> points) {
  138.         if (points.size() > 1) {
  139.             for (int j = 0; j < points.size(); j++) {
  141.                 CPoint point = points.get(j);
  143.                 if (j == 0) {
  144.                     CPoint next = points.get(j + 1);
  145.                     point.dx = ((next.x - point.x) * intensity);
  146.                     point.dy = ((next.y - point.y) * intensity);
  147.                 } else if (j == points.size() - 1) {
  148.                     CPoint prev = points.get(j - 1);
  149.                     point.dx = ((point.x - prev.x) * intensity);
  150.                     point.dy = ((point.y - prev.y) * intensity);
  151.                 } else {
  152.                     CPoint next = points.get(j + 1);
  153.                     CPoint prev = points.get(j - 1);
  154.                     point.dx = ((next.x - prev.x) * intensity);
  155.                     point.dy = ((next.y - prev.y) * intensity);
  156.                 }
  158.                 // create the cubic-spline path
  159.                 if (j == 0) {
  160.                     path.moveTo(point.x, point.y);
  161.                 } else {
  162.                     CPoint prev = points.get(j - 1);
  163.                     path.cubicTo(prev.x + prev.dx, (prev.y + prev.dy), point.x
  164.                             - point.dx, (point.y - point.dy), point.x, point.y);
  165.                 }
  166.             }
  167.         }
  168.     }
  170.     /**
  171.      * 曲线摇摆的幅度
  172.      */
  173.     private int range = (int) TypedValue
  174.             .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 70, getResources()
  175.                     .getDisplayMetrics());
  177.     /**
  178.      * 画路径
  179.      *
  180.      * @param point
  181.      * @return
  182.      */
  183.     private List<CPoint> builderPath(CPoint point) {
  184.         List<CPoint> points = new ArrayList<CPoint>();
  185.         Random random = new Random();
  186.         for (int i = 0; i < quadCount; i++) {
  187.             if (i == 0) {
  188.                 points.add(point);
  189.             } else {
  190.                 CPoint tmp = new CPoint(0, 0);
  191.                 if (random.nextInt(100) % 2 == 0) {
  192.                     tmp.x = point.x + random.nextInt(range);
  193.                 } else {
  194.                     tmp.x = point.x - random.nextInt(range);
  195.                 }
  196.                 tmp.y = (int) (height / (float) quadCount * i);
  197.                 points.add(tmp);
  198.             }
  199.         }
  200.         return points;
  201.     }
  203.     /**
  204.      * 画笔
  205.      */
  206.     private Paint mPaint;
  208.     /**
  209.      * 测量路径的坐标位置
  210.      */
  211.     private PathMeasure pathMeasure = null;
  213.     @Override
  214.     protected void onDraw(Canvas canvas) {
  215.         super.onDraw(canvas);
  217.         drawFllower(canvas, fllowers1);
  218.         drawFllower(canvas, fllowers2);
  219.         drawFllower(canvas, fllowers3);
  221.     }
  223.     /**
  224.      * 高度往上偏移量,把开始点移出屏幕顶部
  225.      */
  226.     private float dy = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  227.             40, getResources().getDisplayMetrics());
  229.     /**
  230.      * @param canvas
  231.      * @param fllowers
  232.      */
  233.     private void drawFllower(Canvas canvas, List<Fllower> fllowers) {
  234.         for (Fllower fllower : fllowers) {
  235.             float[] pos = new float[2];
  236.             // canvas.drawPath(fllower.getPath(),mPaint);
  237.             pathMeasure.setPath(fllower.getPath(), false);
  238.             pathMeasure.getPosTan(height * fllower.getValue(), pos, null);
  239.             // canvas.drawCircle(pos[0], pos[1], 10, mPaint);
  240.             canvas.drawBitmap(fllower.getResId(), pos[0], pos[1] - dy, null);
  241.         }
  242.     }
  244.     ObjectAnimator mAnimator1;
  245.     ObjectAnimator mAnimator2;
  246.     ObjectAnimator mAnimator3;
  248.     public void startAnimation() {
  249.         if (mAnimator1 != null && mAnimator1.isRunning()) {
  250.             mAnimator1.cancel();
  251.         }
  252.         mAnimator1 = ObjectAnimator.ofFloat(this, "phase1", 0f, 1f);
  253.         mAnimator1.setDuration(time);
  254.         mAnimator1.addUpdateListener(this);
  256.         mAnimator1.start();
  257.         mAnimator1.setInterpolator(new AccelerateInterpolator(1f));
  259.         if (mAnimator2 != null && mAnimator2.isRunning()) {
  260.             mAnimator2.cancel();
  261.         }
  262.         mAnimator2 = ObjectAnimator.ofFloat(this, "phase2", 0f, 1f);
  263.         mAnimator2.setDuration(time);
  264.         mAnimator2.addUpdateListener(this);
  265.         mAnimator2.start();
  266.         mAnimator2.setInterpolator(new AccelerateInterpolator(1f));
  267.         mAnimator2.setStartDelay(delay);
  269.         if (mAnimator3 != null && mAnimator3.isRunning()) {
  270.             mAnimator3.cancel();
  271.         }
  272.         mAnimator3 = ObjectAnimator.ofFloat(this, "phase3", 0f, 1f);
  273.         mAnimator3.setDuration(time);
  274.         mAnimator3.addUpdateListener(this);
  275.         mAnimator3.start();
  276.         mAnimator3.setInterpolator(new AccelerateInterpolator(1f));
  277.         mAnimator3.setStartDelay(delay * 2);
  278.     }
  280.     /**
  281.      * 跟新小球的位置
  282.      *
  283.      * @param value
  284.      * @param fllowers
  285.      */
  286.     private void updateValue(float value, List<Fllower> fllowers) {
  287.         for (Fllower fllower : fllowers) {
  288.             fllower.setValue(value);
  289.         }
  290.     }
  292.     /**
  293.      * 动画改变回调
  294.      */
  295.     @Override
  296.     public void onAnimationUpdate(ValueAnimator arg0) {
  298.         updateValue(getPhase1(), fllowers1);
  299.         updateValue(getPhase2(), fllowers2);
  300.         updateValue(getPhase3(), fllowers3);
  301.         Log.i(tag, getPhase1() + "");
  302.         invalidate();
  303.     }
  305.     public float getPhase1() {
  306.         return phase1;
  307.     }
  309.     public void setPhase1(float phase1) {
  310.         this.phase1 = phase1;
  311.     }
  313.     public float getPhase2() {
  314.         return phase2;
  315.     }
  317.     public void setPhase2(float phase2) {
  318.         this.phase2 = phase2;
  319.     }
  321.     public float getPhase3() {
  322.         return phase3;
  323.     }
  325.     public void setPhase3(float phase3) {
  326.         this.phase3 = phase3;
  327.     }
  329.     private String tag = this.getClass().getSimpleName();
  331.     private class CPoint {
  333.         public float x = 0f;
  334.         public float y = 0f;
  336.         /**
  337.          * x-axis distance
  338.          */
  339.         public float dx = 0f;
  341.         /**
  342.          * y-axis distance
  343.          */
  344.         public float dy = 0f;
  346.         public CPoint(float x, float y) {
  347.             this.x = x;
  348.             this.y = y;
  349.         }
  350.     }
  352. }
  353.

4.MainActivity

  1.       接着就看我们使用
  2.     
  1.       package com.lgl.test;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.widget.Button;
  8. import android.widget.RelativeLayout;
  10. public class MainActivity extends Activity {
  12.     private Button btn_start;
  13.     // 撒花特效
  14.     private RelativeLayout rlt_animation_layout;
  15.     private FllowerAnimation fllowerAnimation;
  17.     @Override
  18.     protected void onCreate(Bundle savedInstanceState) {
  19.         super.onCreate(savedInstanceState);
  20.         setContentView(R.layout.activity_main);
  22.         // 撒花初始化
  23.         rlt_animation_layout = (RelativeLayout) findViewById(R.id.rlt_animation_layout);
  24.         rlt_animation_layout.setVisibility(View.VISIBLE);
  25.         fllowerAnimation = new FllowerAnimation(this);
  26.         RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
  27.                 RelativeLayout.LayoutParams.MATCH_PARENT,
  28.                 RelativeLayout.LayoutParams.MATCH_PARENT);
  29.         fllowerAnimation.setLayoutParams(params);
  30.         rlt_animation_layout.addView(fllowerAnimation);
  32.         btn_start = (Button) findViewById(R.id.btn_start);
  33.         btn_start.setOnClickListener(new OnClickListener() {
  35.             @Override
  36.             public void onClick(View v) {
  37.                 // 开始撒花
  38.                 fllowerAnimation.startAnimation();
  39.             }
  40.         });
  41.     }
  42. }
  43.     
  1.       好，我们现在来看看效果
  2.     
  1.       好的，你也赶快去试一下吧！
  2.

Demo下载：http://download.csdn.net/detail/qq_26787115/9410578