你知道android中的视差特效吗

Posted 2022-04-23 JasonGaoH

阻尼效果（视差特效）

空间，微博很多地方都有这种下拉出现的”阻尼“效果，这种效果最早在ios上出现，如今android上这种功能也是很常见了。

先看效果图：

该功能可以分为两个点：

1. 当ListView下拉的时候，顶部的HeaderView会有一个拉长的效果；
2. 当下拉一段距离后，ListView会复位，执行一个简单的回弹动画。

这个功能实现起来挺简单的，下面来介绍如何实现：

第一个功能：（阻尼效果）

来看下关键代码：

	@Override
	protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
			int scrollY, int scrollRangeX, int scrollRangeY,
			int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) 
		Log.d("TAG", "deltaY: " +deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
				+ " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
		
		// 手指拉动 并且 是下拉
		if(isTouchEvent && deltaY < 0) 
			// 把拉动的瞬时变化量的绝对值交给Header, 就可以实现放大效果
			if(mImage.getHeight() <= drawableHeight ) 
			    //①将deltaY除以3使产生阻尼效果
				int newHeight = mImage.getHeight() + Math.abs(deltaY/3.0f);
				
				mImage.getLayoutParams().height = newHeight;
				使View重绘
				mImage.requestLayout();
			
			
		
		
		return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
				scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
	

看到上面的代码，该段逻辑主要针对第一个功能，要重写overScrollBy方法，通过监听下拉的移动的高度赋给ListView的HeaderView，使View重绘来实现这种效果。

注意上面的①处，将下拉的幅度按比例的缩小来赋值给图片的高度时，就会产生很难下拉的效果，即“阻尼”效果。

第二个功能：（回弹动画）

当手指松开时，需要执行回弹动画。手指松开，即ACTION_UP,重写onTouchEvent来实现相关逻辑。

看如下代码：

	@Override
	public boolean onTouchEvent(MotionEvent ev) 
		
		switch (ev.getAction()) 
			case MotionEvent.ACTION_UP:
				// 执行回弹动画, 方式一: 属性动画\\值动画
				// 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
				final int startHeight = mImage.getHeight();
				final int endHeight = mOriginalHeight;
				
//				valueAnimator(startHeight, endHeight);

				// 执行回弹动画, 方式二: 自定义Animation
				ResetAnimation animation = new ResetAnimation(mImage, startHeight, endHeight);
				startAnimation(animation);
				
				break;
		
		return super.onTouchEvent(ev);
	

	private void valueAnimator(final int startHeight, final int endHeight) 
		ValueAnimator mValueAnim = ValueAnimator.ofInt(1);
		mValueAnim.addUpdateListener(new AnimatorUpdateListener() 
			
			@Override
			public void onAnimationUpdate(ValueAnimator mAnim) 
			    //①获取动画的百分比
				float fraction = mAnim.getAnimatedFraction();
				// percent 0.0 -> 1.0
				Log.d(TAG, "fraction: " +fraction);
				Integer newHeight = evaluate(fraction, startHeight, endHeight);

				mImage.getLayoutParams().height = newHeight;
				mImage.requestLayout();
			
		);
		//设置动画的插值器，OvershootInterpolator向前甩一定值后再回到原来位置
		mValueAnim.setInterpolator(new OvershootInterpolator());
		mValueAnim.setDuration(500);
		mValueAnim.start();
	
	
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) 
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    

看到上面的逻辑，在onTouchEvent监听到ACTION_UP后，需要执行回弹动画，这部分既可以用属性动画来实现，也可以自定义动画的方式来实现。

这两种方式都是需要将ListView重置为初始状态，不过是以动画的方式来实现。
注意上面①处的代码，float fraction = mAnim.getAnimatedFraction();getAnimatedFraction的API解释如下：

Returns the current animation fraction, which is the elapsed/interpolated 
fraction used in the most recent frame update on the animation.

返回当前动画的百分比，这个百分比能够在动画执行中用于更新当前的片段。

自定义动画的方式

上面除了采用属性动画外，还可以使用自定义动画的方式。

看下自定义动画的逻辑：

package com.wind.parallax.ui;

import android.view.animation.Animation;
import android.view.animation.OvershootInterpolator;
import android.view.animation.Transformation;
import android.widget.ImageView;

public class ResetAnimation extends Animation 

	private final ImageView mImage;
	private final int startHeight;
	private final int endHeight;

	public ResetAnimation(ImageView mImage, int startHeight, int endHeight) 
		this.mImage = mImage;
		this.startHeight = startHeight;
		this.endHeight = endHeight;
		
		setInterpolator(new OvershootInterpolator());
		//设置动画执行时长
		setDuration(500);
	

	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) 
		// interpolatedTime 0.0f -> 1.0f
		

		Integer newHeight = evaluate(interpolatedTime, startHeight, endHeight);

		mImage.getLayoutParams().height = newHeight;
		mImage.requestLayout();
		
		super.applyTransformation(interpolatedTime, t);
	
	
	
    /**
     * 类型估值器
     * @param fraction
     * @param startValue
     * @param endValue
     * @return
     */
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) 
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    
	

该自定义动画就是将最上面的属性动画改写下，这部分的逻辑挺简单的，就不再重复解释了。

补充

最后看下MainActivity和布局中的逻辑。

MainActivity.java

package com.wind.parallax;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;

import com.wind.parallax.ui.MyListView;
import com.wind.parallax.utils.Cheeses;

public class MainActivity extends Activity 

	@Override
	protected void onCreate(Bundle savedInstanceState) 
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		final MyListView mListView = (MyListView) findViewById(R.id.lv);
		
		final View mHeaderView = View.inflate(MainActivity.this, R.layout.view_header, null);
		final ImageView mImage = (ImageView) mHeaderView.findViewById(R.id.iv);
		
		mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() 
			
			@SuppressLint("NewApi")
			@Override
			public void onGlobalLayout() 
				// 当布局填充结束之后, 此方法会被调用
				mListView.setParallaxImage(mImage);
				
				mHeaderView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
			
		);
		mListView.addHeaderView(mHeaderView);
		
		
		mListView.setAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1,Cheeses.NAMES));
	

view_header.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:scaleType="centerCrop"
        android:src="@drawable/parallax" />

</LinearLayout>

Activity中的逻辑比较简单，初始化下数据。

另外，注意在view_header.xml中设置图片采用的拉伸方式是centerCrop，scaleType有很多属性，这里必须采用这种方式处理，采用其他的会使图片拉伸的很不美观，关于scaleType的多种属性这里就不详细说明了，感兴趣的童鞋可以自己研究下，后面如果有时间也会有这方面的笔记贴出来，O(∩_∩)O。