2. 程式人生 > >Android 漂浮動畫，下雪動畫效果

Android 漂浮動畫，下雪動畫效果

阿新 • • 發佈：2018-11-21

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

 

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，此人很牛，動畫繪製這塊文章寫的很細，容易理解，建議去看下，自己稍作修改，調通，作為筆記，來實現工作需求；
原始碼

相關推薦

Android 漂浮動畫，下雪動畫效果

因工作需要最近在研究了動畫，先看下效果：   1.先得了解下canvas.drawBitmap(mBitmap, mSrcRect, mDestRect, mBitPaint); 在繪製圖片時，使用，引數分別，圖片bitmap,繪製bitmap自己的區域，繪製bit

Android - 動畫（幀動畫，補間動畫，屬性動畫，以及插值器）

一： 動畫的分類 幀動畫 補間動畫 屬性動畫 二：解析 1. 幀動畫 （1）定義 這些圖片是將一些列的drawable組合在一起,進行連續的播放， 類似於以前電影源用膠捲進行動畫播放 （2）有圖有真相 （3）準備圖片 看著是不是還行，哈哈，

Android 幀動畫，載入動畫

1、建立drawable檔案ring_animation.xml <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.co

頁面彈出動畫，類似抽屜效果

/**      * 設定裝飾列表框狀態      *      * @param isOpen      *            是否開啟      * @param hasAnimation      *            開啟動畫      */     pr

android使用Fresco顯示gif圖並控制動畫，解決動畫為空null的問題

前天專案中用到gif圖做支付狀態顯示，支付中、支付失敗或成功這3個gif。本來打算要美工（當著美工的面要稱呼他們叫UI設計師）做幀圖片，然後自己做動畫的，後來發現專案裡用到了Fresco（做頭像用的，我也是剛接觸專案一個月，之前不知道）。並且Fresco自帶支援gif和we

始終難以追上外來動畫，國產動畫還有春天嗎？

加速 變革 藝術 杭州 福音 保持 lib img pla 《刀劍神域序列之爭》已經確定要在中國上映！新海誠又有作品要出了？近幾年來，以動畫產業大國日本和美國為代表的外來動畫已滲入中國動畫市場，國產動畫遭到差別對待，最直接的表現就是人們討論的幾乎都是外來動畫，對宮崎駿和新

Android 常用效果（各種進度條，酷炫loading動畫，火箭升空，撒花以及趨勢圖）

最近時間比較充裕一些，總結了下幾個專案用到的ui效果，在這邊共享給大家，也給自己做個記錄(後面會有demo貼出). 主要是以下幾種ui效果： 進度條多種展示 開源loading動畫 火箭升空 撒花

Android屬性動畫上手實現各種動畫效果，自定義動畫，拋物線等

在上一篇Android基礎動畫,組合動畫，幀動畫，佈局動畫，Activity跳轉動畫中我寫了基礎動畫的用法，那麼這次我們來看Android屬性動畫上手實現各種效果,包括實現基本的透明度，縮放，平

Android 5.X Activity過渡動畫，以及漂亮的共享元素效果

曾經的Android在Activity進行跳轉的時候，只是非常生硬的進行切換，即使使用overPendingtransition(int inId,int outId)這個方法來給Activity增加一些切換動畫效果也很是差強人意。而在Android 5.X中，

Android控制元件顯示、隱藏時，增加動畫效果

      在Android應用開發的時候經常會用到View的setVisibility()方法來動態隱藏和顯示view，但是這樣子是沒有過渡動畫的，變化的時候會顯得很生硬。     LayoutTransition是一個在4.0新引入的Api，主要功能是在ViewGroup的layout發生變化的時候能夠自

Android在xml中設定元件風格（圓角，點選效果selector，邊框，進度條風格，動畫）TextView文字透明度

在標題中寫到的元件的特效，都是在xml中為元件定義的 步驟： 1.在drawable下建立“Drawable resource file”，命名為：btn_corners(表示功能：圓角button) 2.在btn_corners.xml檔案中寫入程式碼如下 3.TextV

Android 用surfaceview模擬幀動畫的效果，解決幀動畫的OOM問題

最近做的專案，客戶臨時要求改版，我真的是最煩這個，要求跟換主頁面的背景，換上新的背景圖，要求是動態的。 效果（我隨便拿的五個圖片做的gif）： 方案: 幀動畫方案:         缺點:1.好像只能imageview才能播放幀動畫                  2

*C#(WPF)--矩陣拖動和矩陣動畫（拖動展開，不足動畫效果）

stop 項目 鼠標 ani sys unlock 控件移動 top art 最近在研發新的項目，遇到了一個桌面模式下的難點--展開動畫。之前動畫這方面沒做過，也許很多人開始做的時候也會遇到相關問題，因此我把幾個重點及實際效果圖總結展示出來： 我的開發環境是在

css3動畫（animation）效果1-漂浮的白雲

body ini abs mage and run ram info alternate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

效果使用css3動畫製作，但是動畫會導致頁面抖動閃屏

2、問題原因 效果使用css3動畫製作，但是動畫會導致頁面抖動閃屏 3、解決方案 使用到動畫的樣式設定如下樣式，可解決 -webkit-backface-visibility: hidden;（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏） // 如果有3d加上下面句 ，沒有可省略 -webk

HTML5 - 用CSS3動畫製作場景切換效果（移動，旋轉，淡入淡出等）

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5-頁面切換動畫</title> 6 <l

Android開發——動畫使用篇章（幀動畫，補間動畫）（一）

Android 動畫分為 view動畫，幀動畫，屬性動畫，本片文章是參考多篇動畫介紹部落格，總結動畫使用API，使用場景。適合日常開發 搬磚使用。 幀動畫 幀動畫是最容易實現的一種動畫，這種動畫更多的依賴於完善的UI資源，他的原理就是將一張張單獨的圖片連貫的進行播放，從而在視覺上

Android：禁止viewpager左右滑動，去除viewpager切換時動畫，解決viewpager與百度地圖滑動衝突

Android自定義viewpager，禁止viewpager左右滑動，去除viewpager切換時動畫，解決viewpager與百度地圖滑動衝突 public class CustomViewPager extends ViewPager { private boolean e

Android 動畫分析之翻轉效果

大家一定看到過三維的翻轉效果，所以今天在這裡簡單的給大家分析一下，我們怎麼樣才能實現Android中的翻轉動畫效果的實現，首先看一下執行效果如下圖所示。 效果圖： Android中並沒有提供直接做3D翻轉的動畫，所以關於3D翻轉的動畫效果需要我們自己實現，那麼我們首先

css3實現ps蒙版效果以及動畫，炫酷吊炸天！

css3越來越強大，使用css也可以做越來越多意想不到的效果。 css3實現了ps的蒙版效果，炫酷叼炸天的技能，必須要分享出來啊！ 實現原理 這個動畫，其實也並不複雜。它使用background-clip實現了文字蒙版的效果，然後結合了背景圖片的animation實現瞭如上圖所示的文字蒙版動畫。