Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android制作粒子爆炸特效

Android制作粒子爆炸特效

編輯:關於android開發

Android制作粒子爆炸特效


簡介

最近在閒逛的時候,發現了一款粒子爆炸特效的控件,覺得比較有意思,效果也不錯。
但是代碼不好擴展,也就是說如果要提供不同的爆炸效果,需要修改的地方比較多。於是我對源代碼進行了一些重構,將爆炸流程和粒子運動分離。
對於源碼,大家可以參考以下鏈接
鏈接1
鏈接2

上面兩套代碼,其實結構都是一樣的,但是實現的效果不同(其實就是粒子運動的算法不同)。
本篇文章,將給大家介紹粒子爆炸特效的實現方式,替大家理清實現思路。

實現效果如下:
這裡寫圖片描述

 

類設計

類設計圖如下:
這裡寫圖片描述

ExplZ喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vc2lvbkZpZWxkPC9zdHJvbmc+o6w8c3Ryb25nPrGs1ajQp7n7t6LJ+rXEs6G12Dwvc3Ryb25nPqOsysfSu7j2Vmlld6GjtbHSu7j2v9i8/tDo0qqxrNWoyrGjrNDo0qrOqr/YvP7J+rPJ0ru49kV4cGxvc2lvbkZpZWxko6zV4rj2RXhwbG9zaW9uRmllbGQqKriyuMfV+7j2xsHEuyoqo6zT2srHztLDx7LFxNy/tLW9zerV+7XEsazVqNCnufuhozwvcD4NCgk8cD48c3Ryb25nPkV4cGxvc2lvbkFuaW1hdG9yPC9zdHJvbmc+o6yxrNWotq+7raOsxuTKtcrH0ru49jxzdHJvbmc+vMbKscb3PC9zdHJvbmc+o6y8zLPQ19RWYWx1ZUFuaW1hdG9yoaMxMDI0c8Tao6zN6rPJsazVqLavu62jrMO/tM68xsqxo6y+zbj80MLL+dPQwaPX07XE1Mu2r9e0zKyhozxzdHJvbmc+ZHJhdygpt723qDwvc3Ryb25nPsrHy/zX7tbY0qq1xLe9t6ijrNKyvs3Kx8q5y/nT0MGj19PW2Lvm19TJ7aOstNO2+Mq1z9a2r7ut0Ke5+6GjPC9wPg0KCTxwPjxzdHJvbmc+UGFydGljbGVGYWN0b3J5PC9zdHJvbmc+o6zKx9K7uPaz6c/zwOCho9PD09o8c3Ryb25nPrL6yfrBo9fTyv3X6Twvc3Ryb25nPqOssrvNrLXEUGFydGljbGVGYWN0b3J5v8nS1LL6yfqyu82swODQzbXEwaPX08r91+mhozwvcD4NCgk8cD48c3Ryb25nPlBhcnRpY2xlPC9zdHJvbmc+o6yz6c/ztcTBo9fTwOCho7T6se3Bo9fTsb7J7aOssdjQ69O109C1xMr00NSw/MCoo6y1scew19S8urXEPHN0cm9uZz5jeCxjedf4seq6zdHVyatjb2xvcjwvc3Ryb25nPqGjsdjQ68q1z9bBvbj2t723qKOsZCoqcmF3KCm3vbeo0aHU8dT1w7S75tbG19TJ7TxzdHJvbmc+KNSy0M67ucrHt73QzrXIKSwqKmNhY3VsYXRlKCm8xsvjtbHHsMqxvOSjrNfUvLrL+bSmtcTOu9bDPC9zdHJvbmc+oaM8YnIgLz4NCgk8YnIgLz4NCgkmbmJzcDs8L3A+DQo8L2Jsb2NrcXVvdGU+DQo8aDEgaWQ9"控件的使用">控件的使用

控件使用很簡單,首先要實現不同的爆炸效果,需要給ExplosionField傳入不同的ParticleFactory工廠,產生不同的粒子。

ExplosionField explosionField = new ExplosionField(this,new FallingParticleFactory());

然後哪個控件需要爆炸效果,就這樣添加

explosionField.addListener(findViewById(R.id.text));
explosionField.addListener(findViewById(R.id.layout1));

這樣就為兩個控件添加了爆炸效果,注意layout1代表的是一個viewgroup,那麼我們就會為viewgroup中的每個view添加爆炸效果
我們可以想象,在ExplosionField的構造函數中,傳入不同的ParticleFactory,就可以生成不同的爆炸效果。

 

爆炸實現思路

1、獲取當前控件背景bitmap

例如,例子中使用的是imageview,對於這個控件,我提供了一個工具類,可以獲得其背景的Bitmap對象

public static Bitmap createBitmapFromView(View view) {
        view.clearFocus();
        Bitmap bitmap = createBitmapSafely(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888, 1);
        if (bitmap != null) {
            synchronized (sCanvas) {
                Canvas canvas = sCanvas;
                canvas.setBitmap(bitmap);
                view.draw(canvas);
                canvas.setBitmap(null);
            }
        }
        return bitmap;
    }

    public static Bitmap createBitmapSafely(int width, int height, Bitmap.Config config, int retryCount) {
        try {
            return Bitmap.createBitmap(width, height, config);
        } catch (OutOfMemoryError e) {
            e.printStackTrace();
            if (retryCount > 0) {
                System.gc();
                return createBitmapSafely(width, height, config, retryCount - 1);
            }
            return null;
        }
    }

上面的方法,簡而言之,就是將控件的Bitmap對象復制了一份,然後返回。
我們知道,bitmap可以看成是一個像素矩陣,矩陣上面的點,就是一個個帶有顏色的像素,於是我們可以獲取每個點(未必需要每個)的顏色和位置,組裝成一個對象Particle,這麼一來,Particle就代表帶有顏色的點了。

2、將背景bitmap轉換成Particle數組

獲取Bitmap以後,我們交給ParticleFactory進行加工,根據Bitmap生產Particle數組。

public abstract class ParticleFactory {
    public abstract Particle[][] generateParticles(Bitmap bitmap, Rect bound);
}

例如我們來看一個簡單實現類,也是gif圖中,第一個下落效果的工廠類

public class FallingParticleFactory extends ParticleFactory{
    public static final int PART_WH = 8; //默認小球寬高

    public Particle[][] generateParticles(Bitmap bitmap, Rect bound) {
        int w = bound.width();//場景寬度
        int h = bound.height();//場景高度

        int partW_Count = w / PART_WH; //橫向個數
        int partH_Count = h / PART_WH; //豎向個數

        int bitmap_part_w = bitmap.getWidth() / partW_Count;
        int bitmap_part_h = bitmap.getHeight() / partH_Count;

        Particle[][] particles = new Particle[partH_Count][partW_Count];
        Point point = null;
        for (int row = 0; row < partH_Count; row ++) { //行
            for (int column = 0; column < partW_Count; column ++) { //列
                //取得當前粒子所在位置的顏色
                int color = bitmap.getPixel(column * bitmap_part_w, row * bitmap_part_h);

                float x = bound.left + FallingParticleFactory.PART_WH * column;
                float y = bound.top + FallingParticleFactory.PART_WH * row;
                particles[row][column] = new FallingParticle(color,x,y,bound);
            }
        }

        return particles;
    }

}

其中Rect類型的bound,是代表原來View控件的寬高信息
根據我們設定的每個粒子的大小,和控件的寬高,我們就可以計算出,有多少個粒子組成這個控件的背景。
我們取得每個粒子所在位置的顏色,位置,用於生產粒子,這就是FallingParticle。

3、生成爆炸場地,開始爆炸動畫流程

爆炸時需要場地的,也就是繪制粒子的地方,我們通過給當前屏幕,添加一個覆蓋全屏幕的ExplosionField來作為爆炸場地。

public class ExplosionField extends View{
        ...

        /**
         * 給Activity加上全屏覆蓋的ExplosionField
         */
        private void attach2Activity(Activity activity) {
            ViewGroup rootView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);

            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            rootView.addView(this, lp);
        }
        ...
}

爆炸場地添加以後,我們響應控件的點擊事件,開始動畫
首先是震動動畫

 /**
     * 爆破
     * @param view 使得該view爆破
     */
    public void explode(final View view) {
        //防止重復點擊
        if(explosionAnimatorsMap.get(view)!=null&&explosionAnimatorsMap.get(view).isStarted()){
            return;
        }
        //為了正確繪制粒子
        final Rect rect = new Rect();
        view.getGlobalVisibleRect(rect); //得到view相對於整個屏幕的坐標
        int contentTop = ((ViewGroup)getParent()).getTop();
        Rect frame = new Rect();
        ((Activity) getContext()).getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
        int statusBarHeight = frame.top;
        rect.offset(0, -contentTop - statusBarHeight);//去掉狀態欄高度和標題欄高度

        //震動動畫
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f).setDuration(150);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            Random random = new Random();

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                view.setTranslationX((random.nextFloat() - 0.5f) * view.getWidth() * 0.05f);
                view.setTranslationY((random.nextFloat() - 0.5f) * view.getHeight() * 0.05f);
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                explode(view, rect);//爆炸動畫
            }
        });
        animator.start();
    }

震動動畫很簡單,就是x,y方向上,隨機產生一些位移,使原控件發生移動即可。
在震動動畫的最後,調用了爆炸動畫,於是爆炸動畫開始。

private void explode(final View view,Rect rect) {
        final ExplosionAnimator animator = new ExplosionAnimator(this, Utils.createBitmapFromView(view), rect,mParticleFactory);
        explosionAnimators.add(animator);
        explosionAnimatorsMap.put(view, animator);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                //縮小,透明動畫
                view.animate().setDuration(150).scaleX(0f).scaleY(0f).alpha(0f).start();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                view.animate().alpha(1f).setDuration(150).start();

                //動畫結束時從動畫集中移除
                explosionAnimators.remove(animation);
                explosionAnimatorsMap.remove(view);
                animation = null;
            }
        });
        animator.start();
    }

爆炸動畫首先將原控件隱藏
我們來看爆炸動畫的具體實現

public class ExplosionAnimator extends ValueAnimator {
    ...

    public ExplosionAnimator(View view, Bitmap bitmap, Rect bound,ParticleFactory particleFactory) {
        mParticleFactory = particleFactory;
        mPaint = new Paint();
        mContainer = view;
        setFloatValues(0.0f, 1.0f);
        setDuration(DEFAULT_DURATION);
        mParticles = mParticleFactory.generateParticles(bitmap, bound);
    }
    //最重要的方法
    public void draw(Canvas canvas) {
        if(!isStarted()) { //動畫結束時停止
            return;
        }
        //所有粒子運動
        for (Particle[] particle : mParticles) {
            for (Particle p : particle) {
                p.advance(canvas,mPaint,(Float) getAnimatedValue());
            }
        }
        mContainer.invalidate();
    }

    @Override
    public void start() {
        super.start();
        mContainer.invalidate();
    }
}

實現很簡單,就是根據工廠類,生成粒子數組。
而其實質是一個ValueAnimator,在一定時間內,從0數到1。
然後提供了一個draw()方法,方法裡面調用了每個粒子的advance()方法,並且傳入了當前數到的數字(是一個小數)。
advance()方法裡,其實調用了draw()方法和caculate()方法。

上面的實現,其實是一個固定的流程,添加了爆炸場地以後,我們就開始從0數到1,在這個過程中,粒子會根據當前時間,繪制自己的位置,所以粒子的位置,其實是它自己決定的,和流程無關。
也就是說,我們只要用不同的算法,繪制粒子的位置即可,實現了流程和粒子運動的分離。

4、怎麼運動?粒子自己最清楚

舉個例子,gif圖中,下落效果的粒子是這樣運動的

public class FallingParticle extends Particle{
    static Random random = new Random();
    float radius = FallingParticleFactory.PART_WH;
    float alpha = 1.0f;
    Rect mBound;
    /**
     * @param color 顏色
     * @param x
     * @param y
     */
    public FallingParticle(int color, float x, float y,Rect bound) {
        super(color, x, y);
        mBound = bound;
    }
    ...
    protected void caculate(float factor){
        cx = cx + factor * random.nextInt(mBound.width()) * (random.nextFloat() - 0.5f);
        cy = cy + factor * random.nextInt(mBound.height() / 2);

        radius = radius - factor * random.nextInt(2);

        alpha = (1f - factor) * (1 + random.nextFloat());
    }
}

caculate(float factor)方法,根據當前時間,計算粒子的下一個位置
我們可以看到,在這個粒子中,cy也就是豎直方向上是不斷增加的,cx也就是水平方向上,是隨機增加或者減少,這樣就形成了下落效果。
計算出當前位置以後,粒子就將自己繪制出來

protected void draw(Canvas canvas,Paint paint){
        paint.setColor(color);
        paint.setAlpha((int) (Color.alpha(color) * alpha)); //這樣透明顏色就不是黑色了
        canvas.drawCircle(cx, cy, radius, paint);
    }


 

怎麼擴展?

從上面的代碼結構可以看出,爆炸流程和粒子具體運動無關,最重要的是,我們要實現自己的caculate()方法,決定粒子的運動形態
而不同的粒子可以由對應的工廠產生,所以要擴展爆炸特性,只需要定義一個粒子類,和生成粒子類的工廠即可。

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved