【Android 动画】动画详解之仿微信查看大图效果(四)

栏目: Android · 发布时间: 5年前

内容简介:前几篇中,我们说了安卓的补间动画和插值器,这一篇,我们来写2个例子。先上效果图:相信大家都有留意微信的查看大图动画,它会由图片当前在屏幕中的位置渐渐放大移动到屏幕中心,简单来说的话就是一个缩放+透明度动画。 先上效果图:

前几篇中,我们说了安卓的补间动画和插值器,这一篇,我们来写2个例子。

一、小球落地动画

先上效果图:

【Android 动画】动画详解之仿微信查看大图效果(四)
可以看到,小球是先加速下落,碰到底部后弹起,再下落,最后完全静止,如果要手写这个过程,还是相当麻烦的,有没有简单的办法? 这里就要用到我们第2篇中说到过的 BounceInterpolator 插值器。 详情请看 【Android 动画】动画详解之插值器(二)
translateAnimation = new TranslateAnimation(0, 0, 0, DensityUtils.dp2px(BallActivity.this, 400));
        translateAnimation.setDuration(2000);
        translateAnimation.setFillAfter(true);
        translateAnimation.setInterpolator(new BounceInterpolator());
        tvDemo.startAnimation(translateAnimation);
复制代码

二、仿微信查看大图效果

相信大家都有留意微信的查看大图动画,它会由图片当前在屏幕中的位置渐渐放大移动到屏幕中心,简单来说的话就是一个缩放+透明度动画。 先上效果图:

【Android 动画】动画详解之仿微信查看大图效果(四)

之前在第一篇中,我们说过,缩放动画的取值可以是具体数值、相对于自身、相对于父布局这3种,这里就需要使用相对于父布局这种。

首先,我们需要获取点击按钮在屏幕中的坐标。先定义一个int数据用于存放坐标,然后调用 getLocationOnScreen 方法即可获取该控件在屏幕中的坐标

int[] location = new int[2];
  btnTopLeft.getLocationOnScreen(location);
复制代码

然后,计算该坐标相对于屏幕的百分比

pointx = getIntent().getIntExtra(POINTX, 0);
        pointy = getIntent().getIntExtra(POINTY, 0);

        DisplayMetrics metrics = getResources().getDisplayMetrics();
        if (pointx == 0) {

            pointXValue = 0.5f;
        } else {
            pointXValue = pointx / metrics.widthPixels;

        }
        if (pointy == 0) {
            pointYValue = 0.5f;
        } else {
            pointYValue = pointy / metrics.heightPixels;
        }
复制代码

添加动画

AnimationSet animationSet = new AnimationSet(true);


        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);

        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1f, 0, 1f, ScaleAnimation.RELATIVE_TO_PARENT,
                pointXValue, ScaleAnimation.RELATIVE_TO_PARENT, pointYValue);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);

        animationSet.setDuration(500);
        animationSet.setFillAfter(true);
        ivImg.startAnimation(animationSet);
复制代码

处理返回,重写 onBackPressed 方法,返回时,与进入的动画正好相反

@Override
    public void onBackPressed() {

        AnimationSet animationSet = new AnimationSet(true);


        AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);

        ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 0, 1f, 0, ScaleAnimation.RELATIVE_TO_PARENT,
                pointXValue, ScaleAnimation.RELATIVE_TO_PARENT, pointYValue);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);

        animationSet.setDuration(500);
        animationSet.setFillAfter(true);
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                ImgActivity.super.onBackPressed();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        ivImg.startAnimation(animationSet);

    }
复制代码

还需要处理默认的Activity切换动画,以及 Activity 的默认背景

startActivity(intent);
        overridePendingTransition(0, 0);
复制代码

设置目标Activity的主题

<activity
            android:name=".demo.ImgActivity"
            android:theme="@style/transparent"></activity>
复制代码
<style name="transparent" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
复制代码

当我们运行时会发现,动画的起始位置是按钮的左上角,原来使用 getLocationOnScreen 获取的是控件左上角的坐标,所以我们需要加上控件宽高的 1/2 。 TIP:由于此处所有按钮的宽高都一样,所以就取了同一个。

Intent intent = new Intent(WXPicActivity.this, ImgActivity.class);
        int[] location = new int[2];

        switch (view.getId()) {
            case R.id.btn_top_left:
                btnTopLeft.getLocationOnScreen(location);
                break;
            case R.id.btn_top_right:
                btnTopRight.getLocationOnScreen(location);
                break;
            case R.id.btn_bottom_left:
                btnBottomLeft.getLocationOnScreen(location);
                break;
            case R.id.btn_bottom_right:
                btnBottomRight.getLocationOnScreen(location);
                break;
            case R.id.btn_center:
                btnCenter.getLocationOnScreen(location);
                break;
        }
        intent.putExtra(ImgActivity.POINTX, location[0] + btnCenter.getMeasuredWidth() / 2);
        intent.putExtra(ImgActivity.POINTY, location[1] + btnCenter.getMeasuredHeight() / 2);
        startActivity(intent);
        overridePendingTransition(0, 0);
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

颠覆式创新:移动互联网时代的生存法则

颠覆式创新:移动互联网时代的生存法则

李善友 / 机械工业出版社 / 2014-12-1 / 69

为什么把每件事情都做对了,仍有可能错失城池?为什么无人可敌的领先企业,却在一夜之间虎落平阳? 短短三年间诺基亚陨落,摩托罗拉区区29亿美元出售给联想,芯片业霸主英特尔在移动芯片领域份额几乎为零,风光无限的巨头转眼成为被颠覆的恐龙,默默无闻的小公司一战成名迅速崛起,令人瞠目结舌的现象几乎都被“颠覆式创新”法则所解释。颠覆式创新教你在新的商业竞争中“换操作系统”而不是“打补丁”,小公司用破坏性思......一起来看看 《颠覆式创新:移动互联网时代的生存法则》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具