Android开发之使用OpenGL实现翻书动画

举报
aqi00 发表于 2019/01/14 15:15:45 2019/01/14
【摘要】 上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便地虚拟各种现实生活中的动画效果。本文再来谈谈使用OpenGL实现浏览电子书时候的翻书动画。博主早期的博文《Android开发笔记(十八)书籍翻页动画》已经介绍了如何通过贝塞尔曲线实现翻书动画的过程,不过该方式展示动画时存在卡顿的现象,并且在书页范围之外还会经常拖着长长...

上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便地虚拟各种现实生活中的动画效果。本文再来谈谈使用OpenGL实现浏览电子书时候的翻书动画。


博主早期的博文《Android开发笔记(十八)书籍翻页动画》已经介绍了如何通过贝塞尔曲线实现翻书动画的过程,不过该方式展示动画时存在卡顿的现象,并且在书页范围之外还会经常拖着长长的影子,实在是有碍观瞻。现在有了OpenGL,借助三维图形技术能够让翻书动画显得更为平滑、更加逼真。正好博主偶然间淘到了一个外国人写的OpenGL翻书动画,感觉显示效果还不错,故而简单改造了一下贡献出来,方便有需要的朋友。


通过OpenGL描绘三维图形的原理,可参见前面几篇文章,这里就不啰嗦了,下面直接观看使用OpenGL实现翻书动画的效果。

首先是从前往后翻页的效果动画:

gl_turn1.gif

然后是从后往前翻页的效果动画:

gl_turn2.gif

怎么样,还比较流畅吧,其实就是翻书的时候把图片展示为翻卷的立体效果罢了。

具体的Activity实现代码如下所示:

public class GlTurnActivity extends Activity {
    private final static String TAG = "GlTurnActivity";
    private CurlView cv_content;
    private String[] imgArray = {"000.jpg", "001.jpg", "002.jpg", "003.jpg"};
    private int cv_height;
    private ArrayList<String> imgList = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gl_turn);
        cv_content = (CurlView) findViewById(R.id.cv_content);
        copyImage();
        showImage();
    }
    
    // 把图片文件从assets目录复制到SD卡
    private void copyImage() {
        cv_height = cv_content.getMeasuredHeight();
        String dir = getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS).toString() + "/";
        for (int i=0; i<imgArray.length; i++) {
            String imgName = imgArray[i];
            String imgPath = dir + imgName;
            AssetsUtil.Assets2Sd(this, imgName, imgPath);
            imgList.add(imgPath);
            if (i == 0) {
                Bitmap bitmap = BitmapFactory.decodeFile(imgPath);
                cv_height = (int) (bitmap.getHeight() * 1.2);
            }
        }
    }
    
    // 载入并显示书籍的图片,一开始显示第一页
    private void showImage() {
        LayoutParams params = cv_content.getLayoutParams();
        params.height = cv_height;
        cv_content.setLayoutParams(params);
        cv_content.setPageProvider(new PageProvider(imgList));
        cv_content.setSizeChangedObserver(new SizeChangedObserver());
        cv_content.setCurrentIndex(0);
        cv_content.setBackgroundColor(Color.LTGRAY);
    }
    // 定义页面的提供者,传入图片文件的路径数组
    private class PageProvider implements CurlView.PageProvider {
        private ArrayList<String> mPathArray = new ArrayList<String>();
        
        public PageProvider(ArrayList<String> pathArray) {
            mPathArray = pathArray;
        }
        
        @Override
        public int getPageCount() {
            return mPathArray.size();
        }
        private Bitmap loadBitmap(int width, int height, int index) {
            Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            b.eraseColor(0xFFFFFFFF);
            Canvas c = new Canvas(b);
            //Drawable d = getResources().getDrawable(mBitmapIds[index]);
            Bitmap image = BitmapFactory.decodeFile(mPathArray.get(index));
            BitmapDrawable d = new BitmapDrawable(getResources(), image);
            int margin = 0;
            int border = 1;
            Rect r = new Rect(margin, margin, width - margin, height - margin);
            int imageWidth = r.width() - (border * 2);
            int imageHeight = imageWidth * d.getIntrinsicHeight() / d.getIntrinsicWidth();
            if (imageHeight > r.height() - (border * 2)) {
                imageHeight = r.height() - (border * 2);
                imageWidth = imageHeight * d.getIntrinsicWidth() / d.getIntrinsicHeight();
            }
            r.left += ((r.width() - imageWidth) / 2) - border;
            r.right = r.left + imageWidth + border + border;
            r.top += ((r.height() - imageHeight) / 2) - border;
            r.bottom = r.top + imageHeight + border + border;
            Paint p = new Paint();
            p.setColor(0xFFC0C0C0);
            c.drawRect(r, p);
            r.left += border;
            r.right -= border;
            r.top += border;
            r.bottom -= border;
            d.setBounds(r);
            d.draw(c);
            return b;
        }
        @Override
        public void updatePage(CurlPage page, int width, int height, int index) {
            Bitmap front = loadBitmap(width, height, index);
            page.setTexture(front, CurlPage.SIDE_BOTH);
        }
    }
    // 定义书籍尺寸的变化监听器
    private class SizeChangedObserver implements CurlView.SizeChangedObserver {
        @Override
        public void onSizeChanged(int w, int h) {
            cv_content.setViewMode(CurlView.SHOW_ONE_PAGE);
            cv_content.setMargins(0f, 0f, 0f, 0f);
        }
    }
}


完整的工程代码见博主的github,该工程的demo地址为 https://github.com/aqi00/note/tree/master/ExmOpenGL


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。