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

首先上效果图




 
  

上图功能具体思路是一个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
 
  
 
  
    

    
大概就是这样了,源码有需要的话我也可以上传。


 
  
 
  



 
  
 
 

你可能感兴趣的:(Android,Android动画)