精华内容
下载资源
问答
  • Android 提供了AnimationDrawable用于实现帧动画。在动画开始之前,所有帧的图片都被解析并占用内存,一旦动画较复杂帧数较多,在低配置手机上容易发生 OOM。即使不发生 OOM,也会对内存造成不小的压力。下面代码...

    Android 提供了AnimationDrawable用于实现帧动画。在动画开始之前,所有帧的图片都被解析并占用内存,一旦动画较复杂帧数较多,在低配置手机上容易发生 OOM。即使不发生 OOM,也会对内存造成不小的压力。下面代码展示了一个帧数为4的帧动画:

    原生帧动画

    AnimationDrawable drawable = new AnimationDrawable();
    drawable.addFrame(getDrawable(R.drawable.frame1), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame2), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame3), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame4), frameDuration);
    drawable.setOneShot(true);
    
    ImageView ivFrameAnim = ((ImageView) findViewById(R.id.frame_anim));
    ivFrameAnim.setImageDrawable(drawable);
    drawable.start();
    

    有没有什么办法让帧动画的数据逐帧加载,而不是一次性全部加载到内存?SurfaceView就提供了这种能力。

    SurfaceView

    屏幕的显示机制和帧动画类似,也是一帧一帧的连环画,只不过刷新频率很高,感觉像连续的。为了显示一帧,需要经历计算和渲染两个过程,CPU 先计算出这一帧的图像数据并写入内存,然后调用 OpenGL 命令将内存中数据渲染成图像存放在 GPU Buffer 中,显示设备每隔一定时间从 Buffer 中获取图像并显示。

    上述过程中的计算,对于View来说,就好比在主线程遍历 View树 以决定视图画多大(measure),画在哪(layout),画些啥(draw),计算结果存放在内存中,SurfaceFlinger 会调用 OpenGL 命令将内存中的数据渲染成图像存放在 GPU Buffer 中。每隔16.6ms,显示器从 Buffer 中取出帧并显示。所以自定义 View 可以通过重载onMeasure()onLayout()onDraw()来定义帧内容,但不能定义帧刷新频率。

    SurfaceView可以突破这个限制。而且它可以将计算帧数据放到独立的线程中进行。下面是自定义SurfaceView的模版代码:

    public abstract class BaseSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
        public static final int DEFAULT_FRAME_DURATION_MILLISECOND = 50;
        //用于计算帧数据的线程
        private HandlerThread handlerThread;
        private Handler handler;
        //帧刷新频率
        private int frameDuration = DEFAULT_FRAME_DURATION_MILLISECOND;
        //用于绘制帧的画布
        private Canvas canvas;
        private boolean isAlive;
    
        public BaseSurfaceView(Context context) {
            super(context);
            init();
        }
    
        protected void init() {
            getHolder().addCallback(this);
            //设置透明背景,否则SurfaceView背景是黑的
            setBackgroundTransparent();
        }
    
        private void setBackgroundTransparent() {
            getHolder().setFormat(PixelFormat.TRANSLUCENT);
            setZOrderOnTop(true);
        }
    
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            isAlive = true;
            startDrawThread();
        }
    
        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        }
    
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            stopDrawThread();
            isAlive = false;
        }
    
        //停止帧绘制线程
        private void stopDrawThread() {
            handlerThread.quit();
            handler = null;
        }
    
        //启动帧绘制线程
        private void startDrawThread() {
            handlerThread = new HandlerThread("SurfaceViewThread");
            handlerThread.start();
            handler = new Handler(handlerThread.getLooper());
            handler.post(new DrawRunnable());
        }
    
        private class DrawRunnable implements Runnable {
    
            @Override
            public void run() {
                if (!isAlive) {
                    return;
                }
                try {
                    //1.获取画布
                    canvas = getHolder().lockCanvas();
                    //2.绘制一帧
                    onFrameDraw(canvas);
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    //3.将帧数据提交
                    getHolder().unlockCanvasAndPost(canvas);
                    //4.一帧绘制结束
                    onFrameDrawFinish();
                }
                //不停的将自己推送到绘制线程的消息队列以实现帧刷新
                handler.postDelayed(this, frameDuration);
            }
        }
        
        protected abstract void onFrameDrawFinish();
    
        protected abstract void onFrameDraw(Canvas canvas);
    }
    
    • HandlerThread作为独立帧绘制线程,好处是可以通过与其绑定的Handler方便地实现“每隔一段时间刷新”,而且在Surface被销毁的时候可以方便的调用HandlerThread.quit()来结束线程执行的逻辑。
    • DrawRunnable.run()运用模版方法模式定义了绘制算法框架,其中帧绘制逻辑的具体实现被定义成两个抽象方法,推迟到子类中实现,因为绘制的东西是多样的,对于本文来说,绘制的就是一张张图片,所以新建BaseSurfaceView的子类FrameSurfaceView

    逐帧解析 & 及时回收

    public class FrameSurfaceView extends BaseSurfaceView {
        public static final int INVALID_BITMAP_INDEX = Integer.MAX_VALUE;
        private List<Integer> bitmaps = new ArrayList<>();
        //帧图片
        private Bitmap frameBitmap;
        //帧索引
        private int bitmapIndex = INVALID_BITMAP_INDEX;
        private Paint paint = new Paint();
        private BitmapFactory.Options options = new BitmapFactory.Options();
        //帧图片原始大小
        private Rect srcRect;
        //帧图片目标大小
        private Rect dstRect = new Rect();
        private int defaultWidth;
        private int defaultHeight;
    
        public void setDuration(int duration) {
            int frameDuration = duration / bitmaps.size();
            setFrameDuration(frameDuration);
        }
    
        public void setBitmaps(List<Integer> bitmaps) {
            if (bitmaps == null || bitmaps.size() == 0) {
                return;
            }
            this.bitmaps = bitmaps;
            //默认情况下,计算第一帧图片的原始大小
            getBitmapDimension(bitmaps.get(0));
        }
        
        private void getBitmapDimension(Integer integer) {
            final BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(this.getResources(), integer, options);
            defaultWidth = options.outWidth;
            defaultHeight = options.outHeight;
            srcRect = new Rect(0, 0, defaultWidth, defaultHeight);
            requestLayout();
        }
    
        public FrameSurfaceView(Context context) {
            super(context);
        }
        
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            dstRect.set(0, 0, getWidth(), getHeight());
        }
    
        @Override
        protected void onFrameDrawFinish() {
            //在一帧绘制完后,直接回收它
            recycleOneFrame();
        }
    
        //回收帧
        private void recycleOneFrame() {
            if (frameBitmap != null) {
                frameBitmap.recycle();
                frameBitmap = null;
            }
        }
    
        @Override
        protected void onFrameDraw(Canvas canvas) {
            //绘制一帧前需要先清画布,否则所有帧都叠在一起同时显示
            clearCanvas(canvas);
            if (!isStart()) {
                return;
            }
            if (!isFinish()) {
                drawOneFrame(canvas);
            } else {
                onFrameAnimationEnd();
            }
        }
    
        //绘制一帧,是张Bitmap
        private void drawOneFrame(Canvas canvas) {
            frameBitmap = BitmapUtil.decodeOriginBitmap(getResources(), bitmaps.get(bitmapIndex), options);
            canvas.drawBitmap(frameBitmap, srcRect, dstRect, paint);
            bitmapIndex++;
        }
    
        private void onFrameAnimationEnd() {
            reset();
        }
    
        private void reset() {
            bitmapIndex = INVALID_BITMAP_INDEX;
        }
    
        //帧动画是否结束
        private boolean isFinish() {
            return bitmapIndex >= bitmaps.size();
        }
    
        //帧动画是否开始
        private boolean isStart() {
            return bitmapIndex != INVALID_BITMAP_INDEX;
        }
        
        //开始播放帧动画
        public void start() {
            bitmapIndex = 0;
        }
    
        private void clearCanvas(Canvas canvas) {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            canvas.drawPaint(paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
        }
    }
    
    • FrameSurfaceView继承自BaseSurfaceView,所以它复用了基类的绘制框架算法,并且定了自己每一帧的绘制内容:一张Bitmap
    • Bitmap资源 id 通过setBitmaps()传递进来, 绘制一帧解析一张 ,在每一帧绘制完毕后,调用Bitmap.recycle()释放图片 native 内存并去除 java 堆中图片像素数据的引用。这样当 GC 发生时,图片像素数据可以及时被回收。

    一切都是这么地能够自圆其说,我迫不及待地运行代码并打开AndroidStudioProfiler标签页,切换到MEMORY,想用真实内存数据验证下性能。但残酷的事实狠狠地打了下脸。。。多次播放帧动画后,内存占用居然比原生AnimationDrawable还大,而且每播放一次,内存中都会多出 N 个Bitmap对象(N为帧动画总帧数)。唯一令人欣慰的是,手动触发 GC 后帧动画图片能够被回收。(AnimationDrawable中的图片数据不会被 GC)

    原因就在于自作聪明地及时回收,每一帧绘制完后帧数据被回收,那下一帧解析Bitmap时只能新申请一块内存。帧动画每张图片大小是一致的,是不是能复用上一帧Bitmap的内存空间?于是乎有了下面这个版本的FrameSurfaceView

    逐帧解析 & 帧复用

    public class FrameSurfaceView extends BaseSurfaceView {
        public static final int INVALID_BITMAP_INDEX = Integer.MAX_VALUE;
        private List<Integer> bitmaps = new ArrayList<>();
        private Bitmap frameBitmap;
        private int bitmapIndex = INVALID_BITMAP_INDEX;
        private Paint paint = new Paint();
        private BitmapFactory.Options options;
        private Rect srcRect;
        private Rect dstRect = new Rect();
    
        public void setDuration(int duration) {
            int frameDuration = duration / bitmaps.size();
            setFrameDuration(frameDuration);
        }
    
        public void setBitmaps(List<Integer> bitmaps) {
            if (bitmaps == null || bitmaps.size() == 0) {
                return;
            }
            this.bitmaps = bitmaps;
            getBitmapDimension(bitmaps.get(0));
        }
    
        private void getBitmapDimension(Integer integer) {
            final BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(this.getResources(), integer, options);
            defaultWidth = options.outWidth;
            defaultHeight = options.outHeight;
            srcRect = new Rect(0, 0, defaultWidth, defaultHeight);;
        }
    
        public FrameSurfaceView(Context context) {
            super(context);
        }
    
        @Override
        protected void init() {
            super.init();
            //定义解析Bitmap参数为可变类型,这样才能复用Bitmap
            options = new BitmapFactory.Options();
            options.inMutable = true;
        }
    
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            dstRect.set(0, 0, getWidth(), getHeight());
        }
    
        @Override
        protected int getDefaultWidth() {
            return defaultWidth;
        }
    
        @Override
        protected int getDefaultHeight() {
            return defaultHeight;
        }
    
        @Override
        protected void onFrameDrawFinish() {
            //每帧绘制完毕后不再回收
    //        recycle();
        }
    
        public void recycle() {
            if (frameBitmap != null) {
                frameBitmap.recycle();
                frameBitmap = null;
            }
        }
    
        @Override
        protected void onFrameDraw(Canvas canvas) {
            clearCanvas(canvas);
            if (!isStart()) {
                return;
            }
            if (!isFinish()) {
                drawOneFrame(canvas);
            } else {
                onFrameAnimationEnd();
            }
        }
    
        private void drawOneFrame(Canvas canvas) {
            frameBitmap = BitmapUtil.decodeOriginBitmap(getResources(), bitmaps.get(bitmapIndex), options);
            //复用上一帧Bitmap的内存
            options.inBitmap = frameBitmap;
            canvas.drawBitmap(frameBitmap, srcRect, dstRect, paint);
            bitmapIndex++;
        }
    
        private void onFrameAnimationEnd() {
            reset();
        }
    
        private void reset() {
            bitmapIndex = INVALID_BITMAP_INDEX;
        }
    
        private boolean isFinish() {
            return bitmapIndex >= bitmaps.size();
        }
    
        private boolean isStart() {
            return bitmapIndex != INVALID_BITMAP_INDEX;
        }
    
        public void start() {
            bitmapIndex = 0;
        }
    
        private void clearCanvas(Canvas canvas) {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            canvas.drawPaint(paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
        }
    }
    
    • Bitmap的解析参数inBitmap设置为已经成功解析的Bitmap对象以实现复用。

    这一次不管重新播放多少次帧动画,内存中Bitmap数量只会增加1,因为只在解析第一张图片是分配了内存。而这块内存可以在FrameSurfaceView生命周期结束时手动调用recycle()回收。

     

    展开全文
  • —— 优化帧动画之SurfaceView逐帧解析 大图做帧动画卡顿?不存在的!—— 优化帧动画之SurfaceView 滑动窗口式帧复用 Android 提供了AnimationDrawable用于实现帧动画。在动画开始之前,所有帧的图片都被解析并...

    这是帧动画系列的第一篇,系列文章目录如下:

    1. 帧动画OOM?不存在的!—— 优化帧动画之SurfaceView逐帧解析
    2. 大图做帧动画卡顿?不存在的!—— 优化帧动画之SurfaceView 滑动窗口式帧复用

    Android 提供了AnimationDrawable用于实现帧动画。在动画开始之前,所有帧的图片都被解析并占用内存,一旦动画较复杂帧数较多,在低配置手机上容易发生 OOM。即使不发生 OOM,也会对内存造成不小的压力。下面代码展示了一个帧数为4的帧动画:

    原生帧动画

    AnimationDrawable drawable = new AnimationDrawable();
    drawable.addFrame(getDrawable(R.drawable.frame1), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame2), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame3), frameDuration);
    drawable.addFrame(getDrawable(R.drawable.frame4), frameDuration);
    drawable.setOneShot(true);
    
    ImageView ivFrameAnim = ((ImageView) findViewById(R.id.frame_anim));
    ivFrameAnim.setImageDrawable(drawable);
    drawable.start();
    复制代码

    有没有什么办法让帧动画的数据逐帧加载,而不是一次性全部加载到内存?SurfaceView就提供了这种能力。

    SurfaceView

    屏幕的显示机制和帧动画类似,也是一帧一帧的连环画,只不过刷新频率很高,感觉像连续的。为了显示一帧,需要经历计算和渲染两个过程,CPU 先计算出这一帧的图像数据并写入内存,然后调用 OpenGL 命令将内存中数据渲染成图像存放在 GPU Buffer 中,显示设备每隔一定时间从 Buffer 中获取图像并显示。

    上述过程中的计算,对于View来说,就好比在主线程遍历 View树 以决定视图画多大(measure),画在哪(layout),画些啥(draw),计算结果存放在内存中,SurfaceFlinger 会调用 OpenGL 命令将内存中的数据渲染成图像存放在 GPU Buffer 中。每隔16.6ms,显示器从 Buffer 中取出帧并显示。所以自定义 View 可以通过重载onMeasure()onLayout()onDraw()来定义帧内容,但不能定义帧刷新频率。

    SurfaceView可以突破这个限制。而且它可以将计算帧数据放到独立的线程中进行。下面是自定义SurfaceView的模版代码:

    public abstract class BaseSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
        public static final int DEFAULT_FRAME_DURATION_MILLISECOND = 50;
        //用于计算帧数据的线程
        private HandlerThread handlerThread;
        private Handler handler;
        //帧刷新频率
        private int frameDuration = DEFAULT_FRAME_DURATION_MILLISECOND;
        //用于绘制帧的画布
        private Canvas canvas;
        private boolean isAlive;
    
        public BaseSurfaceView(Context context) {
            super(context);
            init();
        }
    
        protected void init() {
            getHolder().addCallback(this);
            //设置透明背景,否则SurfaceView背景是黑的
            setBackgroundTransparent();
        }
    
        private void setBackgroundTransparent() {
            getHolder().setFormat(PixelFormat.TRANSLUCENT);
            setZOrderOnTop(true);
        }
    
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            isAlive = true;
            startDrawThread();
        }
    
        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        }
    
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            stopDrawThread();
            isAlive = false;
        }
    
        //停止帧绘制线程
        private void stopDrawThread() {
            handlerThread.quit();
            handler = null;
        }
    
        //启动帧绘制线程
        private void startDrawThread() {
            handlerThread = new HandlerThread("SurfaceViewThread");
            handlerThread.start();
            handler = new Handler(handlerThread.getLooper());
            handler.post(new DrawRunnable());
        }
    
        private class DrawRunnable implements Runnable {
    
            @Override
            public void run() {
                if (!isAlive) {
                    return;
                }
                try {
                    //1.获取画布
                    canvas = getHolder().lockCanvas();
                    //2.绘制一帧
                    onFrameDraw(canvas);
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    //3.将帧数据提交
                    getHolder().unlockCanvasAndPost(canvas);
                    //4.一帧绘制结束
                    onFrameDrawFinish();
                }
                //不停的将自己推送到绘制线程的消息队列以实现帧刷新
                handler.postDelayed(this, frameDuration);
            }
        }
        
        protected abstract void onFrameDrawFinish();
    
        protected abstract void onFrameDraw(Canvas canvas);
    }
    复制代码
    • HandlerThread作为独立帧绘制线程,好处是可以通过与其绑定的Handler方便地实现“每隔一段时间刷新”,而且在Surface被销毁的时候可以方便的调用HandlerThread.quit()来结束线程执行的逻辑。
    • DrawRunnable.run()运用模版方法模式定义了绘制算法框架,其中帧绘制逻辑的具体实现被定义成两个抽象方法,推迟到子类中实现,因为绘制的东西是多样的,对于本文来说,绘制的就是一张张图片,所以新建BaseSurfaceView的子类FrameSurfaceView

    逐帧解析 & 及时回收

    public class FrameSurfaceView extends BaseSurfaceView {
        public static final int INVALID_BITMAP_INDEX = Integer.MAX_VALUE;
        private List<Integer> bitmaps = new ArrayList<>();
        //帧图片
        private Bitmap frameBitmap;
        //帧索引
        private int bitmapIndex = INVALID_BITMAP_INDEX;
        private Paint paint = new Paint();
        private BitmapFactory.Options options = new BitmapFactory.Options();
        //帧图片原始大小
        private Rect srcRect;
        //帧图片目标大小
        private Rect dstRect = new Rect();
        private int defaultWidth;
        private int defaultHeight;
    
        public void setDuration(int duration) {
            int frameDuration = duration / bitmaps.size();
            setFrameDuration(frameDuration);
        }
    
        public void setBitmaps(List<Integer> bitmaps) {
            if (bitmaps == null || bitmaps.size() == 0) {
                return;
            }
            this.bitmaps = bitmaps;
            //默认情况下,计算第一帧图片的原始大小
            getBitmapDimension(bitmaps.get(0));
        }
        
        private void getBitmapDimension(Integer integer) {
            final BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(this.getResources(), integer, options);
            defaultWidth = options.outWidth;
            defaultHeight = options.outHeight;
            srcRect = new Rect(0, 0, defaultWidth, defaultHeight);
            requestLayout();
        }
    
        public FrameSurfaceView(Context context) {
            super(context);
        }
        
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            dstRect.set(0, 0, getWidth(), getHeight());
        }
    
        @Override
        protected void onFrameDrawFinish() {
            //在一帧绘制完后,直接回收它
            recycleOneFrame();
        }
    
        //回收帧
        private void recycleOneFrame() {
            if (frameBitmap != null) {
                frameBitmap.recycle();
                frameBitmap = null;
            }
        }
    
        @Override
        protected void onFrameDraw(Canvas canvas) {
            //绘制一帧前需要先清画布,否则所有帧都叠在一起同时显示
            clearCanvas(canvas);
            if (!isStart()) {
                return;
            }
            if (!isFinish()) {
                drawOneFrame(canvas);
            } else {
                onFrameAnimationEnd();
            }
        }
    
        //绘制一帧,是张Bitmap
        private void drawOneFrame(Canvas canvas) {
            frameBitmap = BitmapUtil.decodeOriginBitmap(getResources(), bitmaps.get(bitmapIndex), options);
            canvas.drawBitmap(frameBitmap, srcRect, dstRect, paint);
            bitmapIndex++;
        }
    
        private void onFrameAnimationEnd() {
            reset();
        }
    
        private void reset() {
            bitmapIndex = INVALID_BITMAP_INDEX;
        }
    
        //帧动画是否结束
        private boolean isFinish() {
            return bitmapIndex >= bitmaps.size();
        }
    
        //帧动画是否开始
        private boolean isStart() {
            return bitmapIndex != INVALID_BITMAP_INDEX;
        }
        
        //开始播放帧动画
        public void start() {
            bitmapIndex = 0;
        }
    
        private void clearCanvas(Canvas canvas) {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            canvas.drawPaint(paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
        }
    }
    复制代码
    • FrameSurfaceView继承自BaseSurfaceView,所以它复用了基类的绘制框架算法,并且定了自己每一帧的绘制内容:一张Bitmap
    • Bitmap资源 id 通过setBitmaps()传递进来, 绘制一帧解析一张 ,在每一帧绘制完毕后,调用Bitmap.recycle()释放图片 native 内存并去除 java 堆中图片像素数据的引用。这样当 GC 发生时,图片像素数据可以及时被回收。

    一切都是这么地能够自圆其说,我迫不及待地运行代码并打开AndroidStudioProfiler标签页,切换到MEMORY,想用真实内存数据验证下性能。但残酷的事实狠狠地打了下脸。。。多次播放帧动画后,内存占用居然比原生AnimationDrawable还大,而且每播放一次,内存中都会多出 N 个Bitmap对象(N为帧动画总帧数)。唯一令人欣慰的是,手动触发 GC 后帧动画图片能够被回收。(AnimationDrawable中的图片数据不会被 GC)

    原因就在于自作聪明地及时回收,每一帧绘制完后帧数据被回收,那下一帧解析Bitmap时只能新申请一块内存。帧动画每张图片大小是一致的,是不是能复用上一帧Bitmap的内存空间?于是乎有了下面这个版本的FrameSurfaceView

    逐帧解析 & 帧复用

    public class FrameSurfaceView extends BaseSurfaceView {
        public static final int INVALID_BITMAP_INDEX = Integer.MAX_VALUE;
        private List<Integer> bitmaps = new ArrayList<>();
        private Bitmap frameBitmap;
        private int bitmapIndex = INVALID_BITMAP_INDEX;
        private Paint paint = new Paint();
        private BitmapFactory.Options options;
        private Rect srcRect;
        private Rect dstRect = new Rect();
    
        public void setDuration(int duration) {
            int frameDuration = duration / bitmaps.size();
            setFrameDuration(frameDuration);
        }
    
        public void setBitmaps(List<Integer> bitmaps) {
            if (bitmaps == null || bitmaps.size() == 0) {
                return;
            }
            this.bitmaps = bitmaps;
            getBitmapDimension(bitmaps.get(0));
        }
    
        private void getBitmapDimension(Integer integer) {
            final BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(this.getResources(), integer, options);
            defaultWidth = options.outWidth;
            defaultHeight = options.outHeight;
            srcRect = new Rect(0, 0, defaultWidth, defaultHeight);;
        }
    
        public FrameSurfaceView(Context context) {
            super(context);
        }
    
        @Override
        protected void init() {
            super.init();
            //定义解析Bitmap参数为可变类型,这样才能复用Bitmap
            options = new BitmapFactory.Options();
            options.inMutable = true;
        }
    
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            dstRect.set(0, 0, getWidth(), getHeight());
        }
    
        @Override
        protected int getDefaultWidth() {
            return defaultWidth;
        }
    
        @Override
        protected int getDefaultHeight() {
            return defaultHeight;
        }
    
        @Override
        protected void onFrameDrawFinish() {
            //每帧绘制完毕后不再回收
    //        recycle();
        }
    
        public void recycle() {
            if (frameBitmap != null) {
                frameBitmap.recycle();
                frameBitmap = null;
            }
        }
    
        @Override
        protected void onFrameDraw(Canvas canvas) {
            clearCanvas(canvas);
            if (!isStart()) {
                return;
            }
            if (!isFinish()) {
                drawOneFrame(canvas);
            } else {
                onFrameAnimationEnd();
            }
        }
    
        private void drawOneFrame(Canvas canvas) {
            frameBitmap = BitmapUtil.decodeOriginBitmap(getResources(), bitmaps.get(bitmapIndex), options);
            //复用上一帧Bitmap的内存
            options.inBitmap = frameBitmap;
            canvas.drawBitmap(frameBitmap, srcRect, dstRect, paint);
            bitmapIndex++;
        }
    
        private void onFrameAnimationEnd() {
            reset();
        }
    
        private void reset() {
            bitmapIndex = INVALID_BITMAP_INDEX;
        }
    
        private boolean isFinish() {
            return bitmapIndex >= bitmaps.size();
        }
    
        private boolean isStart() {
            return bitmapIndex != INVALID_BITMAP_INDEX;
        }
    
        public void start() {
            bitmapIndex = 0;
        }
    
        private void clearCanvas(Canvas canvas) {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            canvas.drawPaint(paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
        }
    }
    复制代码
    • Bitmap的解析参数inBitmap设置为已经成功解析的Bitmap对象以实现复用。

    这一次不管重新播放多少次帧动画,内存中Bitmap数量只会增加1,因为只在解析第一张图片是分配了内存。而这块内存可以在FrameSurfaceView生命周期结束时手动调用recycle()回收。

    talk is cheap, show me the code

    为了更清晰的展示,上述代码段省略了一些和主题无关的自定义 View 细节,完整的代码可以点击这里

    展开全文
  • 博主声明: 转载请在开头附加本文链接及作者信息,并... Android 提供了一种简单而好用的帧动画,所谓帧动画,就是一帧一帧的播放,你可以想象一下民国时期那种电影片的效果,它用的就是一帧一帧的播放,说白了就是...

    博主声明:

    转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主 威威喵 原创,请多支持与指教。

    本文首发于此   博主威威喵  |  博客主页https://blog.csdn.net/smile_running

        Android 提供了一种简单而好用的帧动画,所谓帧动画,就是一帧一帧的播放,你可以想象一下民国时期那种电影片的效果,它用的就是一帧一帧的播放,说白了就是一张一张图片的播放,若两张图片切换的时间间隔非常短的话,我们眼睛看上去就会形成一种连贯性的动画,这就是称为帧动画。

        当然了,前面说到的帧动画,其实是播放一张张的图片。所以呢,我们做这个效果之前,肯定需要把一个图片序列材料给准备好。我可以提供一个我自己的制作方式,图片序列咱们不好搞,直接去搜那种动态 gif 的图片,然后我们用 gif 分解器,把这些动画分解成一张张图片即可。

        好了,上面介绍了帧动画,还有如何制作素材。下面,我们来看看要实现的效果图吧。

         这种帧动画在很多应用中都会有,比如美团的加载动画,京东的加载动画等等,上面的效果也就是我从网上搜罗来的一个 gif 图片,然后分解掉得来的,个人感觉这个有点可爱,傻傻的,哈哈,所以选了这个。

        首先,第一步要导入我们的图片,不用多说了。接下来,在 res -> drawable 下面建立的 anim.xml 的资源文件,我们需要在此设置图片的序列及每一帧持续的时间。

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">  // 表示循环播放
    
        <item android:drawable="@drawable/load0" android:duration="50"/>
        <item android:drawable="@drawable/load1" android:duration="50"/>
        <item android:drawable="@drawable/load2" android:duration="50" />
        <item android:drawable="@drawable/load3" android:duration="50"/>
        <item android:drawable="@drawable/load4" android:duration="50"/>
        <item android:drawable="@drawable/load5" android:duration="50"/>
        <item android:drawable="@drawable/load6" android:duration="50"/>
        <item android:drawable="@drawable/load7" android:duration="50"/>
        <item android:drawable="@drawable/load8" android:duration="50"/>
        <item android:drawable="@drawable/load9" android:duration="50"/>
        <item android:drawable="@drawable/load10" android:duration="50"/>
    
        <item android:drawable="@drawable/load11" android:duration="50"/>
        <item android:drawable="@drawable/load12" android:duration="50"/>
        <item android:drawable="@drawable/load13" android:duration="50"/>
        <item android:drawable="@drawable/load14" android:duration="50"/>
        <item android:drawable="@drawable/load15" android:duration="50"/>
        <item android:drawable="@drawable/load16" android:duration="50"/>
        <item android:drawable="@drawable/load17" android:duration="50"/>
        <item android:drawable="@drawable/load18" android:duration="50"/>
        <item android:drawable="@drawable/load19" android:duration="50"/>
        <item android:drawable="@drawable/load20" android:duration="50"/>
    
        <item android:drawable="@drawable/load21" android:duration="50"/>
        <item android:drawable="@drawable/load22" android:duration="50"/>
        <item android:drawable="@drawable/load23" android:duration="50"/>
        <item android:drawable="@drawable/load24" android:duration="50"/>
        <item android:drawable="@drawable/load25" android:duration="50"/>
        <item android:drawable="@drawable/load26" android:duration="50"/>
        <item android:drawable="@drawable/load27" android:duration="50"/>
        <item android:drawable="@drawable/load28" android:duration="50"/>
        <item android:drawable="@drawable/load29" android:duration="50"/>
        <item android:drawable="@drawable/load30" android:duration="50"/>
    
        <item android:drawable="@drawable/load31" android:duration="50"/>
        <item android:drawable="@drawable/load32" android:duration="50"/>
        <item android:drawable="@drawable/load33" android:duration="50"/>
        <item android:drawable="@drawable/load34" android:duration="50"/>
        <item android:drawable="@drawable/load35" android:duration="50"/>
        <item android:drawable="@drawable/load36" android:duration="50"/>
        <item android:drawable="@drawable/load37" android:duration="50"/>
        <item android:drawable="@drawable/load38" android:duration="50"/>
        <item android:drawable="@drawable/load39" android:duration="50"/>
        <item android:drawable="@drawable/load40" android:duration="50"/>
    
        <item android:drawable="@drawable/load41" android:duration="50"/>
        <item android:drawable="@drawable/load42" android:duration="50"/>
        <item android:drawable="@drawable/load43" android:duration="50"/>
        <item android:drawable="@drawable/load44" android:duration="50"/>
        <item android:drawable="@drawable/load45" android:duration="50"/>
        <item android:drawable="@drawable/load46" android:duration="50"/>
        <item android:drawable="@drawable/load47" android:duration="50"/>
        <item android:drawable="@drawable/load48" android:duration="50"/>
        <item android:drawable="@drawable/load49" android:duration="50"/>
        <item android:drawable="@drawable/load50" android:duration="50"/>
    
        <item android:drawable="@drawable/load51" android:duration="50"/>
        <item android:drawable="@drawable/load52" android:duration="50"/>
        <item android:drawable="@drawable/load53" android:duration="50"/>
        <item android:drawable="@drawable/load54" android:duration="50"/>
        <item android:drawable="@drawable/load55" android:duration="50"/>
        <item android:drawable="@drawable/load56" android:duration="50"/>
        <item android:drawable="@drawable/load57" android:duration="50"/>
        <item android:drawable="@drawable/load58" android:duration="50"/>
        <item android:drawable="@drawable/load59" android:duration="50"/>
        <item android:drawable="@drawable/load60" android:duration="50"/>
    
        <item android:drawable="@drawable/load61" android:duration="50"/>
        <item android:drawable="@drawable/load62" android:duration="50"/>
        <item android:drawable="@drawable/load63" android:duration="50"/>
        <item android:drawable="@drawable/load64" android:duration="50"/>
        <item android:drawable="@drawable/load65" android:duration="50"/>
        <item android:drawable="@drawable/load66" android:duration="50"/>
        <item android:drawable="@drawable/load67" android:duration="50"/>
        <item android:drawable="@drawable/load68" android:duration="50"/>
        <item android:drawable="@drawable/load69" android:duration="50"/>
        <item android:drawable="@drawable/load70" android:duration="50"/>
        <item android:drawable="@drawable/load71" android:duration="50"/>
    
    </animation-list>

        我这里把那个 gif 图片分解了,里面居然是 70 几张图片合成的,算了,既然选择了你,还是得搞一下。不过这里得说明一下,不建议图片太多,10 张以内就好了,而且图片也别太大了,容易导致 oom 的出现,它这个帧动画是把图片一帧一帧的绘制出来的,而我们放入的是 ImageView 里面,没做优化处理的话,不太行。

        接下来,在主布局里面放一个 ImageView,背景设置为我们刚刚创建的 anim.xml 文件

        <ImageView
            android:id="@+id/loading"
            android:layout_width="320dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="@drawable/loading_anim" />

        好了,到了这一步,它还是不会自动播放的。接下来,我们需要用代码开启动画效果,很简单

            ImageView loading = findViewById(R.id.loading);
            AnimationDrawable animationDrawable = (AnimationDrawable) loading.getBackground();
            animationDrawable.start();

        我们拿到动画的实例,然后 start() 就好了,现在运行一下就会产生动画效果了。这里要注意一下,图片的序列千万别搞错了,不然动画会变成畸形的,错乱的。

    展开全文
  • 帧动画加载大量图片OOM的解决办法

    千次阅读 2016-06-24 14:08:26
    * 所以动画时间间隔需要缩短,暂时没想到更好的办法,只是 * 把时间间隔缩短为原来的65%比较接近我们期望的动画时长 * @return */ private long getDelayTime () { if (mSpecificDuration) return ...

    这是在别人代码基础上更改的。
    代码如下:

    
    public class SceneAnimation {
    
        /**
         * target imageView
         */
        private ImageView mImageView;
    
        /**
         * frame resources
         */
        private int[] mFrameRes = null;
    
        /**
         * different duration in frame
         */
        private int[] mDurations = null;
    
        /**
         * specific duration
         */
        private long mDuration;
    
        private int mCurrentFrame;
    
        private boolean mStop;
    
        private boolean mRepeat;
    
        private boolean mSpecificDuration;
    
        private Runnable mAction = null;
    
        private OnFramePlayListener mListener;
    
        public interface OnFramePlayListener{
    
            void onFrame(int frame);
    
            void onEnd();
        }
    
    
        public SceneAnimation(ImageView pImageView, int[] pFrameRes, int pDuration) {
            initialize(pImageView, pFrameRes);
            mDuration = pDuration;
            mSpecificDuration = true;
        }
    
        public SceneAnimation(ImageView pImageView, int[] pFrameRes, int[] pDurations) {
            initialize(pImageView, pFrameRes);
            mDurations = pDurations;
            mSpecificDuration = false;
        }
    
        private void initialize(ImageView pImageView, int[] pFrameRes) {
            mImageView = pImageView;
            mFrameRes = pFrameRes;
            mCurrentFrame = 0;
            mStop = false;
            mRepeat = false;
        }
    
        /**
         * @return the total time of animation
         */
        public long getTotalTime(){
            if(mFrameRes != null) {
                if (mSpecificDuration) {
                    return mDuration * (mFrameRes.length - 1);
                } else if(mDurations != null){
                    long totalTime = 0;
                    for (int i = 0; i < mDurations.length; i++) {
                        totalTime += mDurations[i];
                    }
                    return totalTime;
                }else{
                    return 0;
                }
            }
            return 0;
        }
    
        public void setRepeat(boolean mRepeat) {
            this.mRepeat = mRepeat;
        }
    
    
        public void setOnFramePlayListener(OnFramePlayListener mListener) {
            this.mListener = mListener;
        }
    
        @SuppressWarnings("deprecation")
        private void setBackground(View view, Drawable drawable)
        {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN)
            {
                view.setBackgroundDrawable(drawable);
            } else {
                view.setBackground(drawable);
            }
        }
    
    
        private void doPlay(){
            if(null == mImageView)
                return;
    
            mImageView.postDelayed(mAction = new Runnable()
            {
                public void run() {
    
                    if(mCurrentFrame < mFrameRes.length && !mStop) {
    
                        setBackground(mImageView,
                                ContextCompat.getDrawable(mImageView.getContext(), mFrameRes[mCurrentFrame]));
    
                        if(mListener != null){
    
                            mListener.onFrame(mCurrentFrame);
                            if(mCurrentFrame == mFrameRes.length - 1){
                                mListener.onEnd();
                            }
    
                        }
    
                        mCurrentFrame++;
                        doPlay();
    
                    }else if(mRepeat && !mStop){
    
                        startPlay();
                    }
                }
    
            }, getDelayTime());
        }
    
    
        /**
         * 由于都是大图片所以动画播放过程中会频繁gc
         * 所以动画时间间隔需要缩短,暂时没想到更好的办法,只是
         * 把时间间隔缩短为原来的65%比较接近我们期望的动画时长
         * @return
         */
        private long getDelayTime() {
            if(mSpecificDuration)
                return (long)(mDuration * 0.65d);
            else{
                if(mCurrentFrame - 1 < mDurations.length){
                    return (long)(mDurations[mCurrentFrame - 1] * 0.65d);
                }else{
                    return 0;
                }
            }
        }
    
    
        public void startPlay(){
            if(mFrameRes != null) {
                mCurrentFrame = 0;
                setBackground(mImageView,
                        ContextCompat.getDrawable(mImageView.getContext(), mFrameRes[mCurrentFrame]));
                mCurrentFrame++;
                doPlay();
            }
        }
    
        /**
         * 停止动画,释放资源
         */
        public void stopImmediately() {
          if(mImageView != null){
              mStop = true;
              if(mAction != null) {
                  mImageView.removeCallbacks(mAction);
                  mAction = null;
              }
          }
        }
    
    }
    
    展开全文
  • 此DEMO主要是针对帧动画,实现方式有三种:1、FrameAnimation+xml;2、代码中加载每一帧;3、自定义动画,采用LruCache对每一帧图片进行内存优化防止图片oom。
  • android 动画有几种不同的类型,其中有一种是帧动画。实现它的方式也有几种,一种是直接作出 gif 或 webP 格式的图片,直接播放;一种则是 android 系统提供封装好的方法,将动画定义在 xml 中,用 animation-list ...
  • QQ群的送礼物功能需要加载几十张图然后做帧动画,但是多张图片加载造成了非常大的性能开销,导致图片开始加载到真正播放动画的时间间隔比较长。所以需要研究一些优化方案提升加载图片和帧动画的性能。
  • Android开发之逐帧动画优化

    千次阅读 2017-04-04 19:46:57
    Android上如果使用逐帧动画的话,可以很方便地使用AnimationDrawable,无论是先声明xml还是直接代码里设置,都是几分钟的事,但使用AnimationDrawable有一个致命的弱点,那就是需要一次性加载所有图片到内存,万一帧...
  • 使用多张图片做帧动画的性能优化

    千次阅读 2017-06-09 18:00:09
    所以需要研究一些优化方案提升加载图片和帧动画的性能。 原理分析 iOS系统从磁盘加载一张图片,使用UIImageView显示到屏幕上,需要经过以下步骤: 从磁盘拷贝图片数据到内核缓冲区。 从内核缓冲区...
  • Android 系统提供了两种帧动画实现方式 1.xml 文件定义 animation-list 2.java 文件设置 AnimationDrawable # [缺点] - 系统会把每一帧图片读取到内存中 - 当图片很多且每张都很大的情况下,容易出现卡顿,甚至 ...
  • 普通实现 实现一个帧动画,最先想到的就是用animation-list将全部图片按顺序放入,并设置时间间隔和播放模式。然后将该drawable设置给ImageView或Progressbar就OK了。 首先创建帧动画资源文件drawable/anim.xml,...
  • iOS - 帧动画优化

    2018-04-03 14:17:00
    腾讯帧动画优化方案 基础内存优化 1.I/O性能优化 减少I/O次数是性能优化的关键点: 将零碎的内容作为一个整理进行写入 使用合适的I/O操作API 使用合适的线程 使用NSCache做缓存能够减少I/O 1-1.NSCache 自动清理...
  • 本文提供一个优化网页性能的大概思路,具体操作网上资料很多。缓存优化性能优化第一步,便是管理好页面的缓存,避免重复下载资源。否则,即增加服务器压力,又折磨用户的钱包。浏览器缓存机制访问页面,请求各种资源...
  • Laya 分帧加载优化

    2019-09-24 07:44:23
    Laya 分帧加载优化 @author ixenos Flash中的EnterFrame事件在Laya中等同于Laya.timer.frameLoop(1,...) 1 Laya.timer.frameLoop(1, this, onFrame); 2 3 var curIdx:int = 0; 4 5 var st:Number ...
  • 优化加载gif动画

    千次阅读 2016-12-26 15:52:47
    项目开发中都会用到各种加载进度的动画,有几下几种方式可以参考: 1、使用animation-list一的播放出来 最简单的方式是将设计同学给的png序列直接放到一个 animation-list中 然后直接,放在设置为...
  • 解决animation-list加载多张帧动画导致OOM的问题---surfaceview用法
  • cocos2dx升级spine3.8。解决多个相同动画同时加载卡顿的问题,自测可用,200个相同动画瞬间加载完成,不卡
  • 如题,最近要实现一个微信小程序播放序列帧动画的功能。 1、用setInterval计时,依次累加序列帧下标。canvas渲染序列帧图片,序列帧图片直接放到云上,发现现在太耗时了,网络不好的情况下,图片没下载好,下标已经...
  • 所以需要研究一些优化方案提升加载图片和帧动画的性能。 ##原理分析iOS系统从磁盘加载一张图片,使用UIImageView显示到屏幕上,需要经过以下步骤: 从磁盘拷贝图片数据到内核缓冲区。从内核缓
  • 最近的项目用SpriteRenderer+Animation的方式播放序列,我那项目序列很多,项目大小差不多40G。。。 unity编辑器里是可以正常播放没问题的,但打包出去后,发现一闪一闪的,什么玩意啊。。。然后搜索了一下文章...
  • 帧动画的多种实现方式与性能对比

    万次阅读 2018-07-11 10:42:47
    前面我分享了《Web动画形式》,各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述,接下来我们就来看看帧动画有哪些打开方式吧。...
  • 最近做的项目,客户临时要求改版,我真的是最烦这个,要求跟换主页面...帧动画方案:  缺点:1.好像只能imageview才能播放帧动画   2.容易OOM(播三四张还行,播九十张以上,且,每张都在300k左右就有OOM问题)  
  • 关键帧动画

    千次阅读 2015-10-09 09:47:47
    关键帧动画 熟悉flash开发的朋友对于关键帧动画应该不陌生,这种动画方式在flash开发中经常用到。关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各个状态间动画如何进行则由系统自动运算补充(每...
  • android 解决帧动画卡顿情况

    千次阅读 2018-05-22 22:12:50
    最近公司有一个项目需求,需要在一个特定的...但是在公司的设备上就非常卡顿,也就是低端机,由于图片过多,效果异常卡顿,所以在这篇文章中就说一下帧动画优化问题。 首先还是先来看一下android原生的帧动...
  • 最近有一个项目,有很多组帧动画,每一组大概60帧左右,再不同的状态下回调不同的接口,动态的切换到不同的帧动画,但是不管每一帧只有10K左右,使用软引用,提前加载帧动画,这些操作都试过了,但是再切换动画的...
  • CSS3动画之逐帧动画

    2018-07-16 11:07:40
    什么是逐帧动画要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画。看一下维基百科中的定义:定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。简而言之,实现逐帧动画...
  • 什么是逐帧动画? 首先看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。 简单的来说就是: 以一定的速度切换几张连续图像,让它动起来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,275
精华内容 6,510
关键字:

优化帧动画加载