android 路径动画制作

最新推荐文章于 2024-05-12 21:50:27 发布

Qiqihar

最新推荐文章于 2024-05-12 21:50:27 发布

阅读量1.7k

点赞数

分类专栏： Android

Android 专栏收录该内容

450 篇文章 0 订阅

订阅专栏

1、前言

今天项目要用到一个类似微信发送么么哒，那种屏幕飘表情的功能，所以分析研究了一下，用到的技术应该是路径动画，不知道这样就正不正确，反正就是画一个路径线，然后对象根据这个路径去运动。所以就叫他路径动画了。

路径动画要首先要解决的问题就是怎么画这个路径？然后路径画出来后怎么取路径上的所有点的坐标值？

这里解决这两个问题就看一个类PathMeasure 这个类接收一个path对象，然后可以根据pathMeasure.getPosTan（）可以得到长度比例的坐标值。这两个问题就直接搞定了。用path画一个路径然后取点，动态移动对象，就变成了路径动画了。是不是很简单。

2、看效果

3、核心代码

[java]view plaincopy 
   
 /** 
  * 撒花 
  *  
  * @author yd 
  * 
   
  用到的知识点： 
     1、android属性动画 
     2、Path路径绘制 
     3、贝塞尔曲线 
  *  
  *  
  * 
  * 
  * 
  * 
  * 
  * 
  */  
 public class FllowerAnimation extends View implements AnimatorUpdateListener {  
   
     /** 
      * 动画改变的属性值 
      */  
     private float phase1 = 0f;  
     private float phase2 = 0f;  
     private float phase3 = 0f;  
   
     /** 
      * 小球集合 
      */  
     private List<Fllower> fllowers1 = new ArrayList<Fllower>();  
     private List<Fllower> fllowers2 = new ArrayList<Fllower>();  
     private List<Fllower> fllowers3 = new ArrayList<Fllower>();  
   
     /** 
      * 动画播放的时间 
      */  
     private int time = 4000;  
     /** 
      * 动画间隔 
      */  
     private int delay = 500;  
   
     /** 
      * 资源ID 
      */  
 //  private int resId = R.drawable.fllower_love;  
   
     public FllowerAnimation(Context context) {  
         super(context);  
         init(context);  
 //      this.resId = resId;  
     }  
   
     @SuppressWarnings("deprecation")  
     private void init(Context context) {  
         WindowManager wm = (WindowManager) context  
                 .getSystemService(Context.WINDOW_SERVICE);  
         width = wm.getDefaultDisplay().getWidth();  
         height = (int) (wm.getDefaultDisplay().getHeight() * 3 / 2f);  
   
         mPaint = new Paint();  
         mPaint.setAntiAlias(true);  
         mPaint.setStrokeWidth(2);  
         mPaint.setColor(Color.BLUE);  
         mPaint.setStyle(Style.STROKE);  
   
         pathMeasure = new PathMeasure();  
   
         builderFollower(fllowerCount, fllowers1);  
         builderFollower(fllowerCount , fllowers2);  
         builderFollower(fllowerCount , fllowers3);  
   
     }  
   
     /** 
      * 宽度 
      */  
     private int width = 0;  
     /** 
      * 高度 
      */  
     private int height = 0;  
   
     /** 
      * 曲线高度个数分割 
      */  
     private int quadCount = 10;  
     /** 
      * 曲度 
      */  
     private float intensity = 0.2f;  
   
     /** 
      * 第一批个数 
      */  
     private int fllowerCount = 4;  
   
     /** 
      * 创建花 
      */  
     private void builderFollower(int count, List<Fllower> fllowers) {  
   
         int max = (int) (width * 3 / 4f);  
         int min = (int) (width / 4f);  
         Random random = new Random();  
         for (int i = 0; i < count; i++) {  
             int s = random.nextInt(max) % (max - min + 1) + min;  
             Path path = new Path();  
             CPoint CPoint = new CPoint(s, 0);  
             List<CPoint> points = builderPath(CPoint);  
             drawFllowerPath(path, points);  
             Fllower fllower = new Fllower();  
             fllower.setPath(path);  
             fllowers.add(fllower);  
         }  
   
     }  
   
     /** 
      * 画曲线 
      * @param path 
      * @param points 
      */  
     private void drawFllowerPath(Path path, List<CPoint> points) {  
         if (points.size() > 1) {  
             for (int j = 0; j < points.size(); j++) {  
   
                 CPoint point = points.get(j);  
   
                 if (j == 0) {  
                     CPoint next = points.get(j + 1);  
                     point.dx = ((next.x - point.x) * intensity);  
                     point.dy = ((next.y - point.y) * intensity);  
                 } else if (j == points.size() - 1) {  
                     CPoint prev = points.get(j - 1);  
                     point.dx = ((point.x - prev.x) * intensity);  
                     point.dy = ((point.y - prev.y) * intensity);  
                 } else {  
                     CPoint next = points.get(j + 1);  
                     CPoint prev = points.get(j - 1);  
                     point.dx = ((next.x - prev.x) * intensity);  
                     point.dy = ((next.y - prev.y) * intensity);  
                 }  
   
                 // create the cubic-spline path  
                 if (j == 0) {  
                     path.moveTo(point.x, point.y);  
                 } else {  
                     CPoint prev = points.get(j - 1);  
                     path.cubicTo(prev.x + prev.dx, (prev.y + prev.dy),  
                             point.x - point.dx, (point.y - point.dy),  
                             point.x, point.y);  
                 }  
             }  
         }  
     }  
   
     /** 
      * 曲线摇摆的幅度 
      */  
     private int range = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 70, getResources().getDisplayMetrics());  
   
     /** 
      * 画路径 
      *  
      * @param point 
      * @return 
      */  
     private List<CPoint> builderPath(CPoint point) {  
         List<CPoint> points = new ArrayList<CPoint>();  
         Random random = new Random();  
         for (int i = 0; i < quadCount; i++) {  
             if (i == 0) {  
                 points.add(point);  
             } else {  
                 CPoint tmp = new CPoint(0, 0);  
                 if (random.nextInt(100) % 2 == 0) {  
                     tmp.x = point.x + random.nextInt(range);  
                 } else {  
                     tmp.x = point.x - random.nextInt(range);  
                 }  
                 tmp.y = (int) (height / (float) quadCount * i);  
                 points.add(tmp);  
             }  
         }  
         return points;  
     }  
   
     /** 
      * 画笔 
      */  
     private Paint mPaint;  
   
     /** 
      * 测量路径的坐标位置 
      */  
     private PathMeasure pathMeasure = null;  
   
     @Override  
     protected void onDraw(Canvas canvas) {  
         super.onDraw(canvas);  
   
         drawFllower(canvas, fllowers1);  
         drawFllower(canvas, fllowers2);  
         drawFllower(canvas, fllowers3);  
   
     }  
   
     /** 
      * 高度往上偏移量,把开始点移出屏幕顶部 
      */  
     private float dy = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,40, getResources().getDisplayMetrics());  
       
     /** 
      *  
      * @param canvas 
      * @param fllowers 
      */  
     private void drawFllower(Canvas canvas, List<Fllower> fllowers) {  
         for (Fllower fllower : fllowers) {  
             float[] pos = new float[2];  
             canvas.drawPath(fllower.getPath(),mPaint);  
             pathMeasure.setPath(fllower.getPath(), false);  
             pathMeasure.getPosTan(height * fllower.getValue(), pos, null);  
             canvas.drawCircle(pos[0], pos[1], 10, mPaint);  
 //          Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resId);  
 //          canvas.drawBitmap(bitmap, pos[0], pos[1] - dy, null);  
 //          bitmap.recycle();  
         }  
     }  
   
     public void startAnimation() {  
         ObjectAnimator mAnimator1 = ObjectAnimator.ofFloat(this, "phase1", 0f,  
                 1f);  
         mAnimator1.setDuration(time);  
         mAnimator1.addUpdateListener(this);  
         mAnimator1.start();  
         mAnimator1.setInterpolator(new AccelerateInterpolator(1f));  
   
         ObjectAnimator mAnimator2 = ObjectAnimator.ofFloat(this, "phase2", 0f,  
                 1f);  
         mAnimator2.setDuration(time);  
         mAnimator2.addUpdateListener(this);  
         mAnimator2.start();  
         mAnimator2.setInterpolator(new AccelerateInterpolator(1f));  
         mAnimator2.setStartDelay(delay);  
   
         ObjectAnimator mAnimator3 = ObjectAnimator.ofFloat(this, "phase3", 0f,  
                 1f);  
         mAnimator3.setDuration(time);  
         mAnimator3.addUpdateListener(this);  
         mAnimator3.start();  
         mAnimator3.setInterpolator(new AccelerateInterpolator(1f));  
         mAnimator3.setStartDelay(delay * 2);  
     }  
   
     /** 
      * 跟新小球的位置 
      *  
      * @param value 
      * @param fllowers 
      */  
     private void updateValue(float value, List<Fllower> fllowers) {  
         for (Fllower fllower : fllowers) {  
             fllower.setValue(value);  
         }  
     }  
   
     /** 
      * 动画改变回调 
      */  
     @Override  
     public void onAnimationUpdate(ValueAnimator arg0) {  
   
         updateValue(getPhase1(), fllowers1);  
         updateValue(getPhase2(), fllowers2);  
         updateValue(getPhase3(), fllowers3);  
         Log.i(tag, getPhase1() + "");  
         invalidate();  
     }  
   
     public float getPhase1() {  
         return phase1;  
     }  
   
     public void setPhase1(float phase1) {  
         this.phase1 = phase1;  
     }  
   
     public float getPhase2() {  
         return phase2;  
     }  
   
     public void setPhase2(float phase2) {  
         this.phase2 = phase2;  
     }  
   
     public float getPhase3() {  
         return phase3;  
     }  
   
     public void setPhase3(float phase3) {  
         this.phase3 = phase3;  
     }  
   
     private String tag = this.getClass().getSimpleName();  
   
     private class CPoint {  
   
         public float x = 0f;  
         public float y = 0f;  
   
         /** x-axis distance */  
         public float dx = 0f;  
   
         /** y-axis distance */  
         public float dy = 0f;  
   
         public CPoint(float x, float y) {  
             this.x = x;  
             this.y = y;  
         }  
     }  
   
 }  

4、项目地址

http://download.csdn.net/detail/hxc2008q/8473053

转自：http://blog.csdn.net/spring_he/article/details/44064607

Qiqihar

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
android 路径动画制作

1、前言今天项目要用到一个类似微信发送么么哒，那种屏幕飘表情的功能，所以分析研究了一下，用到的技术应该是路径动画，不知道这样就正不正确，反正就是画一个路径线，然后对象根据这个路径去运动。所以就叫他路径动画了。路径动画要首先要解决的问题就是怎么画这个路径？然后路径画出来后怎么取路径上的所有点的坐标值？这里解决这两个问题就看一个类Path
复制链接

扫一扫

专栏目录