仿微信朋友圈图片点击浏览和关闭时的图片缩放的过渡动画。

来源：互联网发布：手机如何彻底卸载软件编辑：程序博客网时间：2024/05/01 21:44

首先上效果图

上图功能具体思路是一个activity跳转，跳转到一个新的页面查看图片，中间加了一个缩放的过渡动画。 要实现这种，我们要先去掉activity的跳转动画

startActivity(intent);//取消activity动画overridePendingTransition(0, 0);
然后就是属性动画的运用


要实现这种需要获得动画的初始位置，也就是第一个activity里的imageview的位置，
top_img.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View view) {        Intent intent = new Intent(MainActivity.this, ImageActivity.class);        int[] screenLocation = new int[2];        top_img.getLocationOnScreen(screenLocation);//传递动画初始位置以及imageview图片路径过去        intent.putExtra(LEFT, screenLocation[0]).                putExtra(TOP, screenLocation[1]).                putExtra(WIDTH, top_img.getWidth()).                putExtra(HEIGHT, top_img.getHeight()).                putExtra(IMAGE, image1);        startActivity(intent);        //取消activity动画        overridePendingTransition(0, 0);    }});
然后在该位置上进行开始的缩放动画，以及结束后缩放回到的地方
主要是使用到属性动画的translation、scale、pivot.
     我们来介绍ObjectAnimator操作的属性。
      translationX和translationY：这两个属性作为一种增量来控制这View对象从它布局容器的左上角坐标开始的位置。
      scaleX和scaleY：这两个属性控制着View对象围绕他的支点进行2D缩放。
      pivotX和pivotY：这两个属性控制着View对象的支点位置，围绕这个支点进行旋转和缩放变换处理。默认情况下，该支点的位置就是View对象的中心点。
     alpha：它表示View对象的alpha透明度。默认值是1（不透明），0代表完全透明（不可见）。
    //进入动画    public void enterAnimation() {        //设置imageview动画的初始值        imageView.setPivotX(0);        imageView.setPivotY(0);        imageView.setScaleX(mWidthScale);        imageView.setScaleY(mHeightScale);        imageView.setTranslationX(mLeftDelta);        imageView.setTranslationY(mTopDelta);        //设置动画        TimeInterpolator sDecelerator = new DecelerateInterpolator();        //设置imageview缩放动画，以及缩放开始位置        imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).                translationX(0).translationY(0).setInterpolator(sDecelerator);        // 设置activity主布局背景颜色DURATION毫秒内透明度从透明到不透明        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);        bgAnim.setDuration(DURATION);        bgAnim.start();    }    public void exitAnimation(final Runnable endAction) {        TimeInterpolator sInterpolator = new AccelerateInterpolator();        //设置imageview缩放动画，以及缩放结束位置        imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).                translationX(mLeftDelta).translationY(mTopDelta)                .setInterpolator(sInterpolator).withEndAction(endAction);        // 设置activity主布局背景颜色DURATION毫秒内透明度从不透明到透明        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);        bgAnim.setDuration(DURATION);        bgAnim.start();    }
进入动画: 设置动画时间、插值器和scale、translation动画效果。
 imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).                translationX(0).translationY(0).setInterpolator(sDecelerator);
主页类MainActivity.java
package com.longsh.imageviewanimator;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.widget.ImageView;import com.squareup.picasso.Picasso;import static com.longsh.imageviewanimator.ImageActivity.HEIGHT;import static com.longsh.imageviewanimator.ImageActivity.IMAGE;import static com.longsh.imageviewanimator.ImageActivity.LEFT;import static com.longsh.imageviewanimator.ImageActivity.TOP;import static com.longsh.imageviewanimator.ImageActivity.WIDTH;/** * Created by q805699513 on 2017/2/2. */public class MainActivity extends Activity {    private ImageView top_img;    private ImageView center_img;    private ImageView bottom_img;    String image1 = "https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=50b3fcc5dd3f8794c7f2407cb3726591/4afbfbedab64034fba06dd7ba6c379310b551d87.jpg";    String image2 = "https://images-cn.ssl-images-amazon.com/images/I/61PI88GEqTL.jpg";    String image3 = "https://images-cn.ssl-images-amazon.com/images/I/41fi2pEYkuL.jpg";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        top_img = (ImageView) findViewById(R.id.top_img);        center_img = (ImageView) findViewById(R.id.center_img);        bottom_img = (ImageView) findViewById(R.id.bottom_img);        Picasso.with(this).load(image1).into(top_img);        Picasso.with(this).load(image2).into(center_img);        Picasso.with(this).load(image3).into(bottom_img);        top_img.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(MainActivity.this, ImageActivity.class);                int[] screenLocation = new int[2];                top_img.getLocationOnScreen(screenLocation);                intent.putExtra(LEFT, screenLocation[0]).                        putExtra(TOP, screenLocation[1]).                        putExtra(WIDTH, top_img.getWidth()).                        putExtra(HEIGHT, top_img.getHeight()).                        putExtra(IMAGE, image1);                startActivity(intent);                //取消activity动画                overridePendingTransition(0, 0);            }        });        center_img.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(MainActivity.this, ImageActivity.class);                int[] screenLocation = new int[2];                center_img.getLocationOnScreen(screenLocation);                intent.putExtra(LEFT, screenLocation[0]).                        putExtra(TOP, screenLocation[1]).                        putExtra(WIDTH, center_img.getWidth()).                        putExtra(HEIGHT, center_img.getHeight()).                        putExtra(IMAGE, image2);                startActivity(intent);                //取消activity动画                overridePendingTransition(0, 0);            }        });        bottom_img.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(MainActivity.this, ImageActivity.class);                int[] screenLocation = new int[2];                bottom_img.getLocationOnScreen(screenLocation);                intent.putExtra(LEFT, screenLocation[0]).                        putExtra(TOP, screenLocation[1]).                        putExtra(WIDTH, bottom_img.getWidth()).                        putExtra(HEIGHT, bottom_img.getHeight()).                        putExtra(IMAGE, image3);                startActivity(intent);                //取消activity动画                overridePendingTransition(0, 0);            }        });    }}
图片预览类ImageActivity.java
package com.longsh.imageviewanimator;import android.animation.ObjectAnimator;import android.animation.TimeInterpolator;import android.app.Activity;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.os.Bundle;import android.view.View;import android.view.ViewTreeObserver;import android.view.animation.AccelerateInterpolator;import android.view.animation.DecelerateInterpolator;import android.widget.ImageView;import android.widget.LinearLayout;import com.squareup.picasso.Picasso;public class ImageActivity extends Activity {    private static final int DURATION = 666;    public final static String TOP = "top";    public final static String LEFT = "left";    public final static String WIDTH = "width";    public final static String HEIGHT = "height";    public final static String IMAGE = "image";    private ImageView imageView;    private int mLeftDelta;    private int mTopDelta;    private float mWidthScale;    private float mHeightScale;    private LinearLayout linearLayout;    private ColorDrawable colorDrawable;    private int intentTop;    private int intentLeft;    private int intentWidth;    private int intentHeight;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_image);        Bundle bundle = getIntent().getExtras();        intentTop = bundle.getInt(TOP);        intentLeft = bundle.getInt(LEFT);        intentWidth = bundle.getInt(WIDTH);        intentHeight = bundle.getInt(HEIGHT);        String image = bundle.getString(IMAGE);        imageView = (ImageView) findViewById(R.id.imageView);        Picasso.with(this).load(image).into(imageView);        linearLayout = (LinearLayout) findViewById(R.id.linear_bg);        colorDrawable = new ColorDrawable(Color.BLACK);        //布局背景设置        linearLayout.setBackgroundDrawable(colorDrawable);        //ViewTreeObserver监听        if (savedInstanceState == null) {            ViewTreeObserver observer = imageView.getViewTreeObserver();            observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {                @Override                public boolean onPreDraw() {                    imageView.getViewTreeObserver().removeOnPreDrawListener(this);                    //坐标的获取设置                    int[] screenLocation = new int[2];                    imageView.getLocationOnScreen(screenLocation);                    mLeftDelta = intentLeft - screenLocation[0];                    mTopDelta = intentTop - screenLocation[1];                    mWidthScale = (float) intentWidth / imageView.getWidth();                    mHeightScale = (float) intentHeight / imageView.getHeight();                    //开启缩放动画                    enterAnimation();                    return true;                }            });        }        imageView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                exitAnimation(new Runnable() {                    public void run() {                        finish();                        //取消activity动画                        overridePendingTransition(0, 0);                    }                });            }        });    }    @Override    public void onBackPressed() {        exitAnimation(new Runnable() {            public void run() {                finish();                //取消activity动画                overridePendingTransition(0, 0);            }        });    }    //进入动画    public void enterAnimation() {        //设置imageview动画的初始值        imageView.setPivotX(0);        imageView.setPivotY(0);        imageView.setScaleX(mWidthScale);        imageView.setScaleY(mHeightScale);        imageView.setTranslationX(mLeftDelta);        imageView.setTranslationY(mTopDelta);        //设置动画        TimeInterpolator sDecelerator = new DecelerateInterpolator();        //设置imageview缩放动画，以及缩放开始位置        imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).                translationX(0).translationY(0).setInterpolator(sDecelerator);        // 设置activity主布局背景颜色DURATION毫秒内透明度从透明到不透明        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);        bgAnim.setDuration(DURATION);        bgAnim.start();    }    public void exitAnimation(final Runnable endAction) {        TimeInterpolator sInterpolator = new AccelerateInterpolator();        //设置imageview缩放动画，以及缩放结束位置        imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).                translationX(mLeftDelta).translationY(mTopDelta)                .setInterpolator(sInterpolator).withEndAction(endAction);        // 设置activity主布局背景颜色DURATION毫秒内透明度从不透明到透明        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);        bgAnim.setDuration(DURATION);        bgAnim.start();    }}


以及需要对ImageActivity设置成背景透明的activity
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    <style name="MyTheme" parent="AppTheme">        <item name="android:windowNoTitle">true</item>        <item name="android:windowIsTranslucent">true</item>        <item name="android:windowBackground">@android:color/transparent</item>    </style>
大概就是这样了，源码有需要的话我也可以上传。

3 0