Android 漂浮动画，下雪动画效果

因工作需要最近在研究了动画，先看下效果：

 

Android 漂浮动画，下雪动画效果Android 漂浮动画，下雪动画效果

Android 漂浮动画，下雪动画效果Android 漂浮动画，下雪动画效果

1.先得了解下canvas.drawBitmap(mBitmap, mSrcRect, mDestRect, mBitPaint);

在绘制图片时，使用，参数分别，图片bitmap,绘制bitmap自己的区域，绘制bitmap在手机上显示位置区域，画笔；

mSrcRect，mDestRect都是Rect(int left, int top, int right, int bottom) 的对象；
2.思路

a.漂浮的图片，可能是小球，星星，雪花之类的，根据需求，选若干个不同小图片，先称之他们漂浮的星星；

b.根据效果，漂浮图片设置其实有关数据，像坐标，大小，透明度，移动速度进水，移动方向等；

c.然后初始化以上数据，生成批量小球，进行绘制；

d.开设个线程或handle造成定时器，来不断刷新，同时修改漂浮星星属性，

3.代码

a.定义一个继承View的类，初始化画笔，所需若干星星，设置不同速度

 

 

  1. private void initPaint() {

  2. paint = new Paint(Paint.ANTI_ALIAS_FLAG);

  3. // 防抖动

  4. paint.setDither(true);

  5. // 开启图像过滤

  6. paint.setFilterBitmap(true);

  7. }

 

  1. /**

  2. * 设置动画目标,三张大小不同，样式不一，为了美观

  3. * init bitmap info

  4. */

  5. private void initBitmapInfo() {

  6. mStarOne = ((BitmapDrawable) mResources.getDrawable(R.drawable.star2)).getBitmap();

  7. mStarOneWidth = mStarOne.getWidth();

  8. mStarOneHeight = mStarOne.getHeight();

  9.  

  10. mStarTwo = ((BitmapDrawable) mResources.getDrawable(R.drawable.star1)).getBitmap();

  11. mStarTwoWidth = mStarTwo.getWidth();

  12. mStarTwoHeight = mStarTwo.getHeight();

  13.  

  14. mStarThree = ((BitmapDrawable) mResources.getDrawable(R.drawable.star3)).getBitmap();

  15. mStarThreeWidth = mStarThree.getWidth();

  16. mStarThreeHeight = mStarThree.getHeight();

  17. }

 

  1. //定义三种不同快慢的漂浮速度

  2. private void initData(Context context) {

  3. mResources = getResources();

  4. DisplayMetrics dm = context.getApplicationContext().getResources().getDisplayMetrics();

  5.  

  6. mTotalWidth = dm.widthPixels;

  7. mTotalHeight = dm.heightPixels;

  8. Log.i(TAG, "mTotalWidth=" + mTotalWidth + "--1--mTotalHeight=" + mTotalHeight);

  9. //设置三个不同大小的速度值

  10. mFloatTransLowSpeed = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0.5f,

  11. mResources.getDisplayMetrics());

  12. mFloatTransMidSpeed = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0.75f,

  13. mResources.getDisplayMetrics());

  14. mFloatTransFastSpeed = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1f,

  15. mResources.getDisplayMetrics());

  16. }

b.初始化星星，因为在构造方法里把一些基本数据初始化结束后，接着会进行测量，我把初始化星星方法放在
onMeasure方法了

 

 

 

  1. /**

  2. * 初始化星星信息

  3. */

  4. private void initStarInfo() {

  5.  

  6. StarInfo starInfo = null;

  7. Random random = new Random();

  8. for (int i = 0; i < mFloatCount; i++) {

  9. // 获取星星大小比例

  10. float starSize = getStarSize(0.4f, 0.8f);

  11. //小球的坐标

  12. float[] starLocation = STAR_LOCATION[i];

  13. starInfo = new StarInfo();

  14. // 初始化星星大小

  15. starInfo.sizePercent = starSize;

  16. // 初始化漂浮速度

  17. int randomSpeed = random.nextInt(3);

  18. switch (randomSpeed) {

  19. case 0:

  20. starInfo.speed = mFloatTransLowSpeed;

  21. break;

  22. case 1:

  23. starInfo.speed = mFloatTransMidSpeed;

  24. break;

  25. case 2:

  26. starInfo.speed = mFloatTransFastSpeed;

  27. break;

  28. default:

  29. starInfo.speed = mFloatTransMidSpeed;

  30. break;

  31. }

  32. // 初始化星星透明度

  33. starInfo.alpha = getStarSize(0.3f, 0.8f);

  34. // 初始化星星位置

  35. starInfo.xLocation = (int) (starLocation[0] * mTotalWidth);

  36. starInfo.yLocation = (int) (starLocation[1] * mTotalHeight);

  37. Log.i(TAG, "xLocation = " + starInfo.xLocation + "--yLocation = "

  38. + starInfo.yLocation);

  39. Log.i(TAG, "stoneSize = " + starSize + "---stoneAlpha = "

  40. + starInfo.alpha);

  41. // 初始化星星位置

  42. starInfo.direction = getStarDirection();

  43. mStarInfos.add(starInfo);

  44. }

  45. }

STAR_LOCATION[]数组的人为的确定星星占手机屏幕大小比例的位置，自己试过随机生成一些数据，但是有时就扎堆了，应该找个手机屏幕上随机不重复生成点坐标的算法，正在思考，有会的，给我说下，学习下

 

c.设置星星的移动方向，这里只是常态化的左右上下，对角线的方向，自己可以添加其他轨迹方向

 

 

  1. /**

  2. * 不同移动轨迹，除过左右上下，也可以定义其他方向，如对角线，曲线之类的

  3. * 初始化星星运行方向

  4. */

  5. private int getStarDirection() {

  6. int randomInt;

  7. Random random = new Random();

  8. if(floatTyep==100){

  9. randomInt = random.nextInt(3);

  10. }else {

  11. randomInt=floatTyep;

  12. }

  13. int direction = 0;

  14. switch (randomInt) {

  15. case 0:

  16. direction = LEFT;

  17. break;

  18. case 1:

  19. direction = RIGHT;

  20. break;

  21. case 2:

  22. direction = TOP;

  23. break;

  24. case 3:

  25. direction = BOTTOM;

  26. break;

  27. case 4:

  28. direction = FREE_POINT;

  29. break;

  30. default:

  31. break;

  32. }

  33. return direction;

  34. }

d.重复绘制时，修改小球的运动轨迹方向，添加case类型，比如一些正余弦轨迹，在手机上菱形运行，折线轨迹等；

 

 

 

  1. private void resetStarFloat(StarInfo starInfo) {

  2. switch (starInfo.direction) {

  3. case LEFT:

  4. if (starInfo.xLocation < -20) {

  5. starInfo.xLocation = mTotalWidth;

  6. } else {

  7. starInfo.xLocation -= starInfo.speed;

  8. }

  9.  

  10. break;

  11. case RIGHT:

  12. if (starInfo.xLocation > mTotalWidth+20) {

  13. starInfo.xLocation = 0;

  14. } else {

  15. starInfo.xLocation += starInfo.speed;

  16. }

  17.  

  18. break;

  19. case TOP:

  20. if (starInfo.yLocation < -20) {

  21. starInfo.yLocation = mTotalHeight;

  22. } else {

  23. starInfo.yLocation -= starInfo.speed;

  24. }

  25.  
  26.  

  27. break;

  28. case BOTTOM:

  29. if (starInfo.yLocation > mTotalHeight+30) {

  30. starInfo.yLocation = 0;

  31. } else {

  32. starInfo.yLocation += starInfo.speed;

  33. }

  34. break;

  35. case FREE_POINT:

  36.  

  37. if (starInfo.yLocation > mTotalHeight+30) {

  38. starInfo.yLocation = 0;

  39. } else {

  40. starInfo.yLocation += starInfo.speed;

  41. }

  42.  

  43. if (starInfo.xLocation < -20) {

  44. starInfo.xLocation = mTotalWidth;

  45. } else {

  46. starInfo.xLocation -= starInfo.speed;

  47. }

  48. break;

  49. default:

  50. break;

  51. }

  52. }

 

上面的20,30是随便加的，是为了让星星跑到手机屏幕之外，再重新进入界面，否则直接运动到屏幕边界，重新开始，会闪的一下，效果不好；

e.进行绘制

 

 

  1. @Override

  2. protected void onDraw(Canvas canvas) {

  3. super.onDraw(canvas);

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

  5. StarInfo starInfo = mStarInfos.get(i);

  6. drawStarDynamic(i, starInfo, canvas, paint);

  7. }

  8. }

  9.  

  10. private void drawStarDynamic(int count, StarInfo starInfo,

  11. Canvas canvas, Paint paint) {

  12. resetStarFloat(starInfo);

  13. float starAlpha = starInfo.alpha;

  14. int xLocation = starInfo.xLocation;

  15. int yLocation = starInfo.yLocation;

  16. float sizePercent = starInfo.sizePercent;

  17.  

  18. xLocation = (int) (xLocation / sizePercent);

  19. yLocation = (int) (yLocation / sizePercent);

  20.  

  21. Bitmap bitmap = null;

  22. Rect srcRect = null;

  23. Rect destRect = new Rect();

  24.  

  25. mStarOneSrcRect = new Rect(0, 0, mStarOneWidth, mStarOneHeight);

  26. if (count % 3 == 0) {

  27.  

  28. bitmap = mStarOne;

  29. srcRect = mStarOneSrcRect;

  30. destRect.set(xLocation, yLocation,

  31. xLocation + mStarOneWidth, yLocation

  32. + mStarOneHeight);

  33. } else if (count % 2 == 0) {

  34. bitmap = mStarThree;

  35. srcRect = mStarThreeSrcRect;

  36. destRect.set(xLocation, yLocation, xLocation

  37. + mStarThreeWidth, yLocation + mStarThreeHeight);

  38. } else {

  39. bitmap = mStarTwo;

  40. srcRect = mStarTwoSrcRect;

  41. destRect.set(xLocation, yLocation, xLocation

  42. + mStarTwoWidth, yLocation + mStarTwoHeight);

  43. }

  44. paint.setAlpha((int) (starAlpha * 255));

  45.  

  46. canvas.save();

  47. canvas.scale(sizePercent, sizePercent);

  48. canvas.drawBitmap(bitmap, srcRect, destRect, paint);

  49. canvas.restore();

  50.  

  51. }

f.定时重会，实现动的效果

 

  1. Handler handler=new Handler(){

  2. @Override

  3. public void handleMessage(Message msg) {

  4. super.handleMessage(msg);

  5.  

  6. if(isRuning){

  7. postInvalidate();

  8. handler.sendMessageDelayed(Message.obtain(),50);

  9. }

  10. }

  11. };

 

  1. public void startAnimationFloat(){

  2. isRuning=true;

  3. handler.sendMessage(Message.obtain());

  4. }

  5.  

  6. public void stopAnimationFloat(){

  7. isRuning=false;

  8.  

  9. }

  10. public void restartAnimationFloat(){

  11. startAnimationFloat();

  12. }

基本就这些，然后在activity布局里使用FloatView，设置不同运动方向轨迹即可；

 

 

 

  1. protected void onCreate(Bundle savedInstanceState) {

  2. super.onCreate(savedInstanceState);

  3. setContentView(R.layout.activity_float);

  4. int typeKey = getIntent().getIntExtra("type_key", 0);

  5. FloatView startBtn = (FloatView) findViewById(R.id.float_btn);

  6. startBtn.setFloatType(FloatView.FREE_POINT);

  7. if(typeKey==1){

  8. startBtn.setFloatType(FloatView.DEFAULT_TYPE);

  9. }else if(typeKey==2){

  10. startBtn.setFloatType(FloatView.FREE_POINT);

  11. }else if(typeKey==3){

  12. startBtn.setFloatType(FloatView.TOP);

  13. }else if(typeKey==4){

  14. startBtn.setFloatType(FloatView.BOTTOM);

  15. }else if(typeKey==5){

  16. startBtn.setFloatType(FloatView.LEFT);

  17. }else if(typeKey==6){

  18. startBtn.setFloatType(FloatView.RIGHT);

  19. }

  20. startBtn.startAnimationFloat();

  21. }

以上的部分关键代码和思路学习于http://blog.csdn.net/tianjian4592/article/details/45157787，此人很牛，动画绘制这块文章写的很细，容易理解，建议去看下，自己稍作修改，调通，作为笔记，来实现工作需求；
源码

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode