你知道android中的视差特效吗

Posted JasonGaoH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了你知道android中的视差特效吗相关的知识,希望对你有一定的参考价值。

阻尼效果(视差特效)

空间,微博很多地方都有这种下拉出现的”阻尼“效果,这种效果最早在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。

以上是关于你知道android中的视差特效吗的主要内容,如果未能解决你的问题,请参考以下文章

我希望我的 android 应用程序能够识别手指弹响,有啥办法吗?

仿QQ空间视差效果,ListView.setHeader( )

Android中的视差效应

WEB开发会用到的一些特效

js之移动端特效一

js之移动端特效一