Android加速度传感器实现钟摆效果 类似于Houzz飘带界面

先看效果图:飘带会随着手机的旋转进行飘动


飘带.gif

代码量比较少,所有就都写一块啦,哈哈!直接贴代码了,说明直接看注释就OK。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yubaokang.houzz_viewtaganim.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/bg"/>
</RelativeLayout>
/**
 * 锚点对象
 * Created by Hank on 2016/4/22.
 */
public class MarkDataList {

    private int id;
    private int x;
    private int y;

    public MarkDataList(int id, int x, int y) {
        this.id = id;
        this.x = x;
        this.y = y;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public int getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }
}
/**
 * https://gitlab.com/yubaokang/Houzz_ViewTagAnim
 * 动态添加view,根据加速度传感器旋转,摆动,类似于Houzz app的飘带动画
 */
public class MainActivity extends AppCompatActivity implements SensorEventListener {

    private RelativeLayout container;
    private List<ImageView> imageViewList;

    long lastTime;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        container = (RelativeLayout) findViewById(R.id.container);
        imageViewList = new ArrayList<>();
        initSensor();
        lastTime = System.currentTimeMillis();
    }


    @Override
    protected void onResume() {
        super.onResume();
        addView(container, getDatas());
    }

    /**
     * 初始化数据-模拟
     *
     * @return
     */
    public List<MarkDataList> getDatas() {
        List<MarkDataList> datas = new ArrayList<>();
        datas.add(new MarkDataList(1, 100, 100));
        datas.add(new MarkDataList(2, 200, 200));
        datas.add(new MarkDataList(3, 300, 300));
        return datas;
    }

    private SensorManager sensorMgr;
    private Sensor localSensor;

    //初始化传感器
    public void initSensor() {
        sensorMgr = ((SensorManager) getSystemService(Context.SENSOR_SERVICE));
        localSensor = sensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
        //这里最后一个参数(SensorManager.SENSOR_DELAY_FASTEST)可以修改成SENSOR_DELAY_NORMAL或者其他的来调整传感器灵敏度,
        // 然后去掉onSensorChanged()方法中thisTime和lastTime的时间差判断,
        sensorMgr.registerListener(this, localSensor, SensorManager.SENSOR_DELAY_FASTEST);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        sensorMgr.unregisterListener(this, localSensor);//接触绑定传感器监听
    }

    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
    }

    @Override
    public void onSensorChanged(SensorEvent event) {
        long thisTime = System.currentTimeMillis();
        //改变传感器灵敏度,可以把这里的时间差判断去掉
        if (thisTime - lastTime > 200) {
            lastTime = thisTime;
            float x = event.values[0];
            float y = event.values[1];
            float z = event.values[2];
            anim(x, y);
        }
    }

    public void addView(RelativeLayout container, List<MarkDataList> markDataLists) {
        int tagWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_material_tag).getWidth();
        int containerWidth = 1080;//父布局宽度
        int containerHeight = 1920;//父布局高度
        float scaleX = (containerWidth / 330.0F);//MarkDataList中的x坐标是根据330F个像素进行标记的
        float scaleY = (containerHeight / 585.0F);//MarkDataList中的y坐标是根据585个像素进行标记的
        for (final MarkDataList anchorData : markDataLists) {
            ImageView localImageView = new ImageView(this);
            localImageView.setBackgroundResource(R.mipmap.ic_material_tag);
            localImageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "点击了飘带" + anchorData.getId(), Toast.LENGTH_SHORT).show();
                }
            });
            imageViewList.add(localImageView);
            RelativeLayout.LayoutParams localLayoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            localLayoutParams.setMargins((int) (anchorData.getX() * scaleX) - tagWidth / 2, (int) (anchorData.getY() * scaleY), 0, 0);
            container.addView(localImageView, localLayoutParams);
        }
    }

    private float xOld;
    private float yOld;

    //左右各180度
    public void anim(float x, float y) {
        for (ImageView imageView : imageViewList) {
            imageView.startAnimation(getAnim(xOld, yOld, x, y));
        }
        xOld = x;
        yOld = y;
    }

    private RotateAnimation getAnim(float xOld, float yOld, float x, float y) {
        RotateAnimation localRotateAnimation = new RotateAnimation(getRotate(xOld, yOld), getRotate(x, y), Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF, 0.2F);
        localRotateAnimation.setDuration(1000);
        localRotateAnimation.setFillAfter(true);//动画执行完后是否停留在执行完的状态
        localRotateAnimation.setInterpolator(new OvershootInterpolator());
        return localRotateAnimation;
    }

    /**
     * 根据加速度传感器的旋转方向x,y,计算得到旋转角度,包含正负,正负代表旋转的方向
     *
     * @param x
     * @param y
     * @return
     */
    public float getRotate(float x, float y) {
        float rotate = 0;
        if (x <= 0) {
            if (y > 0) {
                rotate = 9 * x;
            } else {
                rotate = -9 * (9 - y);
            }
        } else {
            if (y >= 0) {
                rotate = 9 * x;
            } else {
                rotate = 9 * (9 - y);
            }
        }
        return rotate;
    }
}

项目地址
https://gitlab.com/yubaokang/Houzz_ViewTagAnim

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,064评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,651评论 18 139
  • 最近因为体检报告说身体已经因为熬夜开始透支,后调整作息,跑步,又因为发烧感冒,每天都浑身乏力,浑浑噩噩,遂停止了写...
    小夙Sky阅读 157评论 0 0
  • 没有听见房东家的狗的声音。现在园子里非常静。那棵不知名的五瓣的白色小花仍然寂寞地开着。阳光照在松枝和盆中的花树上,...
    简书茶馆叶老板阅读 2,525评论 1 18
  • 我觉得你应该还是没有睡觉吧,下午6点睡到9点,怎么会困呢,无非就是想找个理由不想理我了。 我承认,今天我又小心眼了...
    遇见久伴阅读 157评论 0 0