登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

磁翻点阵显示效果FlipDotView

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-9-6 11:57:09
Tag:元器件 英文 中文 图片 动画

项目介绍:

前言大半年前在B站看到一系列关于磁翻显示阵列的视频,觉得挺有意思,本来打算用 Arduino 也实现一个,可惜一直都没有找到磁翻阵列的元器件,自己做也不太现实,就搁置了。直到最近在家休息,想起来要不就写个 View 实现一下,花了一个下午,基本算完成了,当然还有很多可以改进的地方,这个 Demo 也只是提供一个思路,有改进意见欢迎留言。



目前支持显示中文字符,图片的显示,英文点阵也可以用相同思路实现(需要字符文件),还可以根据自己需要拓展不同的动画效果。
原理原理很简单,就是ImageView的阵列,每个 ImageView 只有两种状态,用两个图片表示,当需要改变显示图案时,逐行逐列对每个 ImageView 判断,需要改变时 播放翻转动画,改变图片内容,最后记录下当前每个点的显示状态。
实现attrs.xml
[XML] 查看源文件 复制代码
    
      
      
      
      
      
      
  
目前抽取的属性有以上这些:
dotSize 为每个ImageView 的边长(默认为正方形);
dotPadding 为 ImageView 的 Padding 值,四边相同;
widthNum 为显示点阵列数;
heightNum 为行数;
dotDrawable 为 ImageView 状态是显示时的图片;
dotBackDrawable 为 ImageView 状态是不显示时的图片;
soundOn 是磁翻翻动时的声音开关。
另外还有一些参数,比如,动画总时长,动画间隔时长,动画方向等也可以根据需要添加。
activity_main.xml
[Java] 查看源文件 复制代码
...

...
在布局文件中的使用。
FlipDotView.java
[Java] 查看源文件 复制代码
/**
 * Created by reikyZ on 16/8/31.
 */
public class FlipDotView extends LinearLayout {
    Context mContext;

    private float mDotSize;
    private float mDotPadding;
    private int mWidthNum;
    private int mHeightNum;
    private Drawable mDot;
    private Drawable mDotBack;
    private boolean mSoundOn;

    int duration = 50;

    List> oldList = new ArrayList<>();

    SoundPool soundPool;
    HashMap soundPoolMap = new HashMap();

    public FlipDotView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOrientation(LinearLayout.VERTICAL);
        mContext = context;

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FlipDot);

        mDotSize = typedArray.getDimensionPixelSize(R.styleable.FlipDot_dotSize, 50);
        .
        .
        .
        mSoundOn = typedArray.getBoolean(R.styleable.FlipDot_soundOn, true);

        typedArray.recycle();

        initStauts();
        initViews(context, attrs);
        initSound();
    }

    private void initStauts() {
        oldList.clear();
        for (int i = 0; i < mHeightNum; i++) {
            List subList = new ArrayList<>();
            subList.clear();
            for (int j = 0; j < mWidthNum; j++) {
                subList.add(1);
            }
            oldList.add(subList);
        }
    }

    private void initViews(Context context, AttributeSet attrs) {
        for (int i = 0; i < mHeightNum; i++) {
            LinearLayout ll = new LinearLayout(context);
            LayoutParams llParam = new LayoutParams((int) (mWidthNum * mDotSize), (int) mDotSize);
            ll.setLayoutParams(llParam);

            for (int j = 0; j < mWidthNum; j++) {
                ImageView iv = new ImageView(context);
                LayoutParams ivParam = new LayoutParams(
                        Math.round(mDotSize),
                        Math.round(mDotSize));
                iv.setLayoutParams(ivParam);
                int padding = (int) mDotPadding;
                iv.setPadding(padding, padding, padding, padding);
                iv.setImageDrawable(mDot);
                ll.addView(iv);
            }
            addView(ll);
        }
    }

    private void initSound() {
        soundPool = new SoundPool(40, AudioManager.STREAM_MUSIC, 0)

        soundPoolMap.put(0, soundPool.load(mContext, R.raw.click_0, 1));
        soundPoolMap.put(1, soundPool.load(mContext, R.raw.click_1, 2));
        soundPoolMap.put(2, soundPool.load(mContext, R.raw.click_2, 3));
    }
    ...
}
首先根据需求,这个 View 继承了 LinearLayout,在构造函数中初始化一些数据和视图:
initStauts() 预先构造一个二维容器,存放初始化的显示状态和改变后的状态;
initViews(context, attires); View 的主要实现,根据得到的行数、列数以 LinearLayout 为容器,生成 ImageView 的阵列;
initSound() 初始化了 SoundPool, 作为磁翻翻动时的声效,其中存放了几个不同的轻微敲击声效,避免大量连续播放产生的机械感和爆音。
FlipDotView.java
  
[Java] 查看源文件 复制代码
  public void flipFromCenter(final List> list) {[/font]        Random random = new Random();

        int centerX = (mHeightNum - 1) / 2, centerY = (mWidthNum - 1) / 2;

        for (int i = 0; i < mHeightNum; i++) {
            int delay = 0;
            for (int j = 0; j < list.get(i).size(); j++) {
                delay = distance(centerX, centerY, i, j) * 300 + duration * random.nextInt(5);

                final ImageView iv = (ImageView) ((LinearLayout) getChildAt(i)).getChildAt(j);
                final int finalI = i;
                final int finalJ = j;
                if (!oldList.get(i).get(j).equals(list.get(i).get(j))) {

                    iv.postDelayed(new Runnable() {
                        @Override
                        public void run() {

                            Rotate3d rotate = new Rotate3d();
                            rotate.setDuration(200);
                            rotate.setAngle(180);
                            iv.startAnimation(rotate);

                            if (list.get(finalI).get(finalJ) == 1) {
                                iv.setImageDrawable(mDot);
                            } else if (list.get(finalI).get(finalJ) == 0) {
                                iv.setImageDrawable(mDotBack);
                            } else {
                                Log.e("sssss", "ERROR");
                            }
                            if (mSoundOn)
                                new Thread(new Runnable() {
                                    @Override
                                    public void run() {
                                        playSound(mContext, finalJ % soundPoolMap.size(), 0);
                                    }
                                }).start();
                        }
                    }, delay);
                    oldList.get(i).set(j, list.get(i).get(j));
                }
            }
        }
    }
flipFromCenter(list) 实现了效果图中 show Bitmap 的从 FlipDotView 中心向外辐射渐变翻动效果:
1.首先计算出 FlipDotView 中心的行列位置;
2.遍历二维数组,根据坐标到中心的距离,根据每个距离间隔(示例为 300ms),加上一个随机延迟(duration * random.nextInt(5)),获得每个 ImageVIew 的动画延迟 deley;
3.判断目标阵列(list)与当前显示阵列(oldList)中(i,j)位置上的值是否相同,相同则表示不需要翻动操作,继续遍历;
4.如果不同,则调用当前点 ImageView.postDelayed() 方法,将步骤[2]delay传入;
5.判断需要翻转的 list 点状态,播放翻转动画,并设置图片;
6.最后,如果需要播放声音,则播放声效。
另外还有两种显示效果,可以参考稍后的 Demo,流程与以上类似。
使用
[Java] 查看源文件 复制代码
MainActivity.java
...
    FontUtils font;
    String[] strs = {"年", "轻", "天", "真"};

    boolean[][] arr;
    boolean[][] arrStr;
    int offset = 0;

    private void intiData() {
        font = new FontUtils();
        arrStr = font.drawString(this, "哈");
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fdv:
                Toast.makeText(this, "show Pattern", Toast.LENGTH_LONG).show();
                fdv.flipFromLeftTop(getPattern());
                offset++;
                break;
            case R.id.iv:
                Toast.makeText(this, "show Bitmap", Toast.LENGTH_LONG).show();
                flip(R.mipmap.chicken);
                break;
            case R.id.btn:
                Toast.makeText(this, "show Character", Toast.LENGTH_LONG).show();
                showChar();
                break;
        }
    }

    private List> getPattern() {
        List> list = new ArrayList<>();

        for (int i = 0; i < fdv.getmHeightNum(); i++) {
            List l = new ArrayList<>();
            l.clear();
            for (int j = 0; j < fdv.getmWidthNum(); j++) {
                if ((i + j + 1 + offset) % 3 == 0) {
                    l.add(1);
                } else {
                    l.add(0);
                }
            }
            list.add(l);
        }
        return list;
    }


    private void flip(int rsid) {
        int width = fdv.getmWidthNum();
        int height = fdv.getmHeightNum();
        Bitmap bitmap = BitmapUtils.zoomImage(BitmapUtils.readBitMap(this, rsid), width, height);

        arr = BitmapUtils.getBitmapArr(bitmap, arr, width, height);
        fdv.flipFromCenter(getBitmap(arr));
    }

    private List> getBitmap(boolean[][] array) {
        List> list = new ArrayList<>();
        for (int i = 0; i < fdv.getmHeightNum(); i++) {
            List l = new ArrayList<>();
            l.clear();
            for (int j = 0; j < fdv.getmWidthNum(); j++) {
                if (i < array.length &&
                        j < array[i].length &&
                        array[i][j]) {
                    l.add(1);
                } else {
                    l.add(0);
                }
            }
            list.add(l);
        }
        return list;
    }

    private void showChar() {
        fdv.flipFromLeftTop(getCharMap(arrStr));
        arrStr = font.drawString(MainActivity.this, strs[offset % strs.length]);
        offset++;
    }

    private List> getCharMap(boolean[][] array) {
        List> list = new ArrayList<>();

        for (int i = 0; i < fdv.getmHeightNum(); i++) {
            List l = new ArrayList<>();
            l.clear();
            for (int j = 0; j < fdv.getmWidthNum(); j++) {
                if (i < array.length &&
                        j < array[i].length &&
                        array[i][j]) {
                    l.add(1);
                } else {
                    l.add(0);
                }
            }
            list.add(l);
        }
        return list;
    }
...

Demo 中,点击 FlipDotView,下方的 ImageView 与 Button,分别传入一个图形、图片、字符点阵,调用 FlipDotView 的 flipFromLeftTop(list)、 flipFromCenter(list) 方法,改变显示内容。
其中,图片与字符转点阵不是本文重点,有兴趣可以参考 Demo。
补充,FlipDotView 的翻动音效,当翻动数量过多时声音可能会不自然或者无声,可以调整 SoundPool 构造函数的第一个参数,设置成一个比较大的数量,允许可能多的声音对象播放。



相关源码推荐:

我来说两句
所有评论(17)
myself2015 2016-9-6 11:59:50
apkbus好的内容真的很多~赞
回复
Frank_z 2016-9-6 12:05:33
写的真的很不错
回复
suzhouliuyan 2016-9-6 12:05:43
不错不错,楼主辛苦了。。。
回复
tylz 2016-9-6 12:17:40
感谢分享,安卓巴士有你更精彩:lol
回复
w00214777 2016-9-6 12:19:11
学习...学习...
回复
ffg12 2016-9-6 12:22:42
apkbus好的内容真的很多~赞
回复
孙林 2016-9-6 13:06:09
淡定,淡定,淡定……
回复
123下一页
提取码:  下载次数:11 状态:已购或VIP 售价:10(原价:10)金钱 下载权限:限制会员 
1608 0 11
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487



联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表